Merge pull request #74 from gisce/tag-widget

Add Tag widget

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/ooui",
-  "version": "0.17.12",
+  "version": "0.17.13",
   "main": "./dist/ooui.umd.js",
   "module": "./dist/ooui.es.js",
   "types": "./dist/index.d.ts",

src/Tag.ts

@@ -0,0 +1,12 @@
+import Selection from "./Selection";
+
+/**
+ * A Tag widget
+ */
+class Tag extends Selection {
+  get colors(): any | "auto" {
+    return this._parsedWidgetProps.colors || {};
+  }
+}
+
+export default Tag;

src/WidgetFactory.ts

@@ -27,6 +27,7 @@ import FiberGrid from "./FiberGrid";
 import Timeline from "./Timeline";
 import Indicator from "./Indicator";
 import Tags from "./Tags";
+import Tag from "./Tag";
 import Radio from "./Radio";
 import MultiCheckbox from "./MultiCheckbox";
 import Switch from "./Switch";
@@ -132,6 +133,9 @@ class WidgetFactory {
       case "tags":
         this._widgetClass = Tags;
         break;
+      case "tag":
+        this._widgetClass = Tag;
+        break;
       case "radio":
         this._widgetClass = Radio;
         break;

src/index.ts

@@ -36,6 +36,7 @@ import Indicator from "./Indicator";
 import Dashboard from "./Dashboard";
 import DashboardItem from "./DashboardItem";
 import Tags from "./Tags";
+import Tag from "./Tag";
 import MultiCheckbox from "./MultiCheckbox";
 import Radio from "./Radio";
 import Switch from "./Switch";
@@ -109,6 +110,7 @@ export {
   graphProcessor,
   graphFieldUtils,
   Tags,
+  Tag,
   MultiCheckbox,
   Radio,
   Switch,

src/spec/Tag.spec.ts

@@ -0,0 +1,46 @@
+import WidgetFactory from "../WidgetFactory";
+
+describe("A Tag widget", () => {
+  it("should have an id corresponding to field name", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "status",
+    };
+
+    const widget = widgetFactory.createWidget("tag", props);
+
+    expect(widget.id).toBe("status");
+  });
+
+  describe("colors property", () => {
+    it("should have default colors to empty object", () => {
+      const widgetFactory = new WidgetFactory();
+      const props = {
+        name: "status",
+      };
+      const widget = widgetFactory.createWidget("tag", props);
+
+      expect(widget.colors).toStrictEqual({});
+    });
+    it("should parse colors property", () => {
+      const widgetFactory = new WidgetFactory();
+      const props = {
+        name: "status",
+        widget_props: '{"colors": {"draft": "blue", "open": "red"}}',
+      };
+      const widget = widgetFactory.createWidget("tag", props);
+
+      expect(widget.colors).toStrictEqual({draft: 'blue', open: 'red'});
+    });
+    it("should parse colors property and can be an string 'auto'", () => {
+      const widgetFactory = new WidgetFactory();
+      const props = {
+        name: "status",
+        widget_props: '{"colors": "auto"}',
+      };
+      const widget = widgetFactory.createWidget("tag", props);
+
+      expect(widget.colors).toStrictEqual("auto");
+    });
+  });
+});