fix(widgets): convert widget style prop keys from camel to dash case

visgl · Jul 7, 2024 · 70b961f · 70b961f
1 parent 7fa86b4
commit 70b961f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/modules/widgets/src/compass-widget.tsx b/modules/widgets/src/compass-widget.tsx
@@ -62,7 +62,12 @@ export class CompassWidget implements Widget<CompassWidgetProps> {
     element.classList.add('deck-widget', 'deck-widget-compass');
     if (className) element.classList.add(className);
     if (style) {
-      Object.entries(style).map(([key, value]) => element.style.setProperty(key, value as string));
+      Object.entries(style).map(([key, value]) =>
+        element.style.setProperty(
+          key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(),
+          value as string
+        )
+      );
     }
     this.deck = deck;
     this.element = element;

diff --git a/modules/widgets/src/fullscreen-widget.tsx b/modules/widgets/src/fullscreen-widget.tsx
@@ -56,7 +56,9 @@ export class FullscreenWidget implements Widget<FullscreenWidgetProps> {
     el.classList.add('deck-widget', 'deck-widget-fullscreen');
     if (className) el.classList.add(className);
     if (style) {
-      Object.entries(style).map(([key, value]) => el.style.setProperty(key, value as string));
+      Object.entries(style).map(([key, value]) =>
+        el.style.setProperty(key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(), value as string)
+      );
     }
     this.deck = deck;
     this.element = el;
@@ -99,11 +101,16 @@ export class FullscreenWidget implements Widget<FullscreenWidgetProps> {
 
       if (!deepEqual(oldProps.style, props.style, 1)) {
         if (oldProps.style) {
-          Object.entries(oldProps.style).map(([key]) => el.style.removeProperty(key));
+          Object.entries(oldProps.style).map(([key]) =>
+            el.style.removeProperty(key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase())
+          );
         }
         if (props.style) {
           Object.entries(props.style).map(([key, value]) =>
-            el.style.setProperty(key, value as string)
+            el.style.setProperty(
+              key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(),
+              value as string
+            )
           );
         }
       }

diff --git a/modules/widgets/src/zoom-widget.tsx b/modules/widgets/src/zoom-widget.tsx
@@ -65,7 +65,12 @@ export class ZoomWidget implements Widget<ZoomWidgetProps> {
     element.classList.add('deck-widget', 'deck-widget-zoom');
     if (className) element.classList.add(className);
     if (style) {
-      Object.entries(style).map(([key, value]) => element.style.setProperty(key, value as string));
+      Object.entries(style).map(([key, value]) =>
+        element.style.setProperty(
+          key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(),
+          value as string
+        )
+      );
     }
     const ui = (
       <ButtonGroup orientation={this.orientation}>