feat: component renders according to state; Eventemitter

telekom · Aug 2, 2021 · 68a206b · 68a206b
1 parent 6c9f8bb
commit 68a206b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/packages/components/src/components/toggle-button/toggle-button.tsx b/packages/components/src/components/toggle-button/toggle-button.tsx
@@ -60,7 +60,7 @@ export class ToggleButton {
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
   /** Emitted when button is clicked */
-  @Event() scaleClick!: EventEmitter;
+  @Event() scaleClick!: EventEmitter<{ id: string; selected: boolean }>;
 
   connectedCallback() {
     this.setIconPositionProp();

diff --git a/packages/components/src/components/toggle-group/toggle-group.tsx b/packages/components/src/components/toggle-group/toggle-group.tsx
@@ -22,6 +22,11 @@ import {
 } from '@stencil/core';
 import classNames from 'classnames';
 
+interface ButtonStatus {
+  id: string;
+  selected: boolean;
+}
+
 @Component({
   tag: 'scale-toggle-group',
   styleUrl: 'toggle-group.css',
@@ -30,7 +35,7 @@ import classNames from 'classnames';
 export class ToggleGroup {
   @Element() hostElement: HTMLElement;
   /** state */
-  @State() status = [];
+  @State() status: ButtonStatus[] = [];
   /** (optional) The size of the button */
   @Prop() size?: 'large' | 'regular' | 'small' | 'xs' = 'large';
   /** (optional) Button variant */
@@ -48,7 +53,7 @@ export class ToggleGroup {
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
   /** Emitted when button is clicked */
-  @Event() scaleClick!: EventEmitter;
+  @Event() scaleClickGroup!: EventEmitter;
 
   @Listen('scaleClick')
   scaleCickHandler(ev) {
@@ -60,19 +65,20 @@ export class ToggleGroup {
         }
       } else {
         if (this.multi) {
-          if (button.id === ev.detail.id) { 
+          if (button.id === ev.detail.id) {
             button.selected = true;
           }
         } else {
-          if (button.id === ev.detail.id) { 
+          if (button.id === ev.detail.id) {
             button.selected = true;
           } else {
             button.selected = false;
           }
         }
       }
     });
-    // console.log('tempState', tempState)
+    this.setNewState(tempState);
+    this.scaleClickGroup.emit(this.status);
   }
 
   componentDidLoad() {
@@ -86,7 +92,6 @@ export class ToggleGroup {
       });
     });
     this.status = tempState;
-    // console.log(this.status)
   }
 
   componentDidRender() {
@@ -96,6 +101,16 @@ export class ToggleGroup {
     this.setChildrenCorners();
   }
 
+  setNewState(tempState: ButtonStatus[]) {
+    const toggleButtons = Array.from(
+      this.hostElement.querySelectorAll('scale-toggle-button')
+    );
+    toggleButtons.forEach((button, i) => {
+      button.setAttribute('selected', tempState[i].selected ? 'true' : 'false');
+    });
+    this.status = tempState;
+  }
+
   setButtonWidth() {
     Array.from(this.hostElement.children).forEach((child) => {
       const button = child.shadowRoot.querySelector('button');