Completely rework how icons work in mqtt control map

src/config/flowtypes.js

@@ -1,5 +1,6 @@
 // @flow
 import type { Color } from "config/colors";
+import type { Icon } from "config/icon";
 
 export type TopicType = (msg: Buffer) => any;
 
@@ -33,7 +34,7 @@ export type UIToggle = $ReadOnly<{|
   type: "toggle",
   text: string,
   topic: string,
-  icon?: string,
+  icon?: Icon,
   enableCondition?: TopicDependentOption<boolean>,
   on?: Actual,
   off?: Actual,
@@ -44,7 +45,7 @@ export type UIDropDown = $ReadOnly<{|
   type: "dropDown",
   text: string,
   topic: string,
-  icon?: string,
+  icon?: Icon,
   enableCondition?: TopicDependentOption<boolean>,
   options: Map<string, any>,
   renderValue?: (value: string) => string
@@ -54,7 +55,7 @@ export type UISlider = $ReadOnly<{|
   type: "slider",
   text: string,
   topic: string,
-  icon?: string,
+  icon?: Icon,
   enableCondition?: TopicDependentOption<boolean>,
   min?: number,
   max?: number,
@@ -74,21 +75,21 @@ export type UILink = $ReadOnly<{|
   enableCondition?: StateDependentOption<boolean>,
 
   // TODO: check if both the following options are implemented
-  icon?: string
+  icon?: Icon
 |}>;
 
 export type UIText = $ReadOnly<{|
   type: "text",
   text: string,
   topic: string,
-  icon?: string
+  icon?: Icon
 |}>;
 
 export type UIProgress = $ReadOnly<{|
   type: "progress",
   text: string,
   topic: string,
-  icon?: string,
+  icon?: Icon,
   min?: number,
   max?: number
 |}>;
@@ -105,11 +106,7 @@ export type ControlUI =
 export type Control = {
   name: string,
   position: [number, number],
-  icon: string | (
-      internals: Map<string, Internal>,
-      actuals: Map<string, Actual>,
-      state: State
-    ) => string,
+  icon: Icon,
   iconColor?: (
       internals: Map<string, Internal>,
       actuals: Map<string, Actual>,

src/config/icon.js

@@ -0,0 +1,59 @@
+// @flow
+import * as React from "react";
+import { getInternals, getActuals } from "utils/state";
+
+export opaque type RawIcon: string = string;
+
+export type Icon = (Map<string, Internal>, Map<string, Actual>, State) =>
+  RawIcon;
+
+export const raw_mdi = (name: string): RawIcon => {
+  return `mdi ${name.split(" ").map((icon) => "mdi-".concat(icon)).join(" ")}`;
+};
+
+export const mdi = (icon: string) => () => raw_mdi(icon);
+
+export const mdi_battery = (topic: string) =>
+  (state: Map<string, Internal>) => {
+    const rawval = state[topic];
+    const val = parseInt(rawval);
+    if (isNaN(val)) {
+      return raw_mdi("battery-unknown");
+    } else if (val > 95) {
+      return raw_mdi("battery");
+    } else if (val > 85) {
+      return raw_mdi("battery-90");
+    } else if (val > 75) {
+      return raw_mdi("battery-80");
+    } else if (val > 65) {
+      return raw_mdi("battery-70");
+    } else if (val > 55) {
+      return raw_mdi("battery-60");
+    } else if (val > 45) {
+      return raw_mdi("battery-50");
+    } else if (val > 35) {
+      return raw_mdi("battery-40");
+    } else if (val > 25) {
+      return raw_mdi("battery-30");
+    } else if (val > 15) {
+      return raw_mdi("battery-20");
+    } else {
+      return raw_mdi("battery-10");
+    }
+  };
+
+export const toRawIcon = (icon: Icon, state: State): RawIcon => {
+  const internals: Map<string, Internal> = getInternals(state);
+  const actuals: Map<string, Actual> = getActuals(state);
+  return icon(internals, actuals, state);
+};
+
+export const renderRawIcon =
+  (icon: RawIcon, extraClass?: string): React.Node => {
+    return <i className={`${extraClass || ""} ${icon}`}></i>;
+  };
+
+export const renderIcon =
+  (icon: Icon, state: State, extraClass?: string): React.Node => {
+    return renderRawIcon(toRawIcon(icon, state), extraClass);
+  };