Merge pull request #84 from gisce/imp-buttonGroup

Better ButtonGroup with invisible

package.json

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

src/ButtonGroup.ts

@@ -9,15 +9,17 @@ class ButtonGroup extends ContainerWidget {
   }
 
   get defaultButton(): Button | undefined {
-    return this.buttons.find(button => button.id === this.defaultName);
+    const btn = this.buttons.find(button => button.id === this.defaultName);
+    return btn ? btn : this.buttons[0];
   }
 
   get secondaryButtons(): Button[] {
-    return this.buttons.filter(button => button.id !== this.defaultName);
+    const btns = this.buttons.filter(button => button.id !== this.defaultButton?.id);
+    return btns;
   }
 
   get buttons(): Button[] {
-    return this._container.rows[0] as Button[];
+    return this._container.rows[0].filter((b) => !b.invisible) as Button[];
   }
 
   constructor(props: any) {

src/spec/ButtonGroup.spec.ts

@@ -40,4 +40,32 @@ describe("A ButtonsGroup widget", () => {
     });
 
   });
+  describe("Working with invisible buttons", () => {
+    it("Only should return visible buttons", () => {
+      const btn1 = new Button({name: "btn1", type: "object", icon: "gtk-execute", string: "Button 1"});
+      const btn2 = new Button({name: "btn2", type: "object", icon: "gtk-execute", string: "Button 2", invisible: true});
+      const btn3 = new Button({name: "btn3", type: "object", icon: "gtk-execute", string: "Button 3"});
+      const buttonGroup = new ButtonGroup({name: "btnGroup", default: "btn1"});
+      buttonGroup.container.rows[0].push(...[btn1, btn2, btn3]);
+      expect(buttonGroup.buttons).toHaveLength(2);
+    });
+    it("Only should return visible secondary buttons", () => {
+      const btn1 = new Button({name: "btn1", type: "object", icon: "gtk-execute", string: "Button 1"});
+      const btn2 = new Button({name: "btn2", type: "object", icon: "gtk-execute", string: "Button 2", invisible: true});
+      const btn3 = new Button({name: "btn3", type: "object", icon: "gtk-execute", string: "Button 3"});
+      const buttonGroup = new ButtonGroup({name: "btnGroup", default: "btn1"});
+      buttonGroup.container.rows[0].push(...[btn1, btn2, btn3]);
+      expect(buttonGroup.secondaryButtons).toHaveLength(1);
+    });
+    it("Should return the first secondary button if default button is invisible", () => {
+      const btn1 = new Button({name: "btn1", type: "object", icon: "gtk-execute", string: "Button 1", invisible: true});
+      const btn2 = new Button({name: "btn2", type: "object", icon: "gtk-execute", string: "Button 2"});
+      const btn3 = new Button({name: "btn3", type: "object", icon: "gtk-execute", string: "Button 3"});
+      const buttonGroup = new ButtonGroup({name: "btnGroup", default: "btn1"});
+      buttonGroup.container.rows[0].push(...[btn1, btn2, btn3]);
+      expect(buttonGroup.buttons).toHaveLength(2);
+      expect(buttonGroup.defaultButton).toBe(btn2);
+      expect(buttonGroup.secondaryButtons).toHaveLength(1);
+    })
+  })
 });