Skip to content

Commit 3d182e9

Browse files
mhandsteinermhandsteiner
committed
Version Updates and corresponding fixes
Tabset Style fixed Style Designer fixed (SpeedDial and Button)
1 parent 40a40e5 commit 3d182e9

11 files changed

Lines changed: 14692 additions & 10539 deletions

File tree

‎package-lock.json‎

Lines changed: 14593 additions & 10492 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@
1414
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
1515
"@babel/preset-react": "^7.10.4",
1616
"@babel/preset-typescript": "^7.10.4",
17-
"@fortawesome/fontawesome-free": "^5.15.4",
17+
"@fortawesome/fontawesome-free": "^6.7.2",
1818
"@react-leaflet/core": "^2.1.0",
19-
"@sibvisions/reactui-designer": "^1.2.4",
19+
"@sibvisions/reactui-designer": "^1.4.0",
2020
"@types/babel__generator": "^7.6.4",
2121
"@types/googlemaps": "^3.40.3",
22-
"@types/jest": "^24.9.1",
23-
"@types/node": "^12.12.54",
22+
"@types/jest": "^29.5.14",
23+
"@types/node": "^22.14.1",
2424
"@types/radium": "^0.24.3",
2525
"@types/react": "^18.2.48",
2626
"@types/react-helmet": "^6.1.0",
@@ -32,50 +32,50 @@
3232
"@types/underscore": "^1.10.24",
3333
"@types/xml2js": "^0.4.8",
3434
"buffer": "^6.0.3",
35-
"chart.js": "3.3.2",
35+
"chart.js": "3.5.1",
3636
"chartjs-adapter-date-fns": "^3.0.0",
3737
"circular-dependency-plugin": "^5.2.2",
3838
"classnames": "^2.2.6",
3939
"clean-webpack-plugin": "^4.0.0",
40-
"copy-webpack-plugin": "^11.0.0",
41-
"css-loader": "^6.7.1",
42-
"date-fns": "2.22.1",
43-
"date-fns-tz": "^1.3.7",
40+
"copy-webpack-plugin": "^13.0.0",
41+
"css-loader": "^7.1.2",
42+
"date-fns": "^4.1.0",
43+
"date-fns-tz": "^3.2.0",
4444
"file-loader": "^6.1.1",
45-
"history": "5.0.0",
46-
"js-big-decimal": "^1.4.1",
47-
"jsdoc": "^3.6.6",
45+
"history": "5.0.1",
46+
"js-big-decimal": "^2.2.0",
47+
"jsdoc": "^4.0.4",
4848
"leaflet": "^1.9.4",
4949
"mini-css-extract-plugin": "^2.6.0",
5050
"postcss": "^8.4.31",
5151
"postcss-flexbugs-fixes": "^5.0.2",
52-
"postcss-normalize": "^10.0.1",
53-
"postcss-preset-env": "^7.7.1",
54-
"primeflex": "2.0.0-rc.1",
55-
"primeicons": "^6.0.1",
56-
"primereact": "10.8.4",
57-
"query-string": "^6.13.1",
52+
"postcss-normalize": "^13.0.1",
53+
"postcss-preset-env": "^10.1.6",
54+
"primeflex": "^4.0.0",
55+
"primeicons": "^7.0.0",
56+
"primereact": "10.9.2",
57+
"query-string": "^9.1.1",
5858
"quill": "^1.3.7",
59-
"react-error-boundary": "^3.1.4",
59+
"react-error-boundary": "^5.0.0",
6060
"react-helmet": "^6.1.0",
6161
"react-leaflet": "^4.2.1",
6262
"react-rnd": "^10.3.5",
6363
"react-router-dom": "^5.2.0",
6464
"react-signature-canvas": "^1.0.5",
6565
"react-topbar-progress-indicator": "^4.1.0",
6666
"react-transition-group": "^4.4.1",
67-
"rxjs": "^6.6.2",
67+
"rxjs": "^7.8.2",
6868
"sass": "^1.57.1",
69-
"sass-loader": "^12.6.0",
70-
"stream": "^0.0.2",
71-
"style-loader": "^2.0.0",
69+
"sass-loader": "^16.0.5",
70+
"stream": "^0.0.3",
71+
"style-loader": "^4.0.0",
7272
"timers": "^0.1.1",
7373
"tinycolor2": "^1.4.2",
7474
"ts-loader": "^9.3.0",
7575
"typescript": "^4.7.3",
7676
"ui-gauges": "git+https://github.com/sibvisions/gauges.git",
7777
"underscore": "^1.13.1",
78-
"xml2js": "^0.5.0"
78+
"xml2js": "^0.6.2"
7979
},
8080
"overrides": {
8181
"autoprefixer": "10.4.5"
@@ -119,16 +119,16 @@
119119
},
120120
"devDependencies": {
121121
"@types/leaflet": "^1.9.8",
122-
"@types/quill": "^1.3.10",
122+
"@types/quill": "^2.0.14",
123123
"@types/react-dom": "^18.0.0",
124124
"@types/resize-observer-browser": "^0.1.4",
125125
"react": "^18.2.0",
126126
"react-dom": "^18.2.0",
127127
"react-scripts": "^5.0.1",
128-
"rimraf": "^3.0.2",
128+
"rimraf": "^6.0.1",
129129
"rmdir": "^1.2.0",
130130
"run-script-os": "^1.1.6",
131131
"webpack": "^5.76.0",
132-
"webpack-cli": "^4.10.0"
132+
"webpack-cli": "^6.0.1"
133133
}
134134
}

