update TextEditor to use new editor API

www/src/components/Table/editors/TextEditor.tsx

@@ -1,24 +1,21 @@
-import React from "react";
+import React, { useRef, useEffect } from "react";
 import { EditorProps } from "react-data-grid";
 
-import {
-  withStyles,
-  WithStyles,
-  createStyles,
-  TextField,
-} from "@material-ui/core";
+import { makeStyles, createStyles, TextField } from "@material-ui/core";
 
 import { FieldType } from "constants/fields";
 import { getCellValue } from "utils/fns";
 
-const styles = (theme) =>
+const useStyles = makeStyles((theme) =>
   createStyles({
     root: {
-      width: "calc(100% - 1px)",
+      margin: theme.spacing(0, -1.5),
+      width: `calc(100% + ${theme.spacing(1.5) * 2}px)`,
       height: "100%",
 
-      background: theme.palette.background.paper,
-      marginRight: 1,
+      backgroundColor:
+        theme.palette.background.elevation?.[8] ??
+        theme.palette.background.paper,
     },
 
     inputBase: {
@@ -30,89 +27,78 @@ const styles = (theme) =>
     input: {
       paddingBottom: theme.spacing(0.75), // Align baselines
       letterSpacing: "inherit", // Prevent text jumping
+      height: "100%", // Stop text clipping
     },
-  });
+  })
+);
 
-class TextEditor extends React.Component<
-  EditorProps<any, any> & WithStyles<typeof styles>
-> {
-  constructor(props) {
-    super(props);
+export default function TextEditor({ row, column }: EditorProps<any>) {
+  const classes = useStyles();
+
+  const cellValue = getCellValue(row, column.key);
+  const defaultValue =
+    (column as any).type === FieldType.percentage &&
+    typeof cellValue === "number"
+      ? cellValue * 100
+      : cellValue;
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    return () => {
+      const newValue = inputRef.current?.value;
+      if (newValue !== undefined) row.ref.update({ [column.key]: newValue });
+    };
+  }, []);
+
+  let inputType = "text";
+  switch ((column as any).type) {
+    case FieldType.email:
+      inputType = "email";
+      break;
+    case FieldType.phone:
+      inputType = "tel";
+      break;
+    case FieldType.url:
+      inputType = "url";
+      break;
+    case FieldType.number:
+    case FieldType.percentage:
+      inputType = "number";
+      break;
+
+    default:
+      break;
   }
 
-  inputRef = React.createRef<HTMLInputElement>();
+  const { maxLength } = (column as any).config;
 
-  getInputNode() {
-    return this.inputRef?.current;
-  }
-
-  getValue() {
-    if ((this.props.column as any).type === FieldType.number)
-      return Number(this.inputRef?.current?.value);
-
-    if ((this.props.column as any).type === FieldType.percentage)
-      return Number(this.inputRef?.current?.value) / 100;
-
-    return this.inputRef?.current?.value;
-  }
-
-  render() {
-    const {
-      classes,
-      row,
-      column, //value
-    } = this.props;
-    const value = getCellValue(row, column.key as string);
-    let inputType = "text";
-    switch ((column as any).type) {
-      case FieldType.email:
-        inputType = "email";
-        break;
-      case FieldType.phone:
-        inputType = "tel";
-        break;
-      case FieldType.url:
-        inputType = "url";
-        break;
-      case FieldType.number:
-      case FieldType.percentage:
-        inputType = "number";
-        break;
-
-      default:
-        break;
-    }
-    const { maxLength } = (column as any).config;
-    return (
-      <TextField
-        defaultValue={
-          (column as any).type === FieldType.percentage &&
-          typeof value === "number"
-            ? value * 100
-            : value
+  return (
+    <TextField
+      defaultValue={defaultValue}
+      type={inputType}
+      fullWidth
+      variant="standard"
+      inputProps={{
+        ref: inputRef,
+        maxLength: maxLength,
+      }}
+      className={classes.root}
+      InputProps={{
+        classes: { root: classes.inputBase, input: classes.input },
+        endAdornment:
+          (column as any).type === FieldType.percentage ? "%" : undefined,
+      }}
+      autoFocus
+      onKeyDown={(e) => {
+        if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+          e.stopPropagation();
         }
-        type={inputType}
-        fullWidth
-        onBlur={(e) => {
-          row.ref.update({ [column.key]: e.target.value });
-        }}
-        variant="standard"
-        inputProps={{
-          ref: this.inputRef,
-          maxLength: maxLength,
-        }}
-        className={classes.root}
-        InputProps={{
-          classes: {
-            root: classes.inputBase,
-            input: classes.input,
-          },
-          endAdornment:
-            (column as any).type === FieldType.percentage ? "%" : undefined,
-        }}
-      />
-    );
-  }
-}
 
-export default withStyles(styles)(TextEditor);
+        if (e.key === "Escape") {
+          (e.target as any).value = defaultValue;
+        }
+      }}
+    />
+  );
+}