Add slider from material-ui/lab

config/utils.js

@@ -60,7 +60,7 @@ export const floalt = {
 }
 
 export const esper_statistics = (name: string,
-    prev_ui: Array<ControlUI> = []) => (
+    prev_ui: Array<ControlUI> = []): Array<ControlUI> => (
       prev_ui.concat([
         {
           type: "section",

package.json

@@ -12,11 +12,11 @@
     "precommit": "yarn lint"
   },
   "dependencies": {
+    "@material-ui/core": "^1.2.1",
+    "@material-ui/lab": "^1.0.0-alpha.5",
     "babel-preset-env": "^1.6.0",
     "leaflet": "^1.3.1",
     "lodash-es": "^4.17.4",
-    "material-ui": "npm:material-ui@next",
-    "material-ui-old": "npm:material-ui@latest",
     "mdi": "^2.0.46",
     "mqtt": "^2.14.0",
     "react": "^16.0.0",

src/components/App.js

@@ -8,10 +8,10 @@ import merge from "lodash/merge";
 
 import type { Config, Control, Topics } from "config/flowtypes";
 
-import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
+import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
-import createMuiTheme from "material-ui/styles/createMuiTheme";
+import createMuiTheme from "@material-ui/core/styles/createMuiTheme";
-import withStyles from "material-ui/styles/withStyles";
+import withStyles from "@material-ui/core/styles/withStyles";
-import * as Colors from "material-ui/colors";
+import * as Colors from "@material-ui/core/colors";
 
 import SideBar from "components/SideBar";
 import ControlMap from "components/ControlMap";

src/components/SideBar.js

@@ -1,13 +1,13 @@
 // @flow
 import * as React from "react";
 
-import withStyles from "material-ui/styles/withStyles";
+import withStyles from "@material-ui/core/styles/withStyles";
-import Drawer from "material-ui/Drawer";
+import Drawer from "@material-ui/core/Drawer";
-import Typography from "material-ui/Typography";
+import Typography from "@material-ui/core/Typography";
-import IconButton from "material-ui/IconButton";
+import IconButton from "@material-ui/core/IconButton";
-import AppBar from "material-ui/AppBar";
+import AppBar from "@material-ui/core/AppBar";
-import Toolbar from "material-ui/Toolbar";
+import Toolbar from "@material-ui/core/Toolbar";
-import List from "material-ui/List";
+import List from "@material-ui/core/List";
 import { renderIcon } from "utils/parseIconName";
 
 import type { Control } from "config/flowtypes";

src/components/TopBar.js

@@ -1,10 +1,10 @@
 // @flow
 import React from "react";
 
-import AppBar from "material-ui/AppBar";
+import AppBar from "@material-ui/core/AppBar";
-import Toolbar from "material-ui/Toolbar";
+import Toolbar from "@material-ui/core/Toolbar";
-import Typography from "material-ui/Typography";
+import Typography from "@material-ui/core/Typography";
-import { CircularProgress } from "material-ui/Progress";
+import CircularProgress from "@material-ui/core/CircularProgress";
 
 export type TopBarProps = {
   title: string,

src/components/UiItemList/UiItem.js

@@ -6,18 +6,19 @@ import {
   ListItemSecondaryAction,
   ListItemText,
   ListSubheader
-} from "material-ui/List";
+} from "@material-ui/core/List";
-import Switch from "material-ui/Switch";
+import Switch from "@material-ui/core/Switch";
-import Input, { InputLabel } from "material-ui/Input";
+import Input, { InputLabel } from "@material-ui/core/Input";
-import { FormControl } from "material-ui/Form";
+import FormControl from "@material-ui/core/FormControl";
-import Select from "material-ui/Select";
+import Select from "@material-ui/core/Select";
-import { MenuItem } from "material-ui/Menu";
+import { MenuItem } from "@material-ui/core/Menu";
-import Button from "material-ui/Button";
+import Button from "@material-ui/core/Button";
-import { LinearProgress } from "material-ui/Progress";
+import LinearProgress from "@material-ui/core/LinearProgress";
+import SliderComponent from "@material-ui/lab/Slider";
 
 import type {
   UIControl, UIToggle, UIDropDown, UILink,
-  UISection, UIText, UIProgress
+  UISection, UIText, UIProgress, UISlider
 } from "config/flowtypes";
 
 import keyOf from "utils/keyOf";
@@ -184,6 +185,27 @@ export class DropDown extends UiControl<UIDropDown> {
   }
 }
 
+export class Slider extends UiControl<UISlider> {
+  runPrimaryAction = (_e: ?any, v: ?number) => {
+    if (v != null) {
+      this.changeState(v);
+    }
+  }
+
+  render() {
+    return [
+      <ListItemText key="label" secondary={this.props.item.text} />,
+      <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()}
+        onDragEnd={this.runPrimaryAction}
+        disabled={!this.isEnabled()} />
+    ];
+  }
+}
+
 export class Link extends UiItem<UILink> {
   runPrimaryAction = () => {
     const control = this.props.item;
@@ -242,3 +264,4 @@ export class Progress extends UiControl<UIProgress> {
     ];
   }
 }
+

src/components/UiItemList/index.js

@@ -2,19 +2,14 @@
 import React from "react";
 import {
   ListItem,
-  ListItemIcon,
+  ListItemIcon
-  ListItemSecondaryAction,
+} from "@material-ui/core/List";
-  ListItemText
-} from "material-ui/List";
 import { renderIcon } from "utils/parseIconName";
 
-import type { ControlUI, UIControl, UISlider } from "config/flowtypes";
+import type { ControlUI } from "config/flowtypes";
 
-// TODO: Use something else
+import { Toggle, DropDown, Link,
-import Slider from "material-ui-old/Slider";
+        Section, Text, Progress, Slider } from "./UiItem";
-import MuiThemeProvider from "material-ui-old/styles/MuiThemeProvider";
-
-import { Toggle, DropDown, Link, Section, Text, Progress } from "./UiItem";
 
 export type UiItemListProps = {
   controls: Array<ControlUI>,
@@ -70,7 +65,9 @@ export default class UiItemList extends React.PureComponent<UiItemListProps> {
         onChangeState={this.props.onChangeState} />;
     }
     case "slider": {
-      return this.renderSlider(control);
+      return <Slider item={control}
+        state={this.props.state}
+        onChangeState={this.props.onChangeState} />;
     }
     case "text": {
       return <Text item={control}
@@ -89,43 +86,4 @@ export default class UiItemList extends React.PureComponent<UiItemListProps> {
     }
     }
   }
-
-  getValue(control: UIControl) {
-    const value = this.props.state[control.topic];
-    if (value == null) {
-      throw new Error(
-        `Unknown topic "${control.topic}" in ${control.type} "${control.text}"`
-      );
-    }
-    return value;
-  }
-
-  renderSlider(control: UISlider) {
-    const value = this.getValue(control);
-    const on = (dontApply: ?boolean) => () => {
-      if (dontApply == null || dontApply === false) {
-        this.props.onChangeState(control.topic,
-          // $FlowFixMe
-          this.val);
-      }
-    };
-    return [
-      <ListItemText primary={control.text} key="text" />,
-      <ListItemSecondaryAction key="action">
-        <MuiThemeProvider>
-          <Slider value={value.internal || value.actual}
-            min={control.min || 0}
-            max={control.max || 100}
-            step={control.step || 1}
-            onChange={(_event, next) => {
-              // $FlowFixMe
-              this.val = next;
-              on(control.delayedApply)();
-            }}
-            onDragStop={on(false)}
-            style={{width: 100}}
-          /></MuiThemeProvider>
-      </ListItemSecondaryAction>
-    ];
-  }
 }