let WidgetFrame merge css classes

wellenvogel · Sep 14, 2024 · 0447eb5 · 0447eb5
1 parent e35abab
commit 0447eb5
Show file tree

Hide file tree

Showing 19 changed files with 32 additions and 51 deletions.
diff --git a/viewer/components/ActiveRouteWidget.jsx b/viewer/components/ActiveRouteWidget.jsx
@@ -10,10 +10,10 @@ import {WidgetFrame, WidgetProps} from "./WidgetBase";
 
 const ActiveRouteWidget =(props)=>{
         if (!props.routeName && ! props.isEditing) return null;
-        let classes = "activeRouteWidget " + props.className || "";
+        let classes = "activeRouteWidget";
         if (props.isApproaching) classes += " approach ";
         return (
-            <WidgetFrame {...props} className={classes} caption="RTE" unit={undefined}>
+            <WidgetFrame {...props} addClass={classes} caption="RTE" unit={undefined}>
                 <div className="widgetData">
                     <div className="routeName">{props.routeName}</div>
                     <div>

diff --git a/viewer/components/AisTargetWidget.jsx b/viewer/components/AisTargetWidget.jsx
@@ -16,7 +16,6 @@ const AisTargetWidget = (props) => {
         props.onClick({...props, mmsi: props.current ? props.current.mmsi : undefined});
     }
     let current = props.current || {};
-    let classes = "aisTargetWidget " + props.className || "";
     let small = (props.mode === "horizontal");
     let aisProperties = {};
     let color = undefined;
@@ -30,7 +29,7 @@ const AisTargetWidget = (props) => {
     if (current.mmsi !== undefined || props.mode === "gps" || props.isEditing) {
         const style = {...props.style, backgroundColor: color};
         return (
-            <WidgetFrame {...props} className={classes} style={style}
+            <WidgetFrame {...props} addClass="aisTargetWidget" style={style}
                  onClick={click} unit={undefined} caption='AIS'
             >
                 <div className="aisPart">

diff --git a/viewer/components/AlarmWidget.jsx b/viewer/components/AlarmWidget.jsx
@@ -45,7 +45,7 @@ const AlarmWidget = (props) => {
     return (
         <WidgetFrame
             {...props}
-            className={(props.className || "") + " alarmWidget"}
+            addClass="alarmWidget"
             caption="Alarm"
             unit={undefined}
             onClick={onClick}

diff --git a/viewer/components/CanvasGauges.jsx b/viewer/components/CanvasGauges.jsx
@@ -134,14 +134,13 @@ const Gauge =(rprops)=>{
         }
     }
     let defaultColors=props.nightMode?nightColors:normalColors;
-    let classes="widget canvasGauge";
-    if (props.className) classes+=" "+props.className;
+    let classes="canvasGauge";
     if (props.typeClass) classes+=" "+props.typeClass;
     let style=props.style||{};
     let textColor=props.colorText?props.colorText:defaultColors.text;
     let textStyle={color:textColor};
     return (
-        <WidgetFrame {...props} className={classes} style={style}>
+        <WidgetFrame {...props} addClass={classes} style={style}>
             <div className="canvasFrame" ref={frame}>
                 {props.drawValue?
                 <div className="gaugeValue" ref={value} style={textStyle}>{nvalue}</div>:null}

diff --git a/viewer/components/CenterDisplayWidget.jsx b/viewer/components/CenterDisplayWidget.jsx
@@ -13,15 +13,14 @@ import {WidgetFrame, WidgetHead} from "./WidgetBase";
 
 
 const CenterDisplayWidget = (props) => {
-    let classes = "centerDisplayWidget " + props.className || "";
     let small = (props.mode == "horizontal");
     let measurePosition = props.measurePosition;
     let measureValues;
     if (measurePosition) {
         measureValues = NavCompute.computeDistance(measurePosition, props.centerPosition, props.measureRhumbLine);
     }
     return (
-        <WidgetFrame {...props} className={classes} caption="Center" unit={undefined}>
+        <WidgetFrame {...props} addClass="centerDisplayWidget" caption="Center" unit={undefined}>
             {!small && <div className="widgetData">{Formatter.formatLonLats(props.centerPosition)}</div>}
             {(measurePosition !== undefined) &&
                 <div className="widgetData">

diff --git a/viewer/components/DateTimeWidget.jsx b/viewer/components/DateTimeWidget.jsx
@@ -9,7 +9,6 @@ import Formatter from "../util/formatter.js";
 import {WidgetFrame, WidgetProps} from "./WidgetBase";
 
 const DateTimeWidget = (props) => {
-    let classes = "dateTimeWidget " + props.className || "";
     let time = "----";
     if (props.time) {
         time = Formatter.formatTime(props.time);
@@ -19,7 +18,7 @@ const DateTimeWidget = (props) => {
         date = Formatter.formatDate(props.time);
     }
     return (
-        <WidgetFrame {...props} className={classes} caption="Date" unit={undefined}>
+        <WidgetFrame {...props} addClass="dateTimeWidget" caption="Date" unit={undefined}>
                 <div className="widgetData date">{date}</div>
                 <div className="widgetData time">{time}</div>
         </WidgetFrame>

diff --git a/viewer/components/DirectWidget.jsx b/viewer/components/DirectWidget.jsx
@@ -19,7 +19,7 @@ const DirectWidget=(wprops)=>{
         else val=vdef+"";
     }
     return (
-        <WidgetFrame {...props}>
+        <WidgetFrame {...props} addClass="DirectWidget" >
             <div className='widgetData'>
                 <Value value={val}/>
             </div>

diff --git a/viewer/components/EditRouteWidget.jsx b/viewer/components/EditRouteWidget.jsx
@@ -15,11 +15,11 @@ const editor=new RouteEdit(RouteEdit.MODES.EDIT);
 
 const EditRouteWidget = (props) => {
     let [route, notUsed, isActive] = StateHelper.getRouteIndexFlag(props);
-    let classes = "editRouteWidget " + props.className || "";
+    let classes = "editRouteWidget";
     if (isActive) classes += " activeRoute ";
     if (!route) {
         return (
-            <WidgetFrame {...props} className={classes} caption="RTE" unit={undefined}>
+            <WidgetFrame {...props} addClass={classes} caption="RTE" unit={undefined}>
                 <div className="routeName">No Route</div>
             </WidgetFrame>
         )
@@ -30,7 +30,7 @@ const EditRouteWidget = (props) => {
     let remain = isActive ? props.remain : undefined;
     let eta = isActive ? props.eta : undefined;
     return (
-        <WidgetFrame {...props} className={classes} caption="RTE" unit={undefined}>
+        <WidgetFrame {...props} addClass={classes} caption="RTE" unit={undefined}>
             <div className="routeName widgetData">{rname}</div>
             <div className="widgetData">
                 <span className="label">PTS:</span>

diff --git a/viewer/components/EtaWidget.jsx b/viewer/components/EtaWidget.jsx
@@ -11,9 +11,8 @@ import {WidgetFrame, WidgetProps} from "./WidgetBase";
 
 const EtaWidget = (props) => {
     let eta = props.eta ? Formatter.formatTime(props.eta) : '--:--:--';
-    let classes = "etaWidget " + props.className || "";
     return (
-        <WidgetFrame {...props} className={classes}>
+        <WidgetFrame {...props} addClass="etaWidget">
             <div className="widgetData markerEta">{eta}</div>
             <div className="widgetData markerName">{props.wpname}</div>
         </WidgetFrame>

diff --git a/viewer/components/ExternalWidget.jsx b/viewer/components/ExternalWidget.jsx
@@ -83,9 +83,7 @@ export const ExternalWidget =(props)=>{
         }
     })
 
-        let convertedProps=getProps()
-        let classes="externalWidget";
-        if (convertedProps.className) classes+=" "+convertedProps.className;
+        let convertedProps=getProps();
         let innerHtml=null;
         if (props.renderHtml){
             try {
@@ -101,7 +99,7 @@ export const ExternalWidget =(props)=>{
         let userHtml=(innerHtml!=null)?ReactHtmlParser(innerHtml,
             {transform:(node,index)=>{transform(userData.current,node,index);}}):null;
         return (
-        <WidgetFrame {...convertedProps} className={classes} onClick={props.onClick} >
+        <WidgetFrame {...convertedProps} addClass="externalWidget" onClick={props.onClick} >
             {props.renderCanvas?<canvas className='widgetData' ref={canvasRef}></canvas>:null}
                 {userHtml}
         </WidgetFrame>

diff --git a/viewer/components/RoutePointsWidget.jsx b/viewer/components/RoutePointsWidget.jsx
@@ -35,11 +35,11 @@ const RoutePointsWidget = (props) => {
     });
     let [route, index, isActive] = StateHelper.getRouteIndexFlag(props);
     if ((!route || !route.points || route.points.length < 1) && !props.isEditing) return null;
-    let classes = "routePointsWidget " + props.className || "";
+    let classes = "routePointsWidget";
     if (isActive) classes += " activeRoute ";
-    if (props.mode == 'horizontal' && !props.isEditing) return null; //we do not display...
+    if (props.mode === 'horizontal' && !props.isEditing) return null; //we do not display...
     return (
-        <WidgetFrame {...props} className={classes} caption={undefined} unit={undefined}>
+        <WidgetFrame {...props} addClass={classes} caption={undefined} unit={undefined}>
             <ItemList
                 itemList={route ? route.getRoutePoints(index, props.useRhumbLine) : []}
                 itemCreator={() => {

diff --git a/viewer/components/SKWidgets.jsx b/viewer/components/SKWidgets.jsx
@@ -31,13 +31,12 @@ export const SKRollWidget=(props)=>{
                 degreeArrow = degreeArrow + "\xA0\u21D2";
             }
         }
-        let classes="SKRollWidget "+props.className||"";
         let wdClasses="widgetData";
         if (Math.abs(rad2deg(props.value,props.inDegree)) >= props.criticalValue){
             wdClasses+=" critical";
         }
         return (
-            <WidgetFrame {...props} className={classes} >
+            <WidgetFrame {...props} addClass="SKRollWidget" >
                 <div className={wdClasses}>{degreeArrow}</div>
             </WidgetFrame>
         );
@@ -75,13 +74,12 @@ export const SKPitchWidget = (props) => {
             degreeArrow += "\xA0\u21D1";
         }
     }
-    let classes = "SKPitchWidget " + props.className || "";
     let wdClasses = "widgetData";
     if (Math.abs(rad2deg(props.value, props.inDegree)) >= props.criticalValue) {
         wdClasses += " critical";
     }
     return (
-        <WidgetFrame {...props} className={classes}>
+        <WidgetFrame {...props} addClass="SKPitchWidget">
             <div className={wdClasses}>{degreeArrow}</div>
         </WidgetFrame>
     );

diff --git a/viewer/components/TimeStatusWidget.jsx b/viewer/components/TimeStatusWidget.jsx
@@ -10,7 +10,6 @@ import globalStore from '../util/globalstore.jsx';
 import {WidgetFrame, WidgetProps} from "./WidgetBase";
 
 const TimeStatusWidget = (props=> {
-    let classes="timeStatusWidget "+props.className||"";
     let imgSrc=globalStore.getData(props.gpsValid?
         keys.properties.statusOkImage:
         keys.properties.statusErrorImage);
@@ -19,7 +18,7 @@ const TimeStatusWidget = (props=> {
         time=Formatter.formatTime(props.time);
     }
     return (
-        <WidgetFrame {...props} className={classes} unit={undefined}>
+        <WidgetFrame {...props} addClass="timeStatusWidget" unit={undefined}>
                 <img className="status" src={imgSrc}/>
                 <div className="widgetData">{time}</div>
         </WidgetFrame>

diff --git a/viewer/components/UndefinedWidget.jsx b/viewer/components/UndefinedWidget.jsx
@@ -6,9 +6,8 @@ import React from "react";
 import {WidgetFrame, WidgetProps} from "./WidgetBase";
 
 const UndefinedWidget=(props)=>{
-    let classes="undefinedWidget";
     return (
-        <WidgetFrame {...props} className={classes} caption="Undefined Widget">
+        <WidgetFrame {...props} addClass="undefinedWidget" caption="Undefined Widget">
             <div className='widgetData'>
                 {props.name}
             </div>

diff --git a/viewer/components/WidgetBase.jsx b/viewer/components/WidgetBase.jsx
@@ -64,6 +64,7 @@ export const WidgetFrame=(props)=> {
     let classes = "widget ";
     if (props.isAverage) classes += " average";
     if (props.className) classes += " " + props.className;
+    if (props.addClass) classes += " " + props.addClass;
     const rsClass=(props.resize === false)?"noresize":"resize";
     return <div className={classes} onClick={props.onClick} {...sortableProps} style={props.style}>
         <WidgetHead {...props}/>
@@ -75,5 +76,7 @@ export const WidgetFrame=(props)=> {
 WidgetFrame.propTypes={
     ...WidgetProps,
     ...SortableProps,
-    resize: PropTypes.bool
+    ...WidgetHead.propTypes,
+    resize: PropTypes.bool,
+    addClass: PropTypes.string
 };
diff --git a/viewer/components/WindGraphics.jsx b/viewer/components/WindGraphics.jsx
@@ -10,7 +10,7 @@ import navcompute from '../nav/navcompute.js';
 import {useKeyEventHandler} from '../util/GuiHelpers.js';
 import {getWindData} from "./WindWidget";
 import {useAvNavSortable} from "../hoc/Sortable";
-import {WidgetFrame} from "./WidgetBase";
+import {WidgetFrame, WidgetProps} from "./WidgetBase";
 
 const normalColors={
     green:  'rgba(5, 128, 30, 0.57)',
@@ -142,9 +142,6 @@ const WindGraphics = (props) => {
         canvas = item;
         setTimeout(drawWind, 0);
     }
-
-
-    let classes = "windGraphics " + props.classes || "" + " " + props.className || "";
     setTimeout(drawWind, 0);
     let current = getWindData(props);
     let windSpeed = "";
@@ -159,7 +156,7 @@ const WindGraphics = (props) => {
     } catch (e) {
     }
     return (
-        <WidgetFrame {...props} className={classes} unit={showKnots ? "kn" : "m/s"} caption="Wind" resize={false}>
+        <WidgetFrame {...props} addClass="windGraphics" unit={showKnots ? "kn" : "m/s"} caption="Wind" resize={false}>
             <canvas className='widgetData' ref={canvasRef}></canvas>
             <div className="windSpeed">{windSpeed}</div>
             <div className="windReference">{current.suffix}</div>
@@ -170,8 +167,7 @@ const WindGraphics = (props) => {
 }
 
 WindGraphics.propTypes={
-    onClick: PropTypes.func,
-    classes: PropTypes.string,
+    ...WidgetProps,
     windSpeed: PropTypes.number,
     windAngle: PropTypes.number,
     windAngleTrue:  PropTypes.number,
@@ -180,9 +176,6 @@ WindGraphics.propTypes={
     scaleAngle: PropTypes.number,
     nightMode: PropTypes.bool,
     kind: PropTypes.string, //true,apparent,auto,
-    className: PropTypes.string,
-    dragId: PropTypes.string,
-    style: PropTypes.object,
     show360: PropTypes.bool
 };
 WindGraphics.storeKeys={

diff --git a/viewer/components/WindWidget.jsx b/viewer/components/WindWidget.jsx
@@ -72,7 +72,6 @@ const WindWidget = (props) => {
             angle: 'TWA'
         }
     }
-    let classes = "windWidget " + props.className || "";
     let windSpeedStr = '';
     try {
         windSpeedStr = parseFloat(wind.windSpeed);
@@ -92,7 +91,7 @@ const WindWidget = (props) => {
         if (wind.windAngle > 180) wind.windAngle -= 360;
     }
     return (
-        <WidgetFrame {...props} className={classes} caption={undefined} unit={undefined}>
+        <WidgetFrame {...props} addClass="windWidget" caption={undefined} unit={undefined}>
             {(props.mode === 'horizontal') ?
                 <React.Fragment>
                     <WidgetHead caption={'W' + wind.suffix}/>

diff --git a/viewer/components/XteWidget.jsx b/viewer/components/XteWidget.jsx
@@ -82,10 +82,9 @@ const XteWidget = (props) => {
         context.fill();
         context.closePath();
     }
-    let classes = "xteWidget " + props.className || "";
     setTimeout(drawXte, 0);
     return (
-        <WidgetFrame {...props} className={classes} caption="XTE" unit="nm">
+        <WidgetFrame {...props} addClass="xteWidget" caption="XTE" unit="nm">
             <canvas className='widgetData' ref={canvasRef}></canvas>
         </WidgetFrame>
 

diff --git a/viewer/components/ZoomWidget.jsx b/viewer/components/ZoomWidget.jsx
@@ -9,8 +9,6 @@ import Formatter from '../util/formatter.js';
 import {WidgetFrame, WidgetProps} from "./WidgetBase";
 
 const ZoomWidget =(props)=>{
-        let classes="zoomWidget ";
-        if (props.className) classes+=" "+props.className;
         let val=props.default||'--';
         if (props.zoom !== undefined) {
             val=Formatter.formatDecimalOpt(props.zoom, 2, 1);
@@ -20,7 +18,7 @@ const ZoomWidget =(props)=>{
             rzoom=Formatter.formatDecimalOpt(props.requiredZoom,2,1);
         }
         return (
-        <WidgetFrame {...props} className={classes} unit={undefined}>
+        <WidgetFrame {...props} addClass="zoomWidget" unit={undefined}>
             <div className='widgetData'>{val}
                 {
                     (rzoom !== undefined)?<div className="rzoom">({rzoom})</div>:''