Refactor components

Implement context mechanism to pass default attributes to descendant
components.

ui/components/all-parameters.js

@@ -1,9 +1,7 @@
 "use strict";
 
-import m from "mithril";
-import * as components from "../components";
+import { m } from "../components";
 import * as taskQueue from "../task-queue";
-import longTextComponent from "../long-text-component";
 import { parse } from "../../lib/common/expression-parser";
 import memoize from "../../lib/common/memoize";
 
@@ -13,125 +11,125 @@ function escapeRegExp(str) {
   return str.replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&");
 }
 
-const component = {
-  view: vnode => {
-    const device = vnode.attrs.device;
+export default function component() {
+  return {
+    view: vnode => {
+      const device = vnode.attrs.device;
 
-    const search = m("input", {
-      type: "text",
-      placeholder: "Search parameters",
-      oninput: e => {
-        vnode.state.searchString = e.target.value;
-        e.redraw = false;
-        clearTimeout(vnode.state.timeout);
-        vnode.state.timeout = setTimeout(m.redraw, 500);
-      }
-    });
-
-    const instanceRegex = /\.[0-9]+$/;
-    let re;
-    if (vnode.state.searchString) {
-      const keywords = vnode.state.searchString.split(" ").filter(s => s);
-      if (keywords.length)
-        re = new RegExp(keywords.map(s => escapeRegExp(s)).join(".*"), "i");
-    }
-
-    const rows = Object.keys(device)
-      .sort()
-      .map(k => {
-        const p = device[k];
-        const val = [];
-        const attrs = {};
-        if (re) {
-          const str = p.value && p.value[0] ? `${k} ${p.value[0]}` : k;
-          if (!re.test(str)) attrs.style = "display: none;";
+      const search = m("input", {
+        type: "text",
+        placeholder: "Search parameters",
+        oninput: e => {
+          vnode.state.searchString = e.target.value;
+          e.redraw = false;
+          clearTimeout(vnode.state.timeout);
+          vnode.state.timeout = setTimeout(m.redraw, 500);
         }
-
-        if (p.object === false) {
-          val.push(
-            m(
-              components.get("parameter"),
-              Object.assign({ device: device, parameter: memoizedParse(k) })
-            )
-          );
-        } else if (p.object && p.writable) {
-          if (instanceRegex.test(k)) {
-            val.push(
-              m(
-                "button",
-                {
-                  title: "Delete this instance",
-                  onclick: () => {
-                    taskQueue.queueTask({
-                      name: "deleteObject",
-                      device: device["DeviceID.ID"].value[0],
-                      objectName: k
-                    });
-                  }
-                },
-                "✕"
-              )
-            );
-          } else {
-            val.push(
-              m(
-                "button",
-                {
-                  title: "Create a new instance",
-                  onclick: () => {
-                    taskQueue.queueTask({
-                      name: "addObject",
-                      device: device["DeviceID.ID"].value[0],
-                      objectName: k
-                    });
-                  }
-                },
-                "🞢"
-              )
-            );
-          }
-        }
-
-        val.push(
-          m(
-            "button",
-            {
-              title: "Refresh tree",
-              onclick: () => {
-                taskQueue.queueTask({
-                  name: "getParameterValues",
-                  device: device["DeviceID.ID"].value[0],
-                  parameterNames: [k]
-                });
-              }
-            },
-            "↺"
-          )
-        );
-
-        return m(
-          "tr",
-          attrs,
-          m("td.left", m(longTextComponent, { text: k })),
-          m("td.right", val)
-        );
       });
 
-    return m(
-      ".all-parameters",
-      m(
-        "a.download-csv",
-        {
-          href: `/api/devices/${device["DeviceID.ID"].value[0]}.csv`,
-          download: "",
-          style: "float: right;"
-        },
-        "Download"
-      ),
-      search,
-      m(".parameter-list", m("table", m("tbody", rows)))
-    );
-  }
-};
+      const instanceRegex = /\.[0-9]+$/;
+      let re;
+      if (vnode.state.searchString) {
+        const keywords = vnode.state.searchString.split(" ").filter(s => s);
+        if (keywords.length)
+          re = new RegExp(keywords.map(s => escapeRegExp(s)).join(".*"), "i");
+      }
 
-export default component;
+      const rows = Object.keys(device)
+        .sort()
+        .map(k => {
+          const p = device[k];
+          const val = [];
+          const attrs = {};
+          if (re) {
+            const str = p.value && p.value[0] ? `${k} ${p.value[0]}` : k;
+            if (!re.test(str)) attrs.style = "display: none;";
+          }
+
+          if (p.object === false) {
+            val.push(
+              m(
+                "parameter",
+                Object.assign({ device: device, parameter: memoizedParse(k) })
+              )
+            );
+          } else if (p.object && p.writable) {
+            if (instanceRegex.test(k)) {
+              val.push(
+                m(
+                  "button",
+                  {
+                    title: "Delete this instance",
+                    onclick: () => {
+                      taskQueue.queueTask({
+                        name: "deleteObject",
+                        device: device["DeviceID.ID"].value[0],
+                        objectName: k
+                      });
+                    }
+                  },
+                  "✕"
+                )
+              );
+            } else {
+              val.push(
+                m(
+                  "button",
+                  {
+                    title: "Create a new instance",
+                    onclick: () => {
+                      taskQueue.queueTask({
+                        name: "addObject",
+                        device: device["DeviceID.ID"].value[0],
+                        objectName: k
+                      });
+                    }
+                  },
+                  "🞢"
+                )
+              );
+            }
+          }
+
+          val.push(
+            m(
+              "button",
+              {
+                title: "Refresh tree",
+                onclick: () => {
+                  taskQueue.queueTask({
+                    name: "getParameterValues",
+                    device: device["DeviceID.ID"].value[0],
+                    parameterNames: [k]
+                  });
+                }
+              },
+              "↺"
+            )
+          );
+
+          return m(
+            "tr",
+            attrs,
+            m("td.left", m("long-text", { text: k })),
+            m("td.right", val)
+          );
+        });
+
+      return m(
+        ".all-parameters",
+        m(
+          "a.download-csv",
+          {
+            href: `/api/devices/${device["DeviceID.ID"].value[0]}.csv`,
+            download: "",
+            style: "float: right;"
+          },
+          "Download"
+        ),
+        search,
+        m(".parameter-list", m("table", m("tbody", rows)))
+      );
+    }
+  };
+}