fix: Hook edit cell up to validate

material-table-core · Jun 27, 2021 · 88bb78f · 88bb78f
1 parent e0fa5ee
commit 88bb78f
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 59 deletions.
diff --git a/src/components/MTableEditRow/index.js b/src/components/MTableEditRow/index.js
@@ -5,6 +5,7 @@ import Typography from '@material-ui/core/Typography';
 import PropTypes from 'prop-types';
 import { byString, setByString } from '../../utils';
 import * as CommonValues from '../../utils/common-values';
+import { validateInput } from '../../utils/validate';
 
 function MTableEditRow(props) {
   const [state, setState] = useState(() => {
@@ -97,21 +98,7 @@ function MTableEditRow(props) {
         } else {
           const { editComponent, ...cellProps } = columnDef;
           const EditComponent = editComponent || props.components.EditField;
-          let error = { isValid: true, helperText: '' };
-          if (columnDef.validate) {
-            const validateResponse = columnDef.validate(state.data);
-            switch (typeof validateResponse) {
-              case 'object':
-                error = { ...validateResponse };
-                break;
-              case 'boolean':
-                error = { isValid: validateResponse, helperText: '' };
-                break;
-              case 'string':
-                error = { isValid: false, helperText: validateResponse };
-                break;
-            }
-          }
+          const error = validateInput(columnDef, state.data);
           return (
             <TableCell
               size={size}
@@ -172,18 +159,8 @@ function MTableEditRow(props) {
       ...props.localization
     };
     const isValid = props.columns.every((column) => {
-      if (column.validate) {
-        const response = column.validate(state.data);
-        switch (typeof response) {
-          case 'object':
-            return response.isValid;
-          case 'string':
-            return response.length === 0;
-          case 'boolean':
-            return response;
-        }
-      }
-      return true;
+      const error = validateInput(column, state.data);
+      return error.isValid;
     });
     const actions = [
       {

diff --git a/src/components/MTableEditRow/m-table-edit-row.js b/src/components/MTableEditRow/m-table-edit-row.js
@@ -32,6 +32,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { byString, setByString } from '../../utils';
 import * as CommonValues from '../../utils/common-values';
+import { validateInput } from '../../utils/validate';
 /* eslint-enable no-unused-vars */
 
 export default class MTableEditRow extends React.Component {
@@ -128,21 +129,7 @@ export default class MTableEditRow extends React.Component {
           const { editComponent, ...cellProps } = columnDef;
           const EditComponent =
             editComponent || this.props.components.EditField;
-          let error = { isValid: true, helperText: '' };
-          if (columnDef.validate) {
-            const validateResponse = columnDef.validate(this.state.data);
-            switch (typeof validateResponse) {
-              case 'object':
-                error = { ...validateResponse };
-                break;
-              case 'boolean':
-                error = { isValid: validateResponse, helperText: '' };
-                break;
-              case 'string':
-                error = { isValid: false, helperText: validateResponse };
-                break;
-            }
-          }
+          const error = validateInput(columnDef, this.state.data);
           return (
             <TableCell
               size={size}
@@ -206,19 +193,8 @@ export default class MTableEditRow extends React.Component {
       ...this.props.localization
     };
     const isValid = this.props.columns.every((column) => {
-      if (column.validate) {
-        const response = column.validate(this.state.data);
-        switch (typeof response) {
-          case 'object':
-            return response.isValid;
-          case 'string':
-            return response.length === 0;
-          case 'boolean':
-            return response;
-        }
-      } else {
-        return true;
-      }
+      const error = validateInput(column, this.state.data);
+      return error.isValid;
     });
     const actions = [
       {

diff --git a/src/components/m-table-edit-cell.js b/src/components/m-table-edit-cell.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import TableCell from '@material-ui/core/TableCell';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import { withTheme } from '@material-ui/core';
-
+import { validateInput } from '../utils/validate';
 class MTableEditCell extends React.Component {
   constructor(props) {
     super(props);
@@ -60,6 +60,11 @@ class MTableEditCell extends React.Component {
   };
 
   onApprove = () => {
+    const isValid = validateInput(this.props.columnDef, this.state.value)
+      .isValid;
+    if (!isValid) {
+      return;
+    }
     this.setState({ isLoading: true }, () => {
       this.props.cellEditable
         .onCellEditApproved(
@@ -85,7 +90,7 @@ class MTableEditCell extends React.Component {
     this.props.onCellEditFinished(this.props.rowData, this.props.columnDef);
   };
 
-  renderActions() {
+  renderActions(isValid) {
     if (this.state.isLoading) {
       return (
         <div style={{ display: 'flex', justifyContent: 'center', width: 60 }}>
@@ -99,7 +104,7 @@ class MTableEditCell extends React.Component {
         icon: this.props.icons.Check,
         tooltip: this.props.localization.saveTooltip,
         onClick: this.onApprove,
-        disabled: this.state.isLoading
+        disabled: this.state.isLoading || !isValid
       },
       {
         icon: this.props.icons.Clear,
@@ -119,12 +124,16 @@ class MTableEditCell extends React.Component {
   }
 
   render() {
+    const error = validateInput(this.props.columnDef, this.state.value);
+    console.log(error);
     return (
       <TableCell size={this.props.size} style={this.getStyle()} padding="none">
         <div style={{ display: 'flex', alignItems: 'center' }}>
           <div style={{ flex: 1, marginRight: 4 }}>
             <this.props.components.EditField
               columnDef={this.props.columnDef}
+              error={!error.isValid}
+              helperText={error.helperText}
               value={this.state.value}
               onChange={(value) => this.setState({ value })}
               onKeyDown={this.handleKeyDown}
@@ -133,7 +142,7 @@ class MTableEditCell extends React.Component {
               autoFocus
             />
           </div>
-          {this.renderActions()}
+          {this.renderActions(error.isValid)}
         </div>
       </TableCell>
     );

diff --git a/src/utils/validate.js b/src/utils/validate.js
@@ -0,0 +1,18 @@
+function validateInput(columnDef, data) {
+  if (columnDef.validate) {
+    const validateResponse = columnDef.validate(data);
+    switch (typeof validateResponse) {
+      case 'object':
+        return { ...validateResponse };
+      case 'boolean':
+        return { isValid: validateResponse, helperText: '' };
+      case 'string':
+        return { isValid: false, helperText: validateResponse };
+      default:
+        return { isValid: true, helperText: '' };
+    }
+  }
+  return { isValid: true, helperText: '' };
+}
+
+export { validateInput };