Merge pull request #143 from gisce/feature/spinner-component

Spinner component

src/Spinner.ts

@@ -0,0 +1,23 @@
+import ContainerWidget from "./ContainerWidget";
+
+class Spinner extends ContainerWidget {
+  _loading = false;
+  get loading(): boolean {
+    return this._loading;
+  }
+
+  set loading(value: boolean) {
+    this._loading = value;
+  }
+
+  constructor(props?: any) {
+    super(props);
+    if (props) {
+      if (props.loading) {
+        this._loading = props.loading;
+      }
+    }
+  }
+}
+
+export default Spinner;

src/WidgetFactory.ts

@@ -40,6 +40,7 @@ import Alert from "./Alert";
 import Comments from "./Comments";
 import JSONField from "./JSONField";
 import Email from "./Email";
+import Spinner from "./Spinner";
 
 class WidgetFactory {
   /**
@@ -180,6 +181,9 @@ class WidgetFactory {
       case "arrow_steps":
         this._widgetClass = JSONField;
         break;
+      case "spinner":
+        this._widgetClass = Spinner;
+        break;
       default:
         break;
     }

src/index.ts

@@ -52,6 +52,7 @@ import Alert from "./Alert";
 import JSONField from "./JSONField";
 import Comments from "./Comments";
 import Email from "./Email";
+import Spinner from "./Spinner";
 
 import {
   Graph,
@@ -140,4 +141,5 @@ export {
   Comments,
   JSONField,
   Email,
+  Spinner,
 };

src/spec/Spinner.spec.ts

@@ -0,0 +1,35 @@
+import WidgetFactory from "../WidgetFactory";
+import Spinner from "../Spinner";
+import { it, expect, describe } from "vitest";
+
+describe("A Spinner", () => {
+  it("should have an id corresponding to field name", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "spinner",
+    };
+
+    const widget = widgetFactory.createWidget("spinner", props);
+    expect(widget).toBeInstanceOf(Spinner);
+  });
+
+  it("should properly set label", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "spinner",
+      string: "spinner caption",
+    };
+    const widget = widgetFactory.createWidget("spinner", props);
+
+    expect(widget.label).toBe("spinner caption");
+  });
+
+  it("should have loading as false by default", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "spinner",
+    };
+    const widget = widgetFactory.createWidget("spinner", props);
+    expect(widget.loading).toBe(false);
+  });
+});