refactor(examples): update to use hiccup-html

thi-ng · Jun 23, 2020 · 2ea2ee8 · 2ea2ee8
1 parent d39be73
commit 2ea2ee8
Showing 4 changed files with 41 additions and 39 deletions.
diff --git a/examples/hdom2020-dnd/package.json b/examples/hdom2020-dnd/package.json
@@ -20,6 +20,7 @@
         "@thi.ng/api": "latest",
         "@thi.ng/hdom2020": "latest",
         "@thi.ng/hiccup-carbon-icons": "latest",
+        "@thi.ng/hiccup-html": "latest",
         "@thi.ng/transducers": "latest"
     },
     "browserslist": [

diff --git a/examples/hdom2020-dnd/src/draggable.ts b/examples/hdom2020-dnd/src/draggable.ts
@@ -1,4 +1,5 @@
 import type { Fn } from "@thi.ng/api";
+import { div } from "@thi.ng/hiccup-html";
 import { Component, ComponentLike, NumOrElement } from "@thi.ng/hdom2020";
 
 interface DraggableOpts {
@@ -30,24 +31,23 @@ export class Draggable extends Component {
     async mount(parent: Element, index: NumOrElement) {
         const opts = this.opts;
         this.el = await this.$tree(
-            [
-                "div",
+            div(
                 {
                     draggable: true,
-                    ondragstart: (e: DragEvent) => {
+                    ondragstart: (e) => {
                         e.dataTransfer!.setData("text/plain", "");
                         this.active = true;
                         this.$style(opts.start);
                         opts.onstart && opts.onstart(e);
                     },
-                    ondragend: (e: DragEvent) => {
+                    ondragend: (e) => {
                         this.active = false;
                         this.$style(opts.end);
                         opts.onend && opts.onend(e);
                     },
                 },
-                this.inner,
-            ],
+                this.inner
+            ),
             parent,
             index
         );

diff --git a/examples/hdom2020-dnd/src/index.ts b/examples/hdom2020-dnd/src/index.ts
@@ -1,9 +1,10 @@
-import { $compile, ComponentLike } from "@thi.ng/hdom2020";
+import { $compile } from "@thi.ng/hdom2020";
 import {
     ADD_OUTLINE,
     CLOSE_OUTLINE,
     withSize,
 } from "@thi.ng/hiccup-carbon-icons";
+import { div } from "@thi.ng/hiccup-html";
 import { cycle } from "@thi.ng/transducers";
 import { Draggable } from "./draggable";
 import { Notification, NotifyOpts } from "./notification";
@@ -16,34 +17,34 @@ const messages = cycle<NotifyOpts>([
 
 const notify = new Notification();
 
-const dragBank = (id: string, col1: string, col2: string, icon: any) => [
-    "div",
-    { id },
-    dropZone(
-        col1,
-        id,
-        new Draggable(dragButton(icon), {
-            scope: id,
-            dropzone: id,
-            hover: { background: col2 },
-            ondrop: () => notify.update(<NotifyOpts>messages.next().value),
-        })
-    ),
-    dropZone(col1, id),
-    dropZone(col1, id),
-];
+const dragBank = (id: string, col1: string, col2: string, icon: any) =>
+    div(
+        { id },
+        dropZone(
+            col1,
+            id,
+            new Draggable(dragButton(icon), {
+                scope: id,
+                dropzone: id,
+                hover: { background: col2 },
+                ondrop: () => notify.update(<NotifyOpts>messages.next().value),
+            })
+        ),
+        dropZone(col1, id),
+        dropZone(col1, id)
+    );
 
-const dropZone = (col: string, id: string, body?: any) => [
-    `div.v-top.dib.mr2.w4.h4.pa4.bg-${col}`,
-    { "data-dropzone": id },
-    body,
-];
+const dropZone = (col: string, id: string, body?: any) =>
+    div(
+        { class: `v-top dib mr2 w4 h4 pa4 bg-${col}`, data: { dropzone: id } },
+        body
+    );
 
-const dragButton = (icon: any): ComponentLike => [
-    "div.w3.h3.bg-black.white.flex.items-center.justify-center",
-    {},
-    withSize(icon, "24px"),
-];
+const dragButton = (icon: any) =>
+    div(
+        { class: "w3 h3 bg-black white flex items-center justify-center" },
+        withSize(icon, "24px")
+    );
 
 $compile([
     "div",

diff --git a/examples/hdom2020-dnd/src/notification.ts b/examples/hdom2020-dnd/src/notification.ts
@@ -5,6 +5,7 @@ import {
     WARNING,
     withSize,
 } from "@thi.ng/hiccup-carbon-icons";
+import { div, span } from "@thi.ng/hiccup-html";
 
 const PRESETS = {
     info: { class: "bg-lightest-blue blue", icon: INFO },
@@ -33,12 +34,11 @@ export class Notification extends Component<NotifyOpts> {
     update(msg: NotifyOpts) {
         const config = PRESETS[msg.type];
         this.$tree(
-            [
-                `div.w-100.ph3.pv2.mv2.br-pill`,
-                { class: config.class },
-                ["span.icon.mr2", null, withSize(config.icon, "16px")],
-                msg.msg,
-            ],
+            div(
+                { class: `w-100 ph3 pv2 mv2 br-pill ${config.class}` },
+                span({ class: "icon mr2" }, withSize(config.icon, "16px")),
+                msg.msg
+            ),
             this.$clear()
         );
         this.$attribs({ hidden: false });