Skip to content

Commit 5e60bd6

Browse files
maksymkaDmaksymkaD
committed
Updated to React 19
1 parent dfba6ed commit 5e60bd6

File tree

13 files changed

+35
-80
lines changed

13 files changed

+35
-80
lines changed

‎ES6/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@
1313
"@amcharts/amcharts4": "^4.10.36",
1414
"@amcharts/amcharts5": "^5.4.1",
1515
"highcharts": "^11.1.0",
16-
"react": "^18.2.0",
17-
"react-dom": "^18.2.0",
16+
"react": "^19.0.0",
17+
"react-dom": "^19.0.0",
1818
"react-flexmonster": "latest",
1919
"react-router-dom": "^6.14.2"
2020
},
2121
"devDependencies": {
22-
"@types/react": "^18.2.15",
23-
"@types/react-dom": "^18.2.7",
22+
"@types/react": "^19.0.0",
23+
"@types/react-dom": "^19.0.0",
2424
"@vitejs/plugin-react": "^4.0.3",
2525
"eslint": "^8.45.0",
2626
"eslint-plugin-react": "^7.32.2",

‎nextjs-ts/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,14 @@
1414
"@amcharts/amcharts4": "^4.10.36",
1515
"@amcharts/amcharts5": "^5.3.15",
1616
"@types/node": "20.2.5",
17-
"@types/react": "^18.3.12",
18-
"@types/react-dom": "^18.3.1",
17+
"@types/react": "^19.0.0",
18+
"@types/react-dom": "^19.0.0",
1919
"flexmonster": "latest",
2020
"highcharts": "^11.1.0",
2121
"next": "15.1.3",
2222
"open-cli": "^7.2.0",
23-
"react": "^18.3.1 ",
24-
"react-dom": "^18.3.1",
23+
"react": "^19.0.0",
24+
"react-dom": "^19.0.0",
2525
"react-flexmonster": "latest",
2626
"typescript": "5.1.3"
2727
}

‎nextjs-ts/src/UIElements/PivotWrapper.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@ import "flexmonster/lib/flexmonster.highcharts.js";
88

99
// A custom type so we can pass a reference along with other Flexmonster params
1010
type PivotProps = Flexmonster.Params & {
11-
pivotRef?: React.ForwardedRef<FlexmonsterReact.Pivot>;
11+
ref?: React.Ref<FlexmonsterReact.Pivot>; //Ref
1212
}
1313

14-
const PivotWrapper: React.FC<PivotProps> = ({ pivotRef, ...params}) => {
14+
const PivotWrapper: React.FC<PivotProps> = ({ ref, ...params}) => {
1515
return (
1616
<FlexmonsterReact.Pivot
1717
{...params}
18-
ref={pivotRef}
18+
ref={ref}
1919
/>
2020
)
2121
}
2222

23-
export default PivotWrapper;
23+
export default PivotWrapper;

‎nextjs-ts/src/app/customizing-grid/page.tsx

+3-8
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,11 @@ import dynamic from "next/dynamic";
1010
const PivotWrap = dynamic(() => import('@/UIElements/PivotWrapper'), {
1111
ssr: false,
1212
loading: () => <h1>Loading Flexmonster...</h1>
13-
});
14-
15-
// Forward ref because PivotWrap is imported dynamically and we need to pass a ref to it
16-
const ForwardRefPivot = React.forwardRef<Pivot, Flexmonster.Params>((props, ref?: React.ForwardedRef<Pivot>) =>
17-
<PivotWrap {...props} pivotRef={ref}/>
18-
)
13+
});
1914