‎src/AppWrapper.tsx‎

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,11 @@
1515

1616
import React, { FC, useContext, useEffect, useMemo, useRef, useState } from "react"
1717
import { useHistory } from "react-router-dom";
18+
import { Button } from 'primereact/button';
1819
import { SpeedDial } from "primereact/speeddial";
1920
import { Tooltip } from "primereact/tooltip";
2021
import { ReactUIDesigner } from "@sibvisions/reactui-designer";
22+
import { translation } from "./main/util/other-util/Translation";
2123
import { showTopBar } from "./main/components/topbar/TopBar";
2224
import { PopupContextProvider } from "./main/hooks/data-hooks/usePopupMenu";
2325
import COMPONENT_CLASSNAMES from "./main/components/COMPONENT_CLASSNAMES";
@@ -197,15 +199,16 @@ const AppWrapper: FC<IAppWrapper> = (props) => {
197199
const speeddialModel = [];
198200
if (context.appSettings.showDesigner) {
199201
speeddialModel.push({
200-
label: 'Style-Designer',
202+
label: translation.get("Style-Designer"),
201203
icon: 'fas fa-palette',
202204
command: () => setShowDesignerView(prevState => !prevState)
203205
});
204206
}
205207

206-
if (context.appSettings.showUIDesigner !== undefined) {
208+
if (context.appSettings.showUIDesigner !== undefined)
209+
{
207210
speeddialModel.push({
208-
label: 'UI-Designer',
211+
label: translation.get("UI-Designer"),
209212
icon: 'fas fa-hammer',
210213
command: () => (context.appSettings.showUIDesigner as Function)()
211214
})
@@ -219,6 +222,23 @@ const AppWrapper: FC<IAppWrapper> = (props) => {
219222
<>
220223
{props.children}
221224
{(speeddialModel.length && !showDesignerView && !context.designer?.isVisible) ?
225+
(speeddialModel.length === 1) ?
226+
<>
227+
<Tooltip target={"#style-designer-button"} position="left" />
228+
<Button id={"style-designer-button"}
229+
className='designer-topbar-buttons'
230+
icon='fas fa-palette'
231+
style={{
232+
position: "absolute",
233+
bottom: "30px",
234+
right: "30px",
235+
opacity: "0.7",
236+
// fontSize: "1.825rem"
237+
}}
238+
onClick={() => setShowDesignerView(prevState => !prevState)}
239+
data-pr-tooltip={translation.get("Style-Designer")} />
240+
</>
241+
:
222242
<>
223243
<Tooltip target=".p-speeddial-linear .p-speeddial-action" position="left" />
224244
<SpeedDial
@@ -227,13 +247,21 @@ const AppWrapper: FC<IAppWrapper> = (props) => {
227247
direction="up"
228248
style={{
229249
position: "absolute",
230-
top: speeddialModel.length === 1 ? "calc(100% - 165px)" : "calc(100% - 220px)",
231-
left: "calc(100% - 90px)",
250+
bottom: "30px",
251+
right: "30px",
232252
opacity: "0.8",
233253
fontSize: "1.825rem"
254+
}}
255+
pt={{ // Workaround for bug in prime react, without, 2 clicks are necessary
256+
actionIcon: {
257+
style: {
258+
pointerEvents: "none"
259+
}
260+
}
234261
}} />
235262
</>
236-
: undefined}
263+
: undefined
264+
}
237265
</>
238266

239267
return (

‎src/main/components/buttons/menubutton/UIMenuButton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ const UIMenuButton: FC<IMenuButton & IExtendableMenuButton> = (props) => {
6767

6868
/** Returns the default button element (left button) of a menubutton */
6969
const getDefaultButton = (): HTMLElement|undefined => {
70-
const defaultButton = buttonRef.current?.getElement().querySelector(".p-splitbutton-defaultbutton");
70+
const defaultButton = buttonRef.current?.getElement()?.querySelector(".p-splitbutton-defaultbutton");
7171
if (defaultButton) {
7272
return defaultButton as HTMLElement;
7373
}
@@ -76,7 +76,7 @@ const UIMenuButton: FC<IMenuButton & IExtendableMenuButton> = (props) => {
7676

7777
/** Returns the menu button element (right button with arrow) of a menubutton */
7878
const getMenuButton = (): HTMLElement|undefined => {
79-
const menuButton = buttonRef.current?.getElement().querySelector(".p-splitbutton-menubutton");
79+
const menuButton = buttonRef.current?.getElement()?.querySelector(".p-splitbutton-menubutton");
8080
if (menuButton) {
8181
return menuButton as HTMLElement;
8282
}

‎src/main/components/chart/UIChart.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -714,7 +714,7 @@ const UIChart: FC<IChart> = (props) => {
714714
onLoadCallback
715715
)
716716
}
717-
},[onLoadCallback, id, props.preferredSize, props.minimumSize, props.maximumSize]);
717+
},[onLoadCallback, id, props.preferredSize, props.minimumSize, props.maximumSize, props.className, props.forwardedRef.current]);
718718

719719
return (
720720
<span ref={props.forwardedRef} className={concatClassnames("rc-chart-wrapper", props.styleClassNames)} style={props.layoutStyle} tabIndex={getTabIndex(props.focusable, props.tabIndex)}>

‎src/main/components/editors/date/UIEditorDate.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@ const UIEditorDate: FC<IEditorDate & IExtendableDateEditor & IComponentConstants
232232
// If the editor is readonly, disable the button to open the datepicker
233233
useEffect(() => {
234234
if (calendar.current) {
235-
const btnElem = calendar.current.getElement().querySelector("button");
235+
const btnElem = calendar.current.getElement()?.querySelector("button");
236236
if (btnElem) {
237237
if (props.isReadOnly || hasError) {
238238
if (!btnElem.disabled) {
@@ -332,8 +332,8 @@ const UIEditorDate: FC<IEditorDate & IExtendableDateEditor & IComponentConstants
332332
}
333333

334334
// When "enter" or "tab" are pressed save the entry and close the editor, when escape is pressed don't save and close the editor
335-
useMultipleEventHandler(calendar.current && calendarInput.current && calendar.current.getElement().querySelector("button") ?
336-
[calendarInput.current, calendar.current.getElement().querySelector("button")!] : undefined, "keydown", (event: KeyboardEvent) => {
335+
useMultipleEventHandler(calendar.current && calendarInput.current && calendar.current.getElement()?.querySelector("button") ?
336+
[calendarInput.current, calendar.current.getElement()?.querySelector("button")!] : undefined, "keydown", (event: KeyboardEvent) => {
337337
if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Enter', 'Tab', 'Escape'].indexOf(event.key) === -1 && !startedEditing.current) {
338338
startedEditing.current = true;
339339
}
@@ -449,7 +449,7 @@ const UIEditorDate: FC<IEditorDate & IExtendableDateEditor & IComponentConstants
449449
}
450450

451451
// Check if the relatedTarget isn't in the dropdown and only then send focus lost. DateEditor also wants to send blur when clicking the overlay.
452-
if (!visible && !calendar.current?.getElement().contains(event.relatedTarget)) {
452+
if (!visible && !calendar.current?.getElement()?.contains(event.relatedTarget)) {
453453
if (props.eventFocusLost) {
454454
onFocusLost(props.name, props.context.server);
455455
}

‎src/main/components/editors/linked/UIEditorLinked.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -450,7 +450,7 @@ const UIEditorLinked: FC<IEditorLinked & IExtendableLinkedEditor & IComponentCon
450450
/** Returns the element of the dropdownbutton or null */
451451
const getDropDownButton = (): HTMLButtonElement|null => {
452452
if (linkedRef.current) {
453-
return linkedRef.current.getElement().querySelector("button");
453+
return linkedRef.current.getElement()?.querySelector("button");
454454
}
455455
return null;
456456
}
@@ -1065,7 +1065,7 @@ const UIEditorLinked: FC<IEditorLinked & IExtendableLinkedEditor & IComponentCon
10651065
const alignOverlay = useCallback((force:boolean = false) => {
10661066
if(linkedRef.current) {
10671067
const w = linkedRef.current.getOverlay()?.clientWidth;
1068-
if(force || w !== lastOverlayWidth.current) {
1068+
if(linkedRef.current.getOverlay() && (force || w !== lastOverlayWidth.current)) {
10691069
DomHandler.alignOverlay(
10701070
linkedRef.current.getOverlay(),
10711071
linkedRef.current.getInput() as any,

‎src/main/components/panels/tabsetpanel/TabsetPanelImpl.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ const TabsetPanelImpl: FC<ITabsetImpl & IComponentConstants> = (props) => {
186186
style={props.screen_modal_ || props.content_modal_ ? { height: (prefSize?.height as number), width: prefSize?.width } : { ...props.layoutStyle, ...props.compStyle }}>
187187
<TabView
188188
ref={panelRef}
189-
style={{"--nav-background": props.compStyle.background} as CSSProperties}
189+
//style={{"backgroundColor": props.compStyle.background} as CSSProperties}
190190
activeIndex={props.selectedIndex}
191191
onTabChange={event => props.onTabChange(event.index)}
192192
onBeforeTabClose={event => props.onTabClose(event.index)}

‎src/main/hooks/components-hooks/useHistoryBlockClose.tsx‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,38 @@ export function useVisibleWithHistoryBlock(
77
disabled: boolean = false,
88
): [ boolean, Dispatch<SetStateAction<boolean>> ] {
99
const [visible, setVisible] = useState<boolean>(initial);
10-
1110
const history = useHistory();
12-
useEffect(() => {
11+
12+
// Old code causes Warning: A history supports only one prompt at a time Error Component Stack
13+
/* useEffect(() => {
1314
return history.block(() => {
1415
if(visible && !disabled) {
1516
setVisible(false);
1617
onHideCallback?.();
1718
}
1819
return !visible;
1920
})
21+
*/
22+
23+
useEffect(() => {
24+
let unblock: () => void;
25+
if (visible)
26+
{
27+
unblock = history.block(() => {
28+
if(visible && !disabled) {
29+
setVisible(false);
30+
onHideCallback?.();
31+
}
32+
return !visible;
33+
})
34+
}
35+
36+
return () => {
37+
// This cleanup function runs when 'visible' changes or component unmounts
38+
if (unblock) {
39+
unblock();
40+
}
41+
}
2042
}, [history, visible, setVisible, onHideCallback, disabled])
2143

2244
return [visible, setVisible]

‎src/main/hooks/style-hooks/useComponentStyle.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,15 +48,15 @@ export function getColorProperties(color: string|undefined, isBackground: boolea
4848

4949
// Either set Background or Textcolor
5050
if (isBackground) {
51-
colorProperties.background = setColor;
51+
colorProperties.backgroundColor = setColor;
5252
}
5353
else {
5454
colorProperties.color = setColor;
5555
}
5656
}
5757
else {
5858
if (isBackground) {
59-
colorProperties.background = color;
59+
colorProperties.backgroundColor = color;
6060
}
6161
else {
6262
colorProperties.color = color;

0 commit comments

Comments
 (0)