Add slider from material-ui/lab

src/components/UiItemList/UiItem.js

@@ -6,18 +6,19 @@ import {
   ListItemSecondaryAction,
   ListItemText,
   ListSubheader
-} from "material-ui/List";
-import Switch from "material-ui/Switch";
-import Input, { InputLabel } from "material-ui/Input";
-import { FormControl } from "material-ui/Form";
-import Select from "material-ui/Select";
-import { MenuItem } from "material-ui/Menu";
-import Button from "material-ui/Button";
-import { LinearProgress } from "material-ui/Progress";
+} from "@material-ui/core/List";
+import Switch from "@material-ui/core/Switch";
+import Input, { InputLabel } from "@material-ui/core/Input";
+import FormControl from "@material-ui/core/FormControl";
+import Select from "@material-ui/core/Select";
+import { MenuItem } from "@material-ui/core/Menu";
+import Button from "@material-ui/core/Button";
+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,
-  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>
-    ];
-  }
 }