Fix range widget

Author: Christopher Whatley

package-lock.json

@@ -45,6 +45,7 @@
   "dependencies": {
     "@material-ui/core": "^3.5.1",
     "@material-ui/icons": "^3.0.1",
+    "@material-ui/lab": "^3.0.0-alpha.25",
     "ajv": "^5.2.3",
     "babel-runtime": "^6.26.0",
     "core-js": "^2.5.7",

package.json

@@ -44,7 +44,7 @@ function DefaultArrayItem(props) {
     fontWeight: "bold",
   };
   return (
-    <Grid container spacing="12" key={props.index}>
+    <Grid container spacing={16} key={props.index}>
       <Grid item xs={props.hasToolbar ? 9 : 12}>
         {props.children}
       </Grid>
@@ -154,15 +154,15 @@ function DefaultNormalArrayFieldTemplate(props) {
 
       <Grid
         container
-        spacing={12}
+        spacing={16}
         className="array-item-list"
         key={`array-item-list-${props.idSchema.$id}`}>
         {props.items && props.items.map(p => DefaultArrayItem(p))}
 
         {props.canAdd && (
           <React.Fragment>
-            <Grid item xs="10" />
-            <Grid item xs="2">
+            <Grid item xs={10} />
+            <Grid item xs={2}>
               <AddButton
                 className="array-item-add"
                 onClick={props.onAddClick}

src/ArrayFieldTemplate.js

@@ -33,6 +33,7 @@ export default function DefaultTemplate(props) {
     let map = {
       textarea: true,
       checkboxes: true,
+      range: true,
     };
     console.log("mapped", map[l]);
     return !map[l];

src/FieldTemplate.js

@@ -9,11 +9,10 @@ import mui_fields from "./fields";
 import mui_widgets from "./widgets";
 
 export default class MuiForm extends Form {
-  constructor(props) {
-    let newProps = { ...props };
-    super(newProps);
-    this.props.ErrorList = ErrorList;
-  }
+  static defaultProps = {
+    ErrorList: ErrorList,
+    ...Form.defaultProps,
+  };
 
   getRegistry() {
     const { fields, widgets } = getDefaultRegistry();

src/MuiForm.js

@@ -1,21 +1,22 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { Slider } from "@material-ui/lab";
+import { Grid, Typography } from "@material-ui/core";
 
 import { rangeSpec } from "react-jsonschema-form/lib/utils";
 
 function RangeWidget(props) {
-  const {
-    schema,
-    value,
-    registry: {
-      widgets: { BaseInput },
-    },
-  } = props;
+  const { schema, value } = props;
+
   return (
-    <div className="field-range-wrapper">
-      <BaseInput type="range" {...props} {...rangeSpec(schema)} />
-      <span className="range-view">{value}</span>
-    </div>
+    <Grid container style={{ paddingTop: "12px" }}>
+      <Grid item xs={11}>
+        <Slider value={value} {...props} {...rangeSpec(schema)} />
+      </Grid>
+      <Grid item xs={1}>
+        <Typography>{value}</Typography>
+      </Grid>
+    </Grid>
   );
 }