Completely rework how icons work in mqtt control map

src/components/App.js

@@ -19,7 +19,7 @@ import TopBar from "components/TopBar";
 import UiItemList from "components/UiItemList";
 
 import keyOf from "utils/keyOf";
-import { controlGetIcon } from "utils/parseIconName";
+import { toRawIcon } from "config/icon";
 
 import connectMqtt from "../connectMqtt";
 
@@ -127,7 +127,7 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
               control={this.state.selectedControl}
               onCloseRequest={this.closeDrawer.bind(this)}
               icon={this.state.selectedControl == null ? null :
-                controlGetIcon(this.state.selectedControl,
+                toRawIcon(this.state.selectedControl.icon,
                   this.state.mqttState)}
             >
               {this.state.selectedControl == null

src/components/ControlMap.js

@@ -4,7 +4,7 @@ import { Map, ImageOverlay, Marker, LayersControl } from "react-leaflet";
 import { CRS, point, divIcon } from "leaflet";
 import map from "lodash/map";
 import mapValues from "lodash/mapValues";
-import parseIconName, { controlGetIcon } from "utils/parseIconName";
+import { toRawIcon } from "config/icon";
 
 import type { Controls, Control } from "config/flowtypes";
 
@@ -50,8 +50,8 @@ export default class ControlMap extends React.PureComponent<ControlMapProps> {
   }
 
   createLeafletIcon(control: Control) {
-    const icon = controlGetIcon(control, this.props.state);
-    const iconClass = parseIconName(`${icon} 36px`);
+    const icon = toRawIcon(control.icon, this.props.state);
+    const iconClass = `${icon} mdi-36px`;
     return divIcon({
       iconSize: point(36, 36),
       iconAnchor: point(18, 18),

src/components/SideBar.js

@@ -8,15 +8,16 @@ import IconButton from "@material-ui/core/IconButton";
 import AppBar from "@material-ui/core/AppBar";
 import Toolbar from "@material-ui/core/Toolbar";
 import List from "@material-ui/core/List";
-import { renderIcon } from "utils/parseIconName";
+import { renderRawIcon } from "config/icon";
 
+import type { RawIcon } from "config/icon";
 import type { Control } from "config/flowtypes";
 
 export type SideBarProps = {
   control: ?Control,
   open: boolean,
   onCloseRequest: () => void,
-  icon?: ?string,
+  icon?: ?RawIcon,
   children?: React.Node
 };
 
@@ -55,7 +56,7 @@ class SideBar extends React.PureComponent<SideBarProps & Classes, SideBarState>
         <AppBar position="static">
           <Toolbar>
             {this.props.icon == null
-              || renderIcon(this.props.icon, "mdi-36px")}
+              || renderRawIcon(this.props.icon, "mdi-36px")}
             <Typography variant="title" className={this.props.classes.flex}>
               {this.props.control == null || this.props.control.name}
             </Typography>

src/components/UiItemList/UiItem.js

@@ -185,7 +185,7 @@ export class DropDown extends UiControl<UIDropDown> {
 }
 
 export class Slider extends UiControl<UISlider> {
-  runPrimaryAction = (_e: ?any, v: ?number) => {
+  runPrimaryAction = (e: ?Event, v: ?number) => {
     if (v != null) {
       this.changeState(v);
     }
@@ -197,8 +197,9 @@ export class Slider extends UiControl<UISlider> {
       <SliderComponent key="slidercomponent"
         value={this.getValue().internal || this.getValue().actual}
         min={this.props.item.min || 0} max={this.props.item.max || 0}
-        step={this.props.item.step || 0}
-        onChange={() => this.props.item.delayedApply || this.runPrimaryAction()}
+        step={this.props.item.step || 1}
+        onChange={(e, v) =>
+          this.props.item.delayedApply || this.runPrimaryAction(e, v)}
         onDragEnd={this.runPrimaryAction}
         disabled={!this.isEnabled()} />
     ];

src/components/UiItemList/index.js

@@ -2,7 +2,7 @@
 import React from "react";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
-import { renderIcon } from "utils/parseIconName";
+import { renderIcon } from "config/icon";
 
 import type { ControlUI } from "config/flowtypes";
 
@@ -33,7 +33,9 @@ export default class UiItemList extends React.PureComponent<UiItemListProps> {
       return (
         <ListItem key={key}>
           {control.icon == null ||
-            <ListItemIcon>{renderIcon(control.icon, "mdi-24px")}</ListItemIcon>}
+            <ListItemIcon>
+              {renderIcon(control.icon, this.props.state, "mdi-24px")}
+            </ListItemIcon>}
           {this.renderControl(control)}
         </ListItem>
       );