Update to material-ui 1.0 beta

src/UiItems.js

@@ -1,26 +1,38 @@
 // @flow
 import React from "react";
-import Toggle from "material-ui/Toggle";
-import SelectField from 'material-ui/SelectField';
-import MenuItem from 'material-ui/MenuItem';
-import Slider from 'material-ui/Slider';
+import Switch from "material-ui/Switch";
+import Select from 'material-ui/Select';
+import { MenuItem } from 'material-ui/Menu';
+import Slider from 'material-ui-old/Slider';
+import MuiThemeProvider from 'material-ui-old/styles/MuiThemeProvider';
+import Icon from 'material-ui/Icon';
 import Config from "./config";
 import { keyOf } from "./util";
+import Input, { InputLabel } from 'material-ui/Input';
+import { FormControl } from 'material-ui/Form';
 import R from "ramda";
+import List, {
+  ListItem,
+  ListItemIcon,
+  ListItemSecondaryAction,
+  ListItemText,
+  ListSubheader,
+} from 'material-ui/List';
 
 const enabled = (props: ControlUI, state: State) => {
   if (props.enableCondition == null) return true;
   else {
     const val = state.values[props.topic];
     return props.enableCondition(
-      val.internal == null ? val.actual : val.internal, val.actual);
+      val.internal == null ? val.actual : val.internal, val.actual, R.map(x => x.internal == null ?
+        x.actual : x.internal, state.values == null ? {} : state.values));
   }
 };
 
 const getValue = (topic: string, val: string) =>
   Config.topics[topic].values[val];
 
-const onToggle = (topic: string, props: ControlUI, state: State) =>
+const onSwitch = (topic: string, props: ControlUI, state: State) =>
   (x, toggled: boolean) => {
     if (state.mqtt != null) {
       state.mqtt.publish(Config.topics[topic].command,
@@ -39,31 +51,49 @@ export const toggle = (state: State, props: ControlUI) => {
       return val.internal === R.propOr("on", "on", props);
     }
   })();
-  return (<Toggle label={props.text}
-          toggled={toggled}
-          onToggle={onToggle(props.topic, props, state)}
+  return (
+    <ListItem>
+      {props.icon && <ListItemIcon><Icon>{props.icon}</Icon></ListItemIcon>}
+      <ListItemText primary={props.text} />
+      <ListItemSecondaryAction>
+        <Switch label={props.text}
+          checked={toggled}
+          onChange={onSwitch(props.topic, props, state)}
           disabled={!(enabled(props, state))} />
+      </ListItemSecondaryAction>
+    </ListItem>
   );
 }
 
 const onDropDownChange = (topic: string, props: ControlUI, state: State) =>
-  (event, index, value) => {
+  (event) => {
     if (state.mqtt != null) {
-      state.mqtt.publish(Config.topics[topic].command, value);
+      state.mqtt.publish(Config.topics[topic].command, event.target.value);
     }
   };
 
 const dropDownItem = (topic: string) => (text: string, key: string) => (
-  <MenuItem value={Config.topics[topic].values[key]} primaryText={text} />
+  <MenuItem value={Config.topics[topic].values[key]} key={key}>{text}</MenuItem>
 );
 
-export const dropDown = (state: State, props: ControlUI) => (
-  <SelectField value={state.values[props.topic].actual}
-               onChange={onDropDownChange(props.topic, props, state)}
-               disabled={!(enabled(props, state))}>
-    {R.values(R.mapObjIndexed(dropDownItem(props.topic), props.options))}
-  </SelectField>
-);
+export const dropDown = (state: State, props: ControlUI) => {
+  const id = `${props.topic}.${Object.keys(props.options).reduce((v,r) => v + "." + r)}`;
+  return (
+    <ListItem>
+      {props.icon && <ListItemIcon><Icon>{props.icon}</Icon></ListItemIcon>}
+      <FormControl>
+        <InputLabel htmlFor={id}>{props.text}</InputLabel>
+        <Select value={state.values[props.topic].actual}
+              onChange={onDropDownChange(props.topic, props, state)}
+              disabled={!(enabled(props, state))}
+              input={<Input id={id} />}
+        >
+          {R.values(R.mapObjIndexed(dropDownItem(props.topic), props.options))}
+        </Select>
+      </FormControl>
+    </ListItem>
+  );
+};
 
 const onSliderChange = (state: State, props: ControlUI) =>
   (event, value) => {
@@ -73,13 +103,22 @@ const onSliderChange = (state: State, props: ControlUI) =>
   };
 
 export const slider = (state: State, props: ControlUI) => (
-  <div>
-  <span>{props.text}</span>
-  <Slider value={state.values[props.topic].actual}
-          min={props.min == null ? 0 : props.min}
-          max={props.max == null ? 1 : props.max}
-          step={props.step == null ? 1 : props.step}
-          onChange={onSliderChange(state, props)}
-  />
-  </div>
+  <ListItem>
+    {props.icon && <ListItemIcon><Icon>{props.icon}</Icon></ListItemIcon>}
+    <ListItemText primary={props.text} />
+    <ListItemSecondaryAction>
+      <MuiThemeProvider>
+      <Slider value={state.values[props.topic].actual}
+            min={props.min == null ? 0 : props.min}
+            max={props.max == null ? 1 : props.max}
+            step={props.step == null ? 1 : props.step}
+            onChange={onSliderChange(state, props)}
+            style={{width: 100}}
+      /></MuiThemeProvider>
+    </ListItemSecondaryAction>
+  </ListItem>
+);
+
+export const section = (state: State, props: ControlUI) => (
+  <ListSubheader>{props.text}</ListSubheader>
 );