Implement prop-attr sync for Button Component #97

Padax · Sep 21, 2021 · db13846 · db13846
1 parent 8831fdb
commit db13846
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/wc/components/Button.js b/wc/components/Button.js
@@ -133,14 +133,26 @@ class Button extends WComponent{
     super();
   }
   init(){
+    this.render();
+  }
+  update(){
+    this.render();
+  }
+  render(){
     const classList=[];
     classList.push(this.display, this.size, this.outlined?"outline-"+this.color:this.color);
-    const attrs={};
+    const attrs={removes:[]};
     if(this.disabled){
       attrs["disabled"]=true;
+    }else{
+      attrs.removes.push("disabled");
+    }
+    if(this.btn){
+      DOM.modify(this.btn, {props:{className:classList.join(" ")}, attrs:attrs});
+    }else{
+      this.btn=DOM.create("button", {props:{className:classList.join(" ")}, attrs:attrs}, this.shadowRoot);
+      DOM.create("slot", {}, this.btn);
     }
-    const btn=DOM.create("button", {props:{className:classList.join(" ")}, attrs:attrs}, this.shadowRoot);
-    DOM.create("slot", {}, btn);
   }
 }
 Button.prototype.stylesheet=stylesheet;

diff --git a/wc/util/DOM.js b/wc/util/DOM.js
@@ -37,6 +37,11 @@ const DOM={
     return element;
   },
   setAttributes:function(element, attributes){
+    if(attributes.removes instanceof Array){
+      attributes.removes.forEach((name)=>{
+        element.removeAttribute(name);
+      });
+    }
     for(const name in attributes){
       element.setAttribute(name, attributes[name]);
     }