Merge pull request #119 from gisce/feat-buttongroup-colspan

feat(buttonGroup): get/set colspan from the default button

src/ButtonGroup.ts

@@ -12,6 +12,16 @@ class ButtonGroup extends ContainerWidget {
     return btn || this.buttons[0];
   }
 
+  get colspan(): number {
+    return this.defaultButton?.colspan || 1;
+  }
+
+  set colspan(value: number) {
+    if (this.defaultButton) {
+      this.defaultButton.colspan = value;
+    }
+  }
+
   get secondaryButtons(): Button[] {
     const btns = this.buttons.filter(
       (button) => button.id !== this.defaultButton?.id,
@@ -20,7 +30,7 @@ class ButtonGroup extends ContainerWidget {
   }
 
   get buttons(): Button[] {
-    return this._container.rows[0].filter((b) => !b.invisible) as Button[];
+    return this._container.rows.flat().filter((b) => !b.invisible) as Button[];
   }
 
   constructor(props: any) {

src/spec/ButtonGroup.spec.ts

@@ -23,6 +23,7 @@ describe("A ButtonsGroup widget", () => {
         type: "object",
         icon: "gtk-execute",
         string: "Button 1",
+        colspan: 4,
       });
       const btn2 = new Button({
         name: "btn2",
@@ -53,6 +54,13 @@ describe("A ButtonsGroup widget", () => {
       expect(buttonGroup.secondaryButtons[0].id).toBe("btn2");
       expect(buttonGroup.secondaryButtons[1].id).toBe("btn3");
     });
+    it("should have the same colspan as the default button", () => {
+      expect(buttonGroup.colspan).toBe(4);
+    });
+    it("should set the same colspan to the default button", () => {
+      buttonGroup.colspan = 2;
+      expect(buttonGroup.defaultButton?.colspan).toBe(2);
+    });
   });
   describe("Working with invisible buttons", () => {
     it("Only should return visible buttons", () => {

src/spec/Form.spec.ts

@@ -788,6 +788,26 @@ describe("A Form", () => {
         expect(button).toBeInstanceOf(Button);
       });
     });
+    it("should be able to parse a ButtonGroup with colspan", () => {
+      const fields = {};
+      const xmlViewForm = `<?xml version="1.0"?>
+      <form string="Form1">
+        <buttonGroup name="aButtonGroup" default="main">
+          <button name="main" type="object" string="Main action" colspan="4" />
+          <button name="secondary" type="object" string="Secondary action" />
+        </buttonGroup>
+      </form>`;
+      const form = new Form(fields);
+      form.parse(xmlViewForm);
+
+      const buttonGroup = form.container.rows[0][0] as ButtonGroup;
+      expect(buttonGroup).toBeInstanceOf(ButtonGroup);
+      expect(buttonGroup.buttons).toHaveLength(2);
+      buttonGroup.buttons.forEach((button) => {
+        expect(button).toBeInstanceOf(Button);
+      });
+      expect(buttonGroup.colspan).toBe(4);
+    });
   });
 
   it("should be able to parse a Button by default to type workflow", () => {