fix: use etch for view rendering

atom-extensions · Aug 5, 2020 · 858eadb · 858eadb
1 parent 7ff83d7
commit 858eadb
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 44 deletions.
diff --git a/lib/dec-hex-oct-bin-view.js b/lib/dec-hex-oct-bin-view.js
@@ -1,69 +1,87 @@
-'use babel';
+/** @babel */
+
+/** @jsx etch.dom */
+
+const etch = require("etch");
 
 export default class DecHexOctBinView {
-    constructor(state) {
+    constructor(state = {}) {
         // Initialize
-        this.currentValue = 0;
-        this.currentValueType = 'Decimal';
+        this.state = {
+            decimal: "",
+            hex: "",
+            octal: "",
+            binary: "",
+            ...state,
+        }
+
+        etch.initialize(this);
+    }
+
+    render() {
         // Create root element
-        this.rootElement = document.createElement('div');
-        this.rootElement.classList.add('dec-hex-oct-bin');
-        this.rootElement.innerHTML = `
-            <div class="padded">
-                <div class="row block inset-panel">
-                    <div class="col"><button class="btn" title="Choose input type">Decimal</button></div>
-                    <div class="col number highlight" id="decimal" title="Copy this value"></div>
-                </div>
-                <div class="row block inset-panel">
-                    <div class="col"><button class="btn active" title="Choose input type">Hex</button></div>
-                    <div class="col number highlight" id="hex" title="Copy this value"></div>
+        return (
+            <div className="dec-hex-oct-bin">
+                <div className="padded">
+                    <div className="row block inset-panel">
+                        <div className="col"><button className="btn" title="Choose input type" on={{click: this.parseDecimal}}>Decimal</button></div>
+                        <div className="col number highlight" title="Copy this value" on={{click: this.copy}}>{this.state.decimal}</div>
+                    </div>
+                    <div className="row block inset-panel">
+                        <div className="col"><button className="btn" title="Choose input type" on={{click: this.parseHex}}>Hex</button></div>
+                        <div className="col number highlight" title="Copy this value" on={{click: this.copy}}>{this.state.hex}</div>
+                    </div>
+                    <div className="row block inset-panel">
+                        <div className="col"><button className="btn" title="Choose input type" on={{click: this.parseOctal}}>Octal</button></div>
+                        <div className="col number highlight" title="Copy this value" on={{click: this.copy}}>{this.state.octal}</div>
+                    </div>
+                    <div className="row block inset-panel">
+                        <div className="col"><button className="btn" title="Choose input type" on={{click: this.parseBinary}}>Binary</button></div>
+                        <div className="col number highlight" title="Copy this value" on={{click: this.copy}}>{this.state.binary}</div>
+                    </div>
                 </div>
-                <div class="row block inset-panel">
-                    <div class="col"><button class="btn" title="Choose input type">Octal</button></div>
-                    <div class="col number highlight" id="octal" title="Copy this value"></div>
-                </div>
-                <div class="row block inset-panel">
-                    <div class="col"><button class="btn" title="Choose input type">Binary</button></div>
-                    <div class="col number highlight" id="binary" title="Copy this value"></div>
-                </div>
-            </div>`;
+            </div>
+        );
+    }
+
+    update(num) {
+        if (num != null) {
+            this.state = {
+                decimal: num.toString(10),
+                hex: num.toString(16),
+                octal: num.toString(8),
+                binary: num.toString(2),
+            }
+        }
+        return etch.update(this);
     }
 
     getSelectedText() {
         return atom.workspace.getActiveTextEditor().getSelectedText();
     }
 
-    updatePanel() {
-        console.log('test2');
-        this.rootElement.querySelector("#decimal").textContent = this.currentValue.toString(10);
-        this.rootElement.querySelector("#hex").textContent = this.currentValue.toString(16);
-        this.rootElement.querySelector("#octal").textContent = this.currentValue.toString(8);
-        this.rootElement.querySelector("#binary").textContent = this.currentValue.toString(2);
-        console.log('test3');
+    copy(e) {
+        atom.clipboard.write(e.target.textContent);
     }
 
     parseN() {
 
     }
 
     parseDecimal() {
-        this.currentValue = parseInt(this.getSelectedText(), 10);
-        this.updatePanel();
+        return this.update(parseInt(this.getSelectedText(), 10));
     }
 
     parseHex() {
-        this.currentValue = parseInt(this.getSelectedText(), 16);
-        this.updatePanel();
+        return this.update(parseInt(this.getSelectedText(), 16));
     }
 
     parseOctal() {
-        this.currentValue = parseInt(this.getSelectedText(), 8);
-        this.updatePanel();
+        return this.update(parseInt(this.getSelectedText(), 8));
     }
 
     parseBinary() {
-        this.currentValue = parseInt(this.getSelectedText(), 2);
-        this.updatePanel();
+        return this.update(parseInt(this.getSelectedText(), 2));
     }
 
     // Used by Atom for tab text.
@@ -76,6 +94,11 @@ export default class DecHexOctBinView {
         return 'atom://dec-hex-oct-bin';
     }
 
+    // Open in right dock by default
+    getDefaultLocation() {
+        return 'right';
+    }
+
     // Returns an object that can be retrieved when package is activated
     serialize() {
         // This is used to look up the deserializer function. It can be any string, but it needs to be unique across all packages!
@@ -86,10 +109,10 @@ export default class DecHexOctBinView {
 
     // Tear down any state and detach
     destroy() {
-        this.rootElement.remove();
+        return etch.destroy(this);
     }
 
     getElement() {
-        return this.rootElement;
+        return this.element;
     }
 }
diff --git a/lib/dec-hex-oct-bin.js b/lib/dec-hex-oct-bin.js
@@ -1,4 +1,4 @@
-'use babel';
+/** @babel */
 
 import DecHexOctBinView from './dec-hex-oct-bin-view';
 import { CompositeDisposable } from 'atom';

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,5 +15,7 @@
   "engines": {
     "atom": ">=1.0.0 <2.0.0"
   },
-  "dependencies": {}
+  "dependencies": {
+    "etch": "^0.14.0"
+  }
 }