2015
export default function CustomizingGrid() {
2116

22-
const pivotRef: React.RefObject<Pivot> = React.useRef<Pivot>(null);
17+
const pivotRef: React.RefObject<Pivot | null> = React.useRef<Pivot>(null);
2318

2419
const customizeCellFunction = (cell: Flexmonster.CellBuilder, data: Flexmonster.CellData) => {
2520
if (data.measure && data.measure.uniqueName === "Price") {
@@ -83,7 +78,7 @@ export default function CustomizingGrid() {
8378
/>
8479
</div>
8580

86-
<ForwardRefPivot
81+
<PivotWrap
8782
ref={pivotRef}
8883
toolbar={true}
8984
customizeCell={customizeCellFunction}

‎nextjs-ts/src/app/customizing-toolbar/page.tsx

+2-7
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,9 @@ const PivotWrap = dynamic(() => import('@/UIElements/PivotWrapper'), {
1111
loading: () => <h1>Loading Flexmonster...</h1>
1212
});
1313

14-
// Forward ref because PivotWrap is imported dynamically and we need to pass a ref to it
15-
const ForwardRefPivot = React.forwardRef<Pivot, Flexmonster.Params>((props, ref?: React.ForwardedRef<Pivot>) =>
16-
<PivotWrap {...props} pivotRef={ref}/>
17-
)
18-
1914
export default function CustomizingToolba() {
2015

21-
const pivotRef: React.RefObject<Pivot> = React.useRef<Pivot>(null);
16+
const pivotRef: React.RefObject<Pivot | null> = React.useRef<Pivot>(null);
2217

2318
const showInfo = () => {
2419
pivotRef.current?.flexmonster.alert({
@@ -57,7 +52,7 @@ export default function CustomizingToolba() {
5752
</p>
5853
</div>
5954

60-
<ForwardRefPivot
55+
<PivotWrap
6156
ref={pivotRef}
6257
toolbar={true}
6358
width="100%"

‎nextjs-ts/src/app/handling-events/page.tsx

+3-8
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,7 @@ import dynamic from "next/dynamic";
1111
const PivotWrap = dynamic(() => import('@/UIElements/PivotWrapper'), {
1212
ssr: false,
1313
loading: () => <h1>Loading Flexmonster...</h1>
14-
});
15-
16-
// Forward ref because PivotWrap is imported dynamically and we need to pass a ref to it
17-
const ForwardRefPivot = React.forwardRef<Pivot, Flexmonster.Params>((props, ref?: React.ForwardedRef<Pivot>) =>
18-
<PivotWrap {...props} pivotRef={ref}/>
19-
)
14+
});
2015

2116
export default function HandlingEvents() {
2217
// Managing state for functional components
@@ -25,7 +20,7 @@ export default function HandlingEvents() {
2520
event: string
2621
}[]>([]);
2722

28-
const pivotRef: React.RefObject<Pivot> = React.useRef<Pivot>(null);
23+
const pivotRef: React.RefObject<Pivot | null> = React.useRef<Pivot>(null);
2924

3025
// Hook that fires every re-render on the client
3126
React.useEffect(() => {
@@ -130,7 +125,7 @@ export default function HandlingEvents() {
130125
</div>
131126

132127
<div>
133-
<ForwardRefPivot
128+
<PivotWrap
134129
ref={pivotRef}
135130
toolbar={true}
136131
// Can't be serialized, so this must be a client component

‎nextjs-ts/src/app/pivot-table-demo/page.tsx

+1-6
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,6 @@ const PivotWrap = dynamic(() => import('@/UIElements/PivotWrapper'), {
1111
loading: () => <h1>Loading Flexmonster...</h1>
1212
});
1313

14-
// Forward ref because PivotWrap is imported dynamically and we need to pass a ref to it
15-
const ForwardRefPivot = React.forwardRef<Pivot, Flexmonster.Params>((props, ref?: React.ForwardedRef<Pivot>) =>
16-
<PivotWrap {...props} pivotRef={ref} />
17-
)
18-
1914
export default function PivotTableDemo() {
2015
return (
2116
<>
@@ -32,7 +27,7 @@ export default function PivotTableDemo() {
3227
</div>
3328

3429
<div className="App">
35-
<ForwardRefPivot
30+
<PivotWrap
3631
toolbar={true}
3732
beforetoolbarcreated={toolbar => {
3833
toolbar.showShareReportTab = true;

‎nextjs-ts/src/app/updating-data/page.tsx

+2-7
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,9 @@ const PivotWrap = dynamic(() => import('@/UIElements/PivotWrapper'), {
1111
loading: () => <h1>Loading Flexmonster...</h1>
1212
});
1313

14-
// Forward ref because PivotWrap is imported dynamically and we need to pass a ref to it
15-
const ForwardRefPivot = React.forwardRef<Pivot, Flexmonster.Params>((props, ref?: React.ForwardedRef<Pivot>) =>
16-
<PivotWrap {...props} pivotRef={ref} />
17-
)
18-
1914
export default function UpdatingData() {
2015

21-
const pivotRef: React.RefObject<Pivot> = React.useRef<Pivot>(null);
16+
const pivotRef: React.RefObject<Pivot | null> = React.useRef<Pivot>(null);
2217

2318
let data = [
2419
{
@@ -97,7 +92,7 @@ export default function UpdatingData() {
9792

9893
<button className="button-red" onClick={updateTheData}>Update data</button>
9994

100-
<ForwardRefPivot
95+
<PivotWrap
10196
ref={pivotRef}
10297
toolbar={true}
10398
beforetoolbarcreated={toolbar => {

‎nextjs-ts/src/app/using-api-calls/page.tsx

+2-7
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,9 @@ const PivotWrap = dynamic(() => import('@/UIElements/PivotWrapper'), {
1212
loading: () => <h1>Loading Flexmonster...</h1>
1313
});
1414

15-
// Forward ref because PivotWrap is imported dynamically and we need to pass a ref to it
16-
const ForwardRefPivot = React.forwardRef<Pivot, Flexmonster.Params>((props, ref?: React.ForwardedRef<Pivot>) =>
17-
<PivotWrap {...props} pivotRef={ref} />
18-
)
19-
2015
export default function UsingAPICalls() {
2116

22-
const pivotRef: React.RefObject<Pivot> = React.useRef<Pivot>(null);
17+
const pivotRef: React.RefObject<Pivot | null> = React.useRef<Pivot>(null);
2318

2419
const controllGridCharts = (isGrid: boolean) => {
2520
isGrid ? showGrid() : showChart();
@@ -78,7 +73,7 @@ export default function UsingAPICalls() {
7873
<ToggleSwitch id="modeToggle" triggerFunction={controllInteractiveness} labelChecked="Interactive" labelUnChecked="Read-only" />
7974
</div>
8075

81-
<ForwardRefPivot
76+
<PivotWrap
8277
ref={pivotRef}
8378
toolbar={true}
8479
beforetoolbarcreated={toolbar => {

‎nextjs-ts/src/app/with-amcharts/page.tsx

+2-7
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,14 @@ const PivotWrap = dynamic(() => import('@/UIElements/PivotWrapper'), {
1111
loading: () => <h1>Loading Flexmonster...</h1>
1212
});
1313

14-
// Forward ref because PivotWrap is imported dynamically and we need to pass a ref to it
15-
const ForwardRefPivot = React.forwardRef<Pivot, Flexmonster.Params>((props, ref?: React.ForwardedRef<Pivot>) =>
16-
<PivotWrap {...props} pivotRef={ref} />
17-
)
18-
1914
// amCharts imports
2015
import * as am5 from "@amcharts/amcharts5";
2116
import * as am5xy from "@amcharts/amcharts5/xy";
2217
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
2318

2419
export default function WithAmcharts() {
2520

26-
const pivotRef: React.RefObject<Pivot> = React.useRef<Pivot>(null);
21+
const pivotRef: React.RefObject<Pivot | null> = React.useRef<Pivot>(null);
2722
let root!: am5.Root;
2823

2924
const reportComplete = () => {
@@ -127,7 +122,7 @@ export default function WithAmcharts() {
127122
</p>
128123
</div>
129124

130-
<ForwardRefPivot
125+
<PivotWrap
131126
ref={pivotRef}
132127
toolbar={true}
133128
beforetoolbarcreated={toolbar => {

‎nextjs-ts/src/app/with-amcharts4/page.tsx

+2-8
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,14 @@ const PivotWrap = dynamic(() => import('@/UIElements/PivotWrapper'), {
1111
loading: () => <h1>Loading Flexmonster...</h1>
1212
});
1313

14-
// Forward ref because PivotWrap is imported dynamically and we need to pass a ref to it
15-
const ForwardRefPivot = React.forwardRef<Pivot, Flexmonster.Params>((props, ref?: React.ForwardedRef<Pivot>) =>
16-
<PivotWrap {...props} pivotRef={ref} />
17-
)
18-
1914
// amCharts imports
2015
import * as am4core from '@amcharts/amcharts4/core';
2116
import * as am4charts from '@amcharts/amcharts4/charts';
2217
import am4themes_animated from '@amcharts/amcharts4/themes/animated';
2318

24-
2519
export default function WithAmcharts4() {
2620

27-
const pivotRef: React.RefObject<Pivot> = React.useRef<Pivot>(null);
21+
const pivotRef: React.RefObject<Pivot | null> = React.useRef<Pivot>(null);
2822
let chart!: am4charts.PieChart;
2923

3024

@@ -91,7 +85,7 @@ export default function WithAmcharts4() {
9185
</p>
9286
</div>
9387

94-
<ForwardRefPivot
88+
<PivotWrap
9589
ref={pivotRef}
9690
toolbar={true}
9791
beforetoolbarcreated={toolbar => {

‎nextjs-ts/src/app/with-highcharts/page.tsx

+2-6
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,11 @@ const PivotWrap = dynamic(() => import('@/UIElements/PivotWrapper'), {
1111
loading: () => <h1>Loading Flexmonster...</h1>
1212
});
1313

14-
// Forward ref because PivotWrap is imported dynamically and we need to pass a ref to it
15-
const ForwardRefPivot = React.forwardRef<Pivot, Flexmonster.Params>((props, ref?: React.ForwardedRef<Pivot>) =>
16-
<PivotWrap {...props} pivotRef={ref} />
17-
)
1814
import * as Highcharts from 'highcharts';
1915

2016
export default function WithHighcharts() {
2117

22-
const pivotRef: React.RefObject<Pivot> = React.useRef<Pivot>(null);
18+
const pivotRef: React.RefObject<Pivot | null> = React.useRef<Pivot>(null);
2319

2420
const reportComplete = () => {
2521
pivotRef.current!.flexmonster.off("reportComplete", reportComplete);
@@ -52,7 +48,7 @@ export default function WithHighcharts() {
5248
</p>
5349
</div>
5450

55-
<ForwardRefPivot
51+
<PivotWrap
5652
ref={pivotRef}
5753
toolbar={true}
5854
beforetoolbarcreated={toolbar => {

‎typescript/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,14 @@
1414
"@amcharts/amcharts4": "^4.10.36",
1515
"@amcharts/amcharts5": "^5.4.1",
1616
"highcharts": "^11.1.0",
17-
"react": "^18.2.0",
18-
"react-dom": "^18.2.0",
17+
"react": "^19.0.0",
18+
"react-dom": "^19.0.0",
1919
"react-flexmonster": "latest",
2020
"react-router-dom": "^6.14.2"
2121
},
2222
"devDependencies": {
23-
"@types/react": "^18.2.15",
24-
"@types/react-dom": "^18.2.7",
23+
"@types/react": "^19.0.0",
24+
"@types/react-dom": "^19.0.0",
2525
"@typescript-eslint/eslint-plugin": "^6.0.0",
2626
"@typescript-eslint/parser": "^6.0.0",
2727
"@vitejs/plugin-react": "^4.0.3",

0 commit comments

Comments
 (0)