Skip to content

Commit 805aae6

Browse files
ChronosSFChronosSF
authored
Merge branch 'vnext' into dkamburov/theming-25
2 parents 77a4447 + d78059b commit 805aae6

14 files changed

Lines changed: 851 additions & 396 deletions

File tree

‎.github/workflows/igniteui-react-examples-cd.yml‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
name: IgniteUI React Examples CD
2+
permissions:
3+
contents: write
4+
5+
on:
6+
push:
7+
branches:
8+
- vnext
9+
- master
10+
workflow_dispatch:
11+
inputs:
12+
branch:
13+
description: 'Input a branch name (e.g., vnext)'
14+
required: true
15+
isVerbose:
16+
description: 'Get verbose output from steps - where configurable'
17+
type: boolean
18+
default: false
19+
20+
env:
21+
BRANCH_REF: ${{ github.event.inputs.branch && format('refs/heads/{0}', github.event.inputs.branch) || github.ref }}
22+
23+
jobs:
24+
BuildSamples:
25+
runs-on: ubuntu-latest
26+
27+
steps:
28+
- name: Checkout repository
29+
uses: actions/checkout@v4
30+
with:
31+
ref: ${{ env.BRANCH_REF }}
32+
token: ${{ secrets.GITHUB_TOKEN }}
33+
34+
- name: Install Node
35+
uses: actions/setup-node@v4
36+
with:
37+
node-version: '22.x'
38+
cache: 'npm'
39+
cache-dependency-path: browser/package-lock.json
40+
41+
- name: Create .npmrc file
42+
working-directory: browser
43+
run: |
44+
if [ -f ".npmrc" ]; then
45+
rm .npmrc
46+
fi
47+
touch .npmrc
48+
49+
- name: Configure npm registry
50+
working-directory: browser
51+
run: |
52+
echo "@infragistics:registry=https://packages.infragistics.com/npm/js-licensed/" >> .npmrc
53+
echo "//packages.infragistics.com/npm/js-licensed/:username=${{ secrets.INFRAGISTICS_NPM_USER }}" >> .npmrc
54+
echo "//packages.infragistics.com/npm/js-licensed/:_auth=${{ secrets.INFRAGISTICS_NPM_TOKEN }}" >> .npmrc
55+
56+
- name: Replace references to IG trial packages with licensed ones in package.json
57+
working-directory: browser
58+
shell: pwsh
59+
run: |
60+
$packageJson = Get-Content -Raw ./package.json | ConvertFrom-Json
61+
$properties = $packageJson.dependencies.PSObject.Properties `
62+
| where-object { $_.Name.StartsWith("igniteui-react") -or $_.Name.StartsWith("igniteui-dockmanager") }
63+
64+
foreach( $property in $properties )
65+
{
66+
$oldName = $property.Name;
67+
$newName = "@infragistics/" + $oldName
68+
69+
# remember the current value of the old property
70+
$value = $property.Value;
71+
72+
# remove reference to the trial package reference
73+
$packageJson.dependencies.psobject.Properties.Remove($oldName);
74+
75+
# add reference to the licensed package reference
76+
$packageJson.dependencies | Add-Member -NotePropertyName $newName -NotePropertyValue $value;
77+
}
78+
79+
ConvertTo-Json -InputObject $packageJson | Set-Content -Path ./package.json
80+
81+
- name: npm install
82+
working-directory: browser
83+
run: npm install
84+
85+
- name: Replace references to IG trial packages with licensed ones in TSX files
86+
shell: pwsh
87+
run: |
88+
Get-ChildItem -Include "*.tsx","*.ts" -Recurse | `
89+
ForEach { (Get-Content $_.PSPath | ForEach { ($_ -replace '(from|import)\s?[''"](igniteui-(react|dockmanager).*)[''"]', '$1 "@infragistics/$2"') }) | `
90+
Set-Content $_.PSPath }
91+
92+
- name: npm run build
93+
working-directory: browser
94+
run: npm run build
95+
96+
- name: Package samples browser
97+
run: |
98+
cd browser/build
99+
zip -r ${{ github.workspace }}/react-demos.zip ./
100+
101+
- name: Publish pipeline artifact
102+
uses: actions/upload-artifact@v4
103+
with:
104+
name: react-demos-artifact
105+
path: react-demos.zip
106+
107+
- name: Trigger Deploy Workflow in IgniteUI Actions
108+
uses: actions/github-script@v8
109+
with:
110+
github-token: ${{ secrets.CLASSIC_PAT_GITHUB }}
111+
script: |
112+
await github.rest.repos.createDispatchEvent({
113+
owner: 'IgniteUI',
114+
repo: 'igniteui-actions',
115+
event_type: 'igniteui-samples-cd',
116+
client_payload: {
117+
calling_branch: "${{ env.BRANCH_REF }}",
118+
repository: "${{ github.repository }}",
119+
run_id: "${{ github.run_id }}",
120+
artifact_name: "react-demos-artifact",
121+
base_href: "react-demos",
122+
submodule_dir: "react-demos",
123+
ref: "${{ github.ref }}",
124+
sha: "${{ github.sha }}",
125+
branch: '${{ github.ref_name }}',
126+
}
127+
});
128+

‎azure-pipelines/build-pipeline.yml‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
1-
trigger:
2-
branches:
3-
include:
4-
- vnext
5-
- master
6-
1+
trigger: none
72
pr: none
83

94
parameters:

‎samples/grids/grid-lite/column-config-basic/src/index.tsx‎

Lines changed: 54 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,78 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom/client';
3-
import { GridLiteDataService, ProductInfo } from './GridLiteDataService';
1+
import React from "react";
2+
import ReactDOM from "react-dom/client";
3+
import { GridLiteDataService, ProductInfo } from "./GridLiteDataService";
44

5-
// Import the web component
6-
import { IgcGridLite } from 'igniteui-grid-lite';
7-
import {
8-
defineComponents,
9-
IgcRatingComponent
10-
} from 'igniteui-webcomponents';
5+
import { IgrRating } from "igniteui-react";
6+
import {
7+
IgrGridLite,
8+
IgrGridLiteColumn,
9+
type IgrCellContext,
10+
} from "igniteui-react/grid-lite";
1111

1212
import "igniteui-webcomponents/themes/light/bootstrap.css";
1313
import "./index.css";
1414

15-
// Register components
16-
IgcGridLite.register();
17-
defineComponents(IgcRatingComponent);
18-
19-
const formatter = new Intl.NumberFormat('en-EN', {
20-
style: 'currency',
21-
currency: 'EUR'
15+
const formatter = new Intl.NumberFormat("en-150", {
16+
style: "currency",
17+
currency: "EUR",
2218
});
2319

20+
const formatCurrency = (value: number) => formatter.format(value);
21+
2422
// Define cellTemplate functions outside component
25-
const currencyCellTemplate = (params: any) => {
26-
const span = document.createElement('span');
27-
span.textContent = formatter.format(params.value);
28-
return span;
29-
};
23+
const currencyCellTemplate = (ctx: IgrCellContext) => (
24+
<span>{formatCurrency(ctx.value)}</span>
25+
);
3026

31-
const ratingCellTemplate = (params: any) => {
32-
const rating = document.createElement('igc-rating');
33-
rating.setAttribute('readonly', '');
34-
rating.setAttribute('step', '0.01');
35-
rating.setAttribute('value', params.value.toString());
36-
return rating;
37-
};
27+
const ratingCellTemplate = (ctx: IgrCellContext) => (
28+
<IgrRating readOnly max={5} value={ctx.value}></IgrRating>
29+
);
3830

3931
export default function Sample() {
40-
const gridRef = React.useRef<any>(null);
32+
const [data, setData] = React.useState<ProductInfo[]>([]);
4133

4234
React.useEffect(() => {
43-
if (gridRef.current) {
44-
const dataService = new GridLiteDataService();
45-
const data: ProductInfo[] = dataService.generateProducts(50);
46-
gridRef.current.data = data;
47-
}
35+
const dataService = new GridLiteDataService();
36+
const items: ProductInfo[] = dataService.generateProducts(50);
37+
setData(items);
4838
}, []);
4939

5040
return (
5141
<div className="container sample ig-typography">
5242
<div className="grid-lite-wrapper">
53-
<igc-grid-lite ref={gridRef} id="grid-lite">
54-
<igc-grid-lite-column field="name" header="Product Name"></igc-grid-lite-column>
55-
<igc-grid-lite-column field="price" header="Price" data-type="number" cellTemplate={currencyCellTemplate}></igc-grid-lite-column>
56-
<igc-grid-lite-column field="sold" data-type="number" header="Units sold"></igc-grid-lite-column>
57-
<igc-grid-lite-column field="total" header="Total sold" cellTemplate={currencyCellTemplate}></igc-grid-lite-column>
58-
<igc-grid-lite-column field="rating" data-type="number" header="Customer rating" cellTemplate={ratingCellTemplate}></igc-grid-lite-column>
59-
</igc-grid-lite>
43+
<IgrGridLite data={data} id="grid-lite">
44+
<IgrGridLiteColumn
45+
field="name"
46+
header="Product Name"
47+
></IgrGridLiteColumn>
48+
<IgrGridLiteColumn
49+
field="price"
50+
header="Price"
51+
dataType="number"
52+
cellTemplate={currencyCellTemplate}
53+
></IgrGridLiteColumn>
54+
<IgrGridLiteColumn
55+
field="sold"
56+
dataType="number"
57+
header="Units Sold"
58+
></IgrGridLiteColumn>
59+
<IgrGridLiteColumn
60+
field="total"
61+
header="Total sold"
62+
cellTemplate={currencyCellTemplate}
63+
></IgrGridLiteColumn>
64+
<IgrGridLiteColumn
65+
field="rating"
66+
dataType="number"
67+
header="Customer Rating"
68+
cellTemplate={ratingCellTemplate}
69+
></IgrGridLiteColumn>
70+
</IgrGridLite>
6071
</div>
6172
</div>
6273
);
6374
}
6475

6576
// rendering above component in the React DOM
66-
const root = ReactDOM.createRoot(document.getElementById('root'));
67-
root.render(<Sample/>);
77+
const root = ReactDOM.createRoot(document.getElementById("root"));
78+
root.render(<Sample />);

0 commit comments

Comments
 (0)