Add slider from material-ui/lab

src/components/UiItemList/index.js

@@ -2,19 +2,14 @@
 import React from "react";
 import {
   ListItem,
-  ListItemIcon,
-  ListItemSecondaryAction,
-  ListItemText
-} from "material-ui/List";
+  ListItemIcon
+} from "@material-ui/core/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 Slider from "material-ui-old/Slider";
-import MuiThemeProvider from "material-ui-old/styles/MuiThemeProvider";
-
-import { Toggle, DropDown, Link, Section, Text, Progress } from "./UiItem";
+import { Toggle, DropDown, Link,
+        Section, Text, Progress, Slider } 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>
-    ];
-  }
 }