Cleanup? Help text, etc, but react fragments as help aren't working

Author: Christopher Whatley

.dir-locals.el

@@ -1,2 +1,2 @@
-((nil . ((eval . (add-to-list 'auto-mode-alist '("\\.js?\\'" . web-mode)))
+((nil . ((eval . (add-to-list 'auto-mode-alist '("\\.js?\\'" . rjsx-mode)))
          (compile-command . "npm run-script build"))))

.eslintrc

@@ -26,11 +26,6 @@
         "node": true
     },
     "extends": "eslint:recommended",
-    "ecmaFeatures": {
-        "modules": true,
-        "jsx": true,
-        "experimentalObjectRestSpread": true
-    },
     "plugins": [
         "jsx-a11y",
         "react"

src/FieldTemplate.js

@@ -1,50 +1,36 @@
 import { ADDITIONAL_PROPERTY_FLAG } from "react-jsonschema-form/lib/utils";
 import React from "react";
-import {
-  TextField,
-  FormLabel,
-  Typography,
-  FormHelperText,
-} from "@material-ui/core";
+import { TextField, FormLabel, Typography } from "@material-ui/core";
 
 export default function DefaultTemplate(props) {
   const {
     id,
     label,
     children,
-    rawErrors,
-    help,
     description,
     hidden,
     required,
     displayLabel,
     onKeyChange,
     schema,
-    uiSchema,
   } = props;
   if (hidden) {
     return children;
   }
 
-  let help_text = uiSchema["ui:help"];
-  let help_is_object = typeof help_text == "object";
-  let actual_help = help;
-  //console.log('help_text', typeof help_text, help_text)
-  if (help_text && !help_is_object) {
-    //console.log('replacing help', help_text);
-    actual_help = (
-      <Typography variant="caption" color="textSecondary">
-        {help_text}
+  function under_text(frag) {
+    return (
+      <Typography
+        variant="caption"
+        color="textSecondary"
+        style={{ paddingLeft: "16px" }}>
+        {frag}
       </Typography>
     );
-  } else if (help_is_object) {
-    actual_help = "";
   }
 
   const additional = schema.hasOwnProperty(ADDITIONAL_PROPERTY_FLAG);
   const keyLabel = `${label} Key`;
-  //console.log('schema', schema);
-  //console.log('uiSchema', uiSchema);
 
   function inner() {
     return (
@@ -62,10 +48,7 @@ export default function DefaultTemplate(props) {
           </React.Fragment>
         )}
         {children}
-        {displayLabel && description ? description : null}
-        {rawErrors &&
-          rawErrors.map(e => <FormHelperText error={true}>{e}</FormHelperText>)}
-        {actual_help}
+        {displayLabel && description ? under_text(description) : null}
       </React.Fragment>
     );
   }

src/widgets/BaseInput.js

@@ -20,7 +20,11 @@ function BaseInput(props) {
     schema,
     formContext,
     registry,
+    help,
+    rawHelp,
     rawErrors,
+    description,
+    uiSchema,
     ...inputProps
   } = props;
 
@@ -37,6 +41,8 @@ function BaseInput(props) {
       disabled={disabled}
       autoFocus={autofocus}
       fullWidth={true}
+      error={rawErrors && rawErrors.length > 0}
+      helperText={rawErrors ? rawErrors.join(", ") : ""}
       variant="outlined"
       value={value == null ? "" : value}
       {...inputProps}

src/widgets/CheckboxWidget.js

@@ -1,7 +1,12 @@
 import React from "react";
 import PropTypes from "prop-types";
 import DescriptionField from "../fields/DescriptionField.js";
-import { FormControlLabel, Checkbox } from "@material-ui/core";
+import {
+  FormControl,
+  FormControlLabel,
+  FormHelperText,
+  Checkbox,
+} from "@material-ui/core";
 
 function CheckboxWidget(props) {
   const {
@@ -12,12 +17,13 @@ function CheckboxWidget(props) {
     disabled,
     readonly,
     label,
+    rawErrors,
     autofocus,
     onChange,
   } = props;
 
   return (
-    <React.Fragment>
+    <FormControl error={!!rawErrors}>
       {schema.description && (
         <DescriptionField description={schema.description} />
       )}
@@ -35,7 +41,9 @@ function CheckboxWidget(props) {
         }
         label={label}
       />
-    </React.Fragment>
+      {rawErrors &&
+        rawErrors.map((e, i) => <FormHelperText key={i}>{e}</FormHelperText>)}
+    </FormControl>
   );
 }
 

src/widgets/CheckboxesWidget.js

@@ -4,6 +4,7 @@ import {
   FormControl,
   FormLabel,
   FormGroup,
+  FormHelperText,
   FormControlLabel,
   Checkbox,
 } from "@material-ui/core";
@@ -82,6 +83,8 @@ function CheckboxesWidget(props) {
           );
         })}
       </FormGroup>
+      {rawErrors &&
+        rawErrors.map((e, i) => <FormHelperText key={i}>{e}</FormHelperText>)}
     </FormControl>
   );
 }

src/widgets/RadioWidget.js

@@ -6,6 +6,7 @@ import {
   FormControl,
   FormControlLabel,
   FormLabel,
+  FormHelperText,
 } from "@material-ui/core";
 
 function RadioWidget(props) {
@@ -36,7 +37,7 @@ function RadioWidget(props) {
       margin="dense"
       fullWidth={true}
       margin="normal"
-      error={!!rawErrors}
+      error={rawErrors && rawErrors.length}
       required={required}
       className={`rjsf-radio ` + classNames}
       style={{ paddingLeft: "16px" }}>
@@ -60,10 +61,11 @@ function RadioWidget(props) {
               autoFocus={autofocus && i === 0}
             />
           );
-
           return radio;
         })}
       </RadioGroup>
+      {rawErrors &&
+        rawErrors.map((e, i) => <FormHelperText key={i}>{e}</FormHelperText>)}
     </FormControl>
   );
 }

src/widgets/SelectWidget.js

@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 import {
+  FormHelperText,
   FormControl,
   MenuItem,
   Select,
@@ -160,6 +161,8 @@ class SelectWidget extends React.Component {
             );
           })}
         </Select>
+        {rawErrors &&
+          rawErrors.map((e, i) => <FormHelperText key={i}>{e}</FormHelperText>)}
       </FormControl>
     );
   }