Add a progress bar

src/components/UiItemList/UiItem.js

@@ -12,6 +12,7 @@ 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";
 
 import keyOf from "utils/keyOf";
 import { getInternals, getActuals } from "utils/state";
@@ -214,3 +215,18 @@ export class Text extends UiControl<UIText> {
     ];
   }
 }
+
+export class Progress extends UiControl<UIProgress> {
+  render() {
+    const min = this.props.item.min || 0;
+    const max = this.props.item.max || 100;
+    const val = parseFloat(this.getValue().internal || this.getValue().actual);
+    const value = val * 100 / max - min;
+    return [
+      <ListItemText key="label" secondary={this.props.item.text} />,
+      <div style={{ flex: "10 1 auto" }} key="progressbar">
+        <LinearProgress mode="determinate" value={value} />
+      </div>
+    ];
+  }
+}

src/components/UiItemList/index.js

@@ -13,7 +13,7 @@ import { renderIcon } from "utils/parseIconName";
 import Slider from "material-ui-old/Slider";
 import MuiThemeProvider from "material-ui-old/styles/MuiThemeProvider";
 
-import { Toggle, DropDown, Link, Section, Text } from "./UiItem";
+import { Toggle, DropDown, Link, Section, Text, Progress } from "./UiItem";
 
 export type UiItemListProps = {
   controls: Array<ControlUI>,
@@ -76,6 +76,11 @@ export default class UiItemList extends React.Component<UiItemListProps> {
         state={this.props.state}
         onChangeState={this.props.onChangeState} />;
     }
+    case "progress": {
+      return <Progress item={control}
+        state={this.props.state}
+        onChangeState={this.props.onChangeState} />;
+    }
     default: {
       throw new Error(
         `Unknown UI type "${control.type}" for "${control.text}" component`