working on refactor from class to functional

material-table-core · Jan 13, 2021 · c4d510b · c4d510b
1 parent 5571ef3
commit c4d510b
Show file tree

Hide file tree

Showing 16 changed files with 1,090 additions and 218 deletions.
diff --git a/__tests__/demo/demo.js b/__tests__/demo/demo.js
@@ -1,33 +1,70 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { render } from 'react-dom';
 import MaterialTable from '../../src';
 import { ExportPdf, ExportCsv } from '../../exporters';
 
+const default_data = [
+  {
+    name: 'Bar',
+    sirname: 'Zab',
+    age: 44,
+    date: new Date('December 1, 1999')
+  },
+  { name: 'Baz', sirname: 'Oof', age: 34, date: new Date('1/1/1970') },
+  { name: 'Foo', sirname: 'Rab', age: 24, date: new Date(Date.now()) }
+];
+
+const default_cols = [
+  {
+    title: 'Given Name',
+    field: 'name',
+    customFilterAndSearch: (term, rowData) => term == rowData.name.length
+  },
+  { title: 'Sirname', field: 'sirname' },
+  { title: 'Age', field: 'age' },
+  { title: 'Date', field: 'date', type: 'date' }
+];
+
 const App = () => {
   const ref = React.useRef();
+  const [data, setData] = useState(default_data);
   return (
     <MaterialTable
       tableRef={ref}
-      data={[
-        {
-          name: 'Bar',
-          sirname: 'Zab',
-          age: 44,
-          date: new Date('December 1, 1999')
-        },
-        { name: 'Baz', sirname: 'Oof', age: 34, date: new Date('1/1/1970') },
-        { name: 'Foo', sirname: 'Rab', age: 24, date: new Date(Date.now()) }
-      ]}
-      columns={[
-        {
-          title: 'Given Name',
-          field: 'name',
-          customFilterAndSearch: (term, rowData) => term == rowData.name.length
-        },
-        { title: 'Sirname', field: 'sirname' },
-        { title: 'Age', field: 'age' },
-        { title: 'Date', field: 'date', type: 'date' }
-      ]}
+      data={data}
+      columns={default_cols}
+      editable={{
+        onRowAdd: (newData) =>
+          new Promise((resolve, reject) => {
+            setTimeout(() => {
+              setData([...data, newData]);
+
+              resolve();
+            }, 1000);
+          }),
+        onRowUpdate: (newData, oldData) =>
+          new Promise((resolve, reject) => {
+            setTimeout(() => {
+              const dataUpdate = [...data];
+              const index = oldData.tableData.id;
+              dataUpdate[index] = newData;
+              setData([...dataUpdate]);
+
+              resolve();
+            }, 1000);
+          }),
+        onRowDelete: (oldData) =>
+          new Promise((resolve, reject) => {
+            setTimeout(() => {
+              const dataDelete = [...data];
+              const index = oldData.tableData.id;
+              dataDelete.splice(index, 1);
+              setData([...dataDelete]);
+
+              resolve();
+            }, 1000);
+          })
+      }}
       options={{
         filtering: true,
         exportMenu: [
@@ -44,8 +81,12 @@ const App = () => {
       cellEditable={{
         onCellEditApproved: (newValue, oldValue, rowData, columnDef) => {
           return new Promise((resolve, reject) => {
-            console.log('newValue: ' + newValue);
-            setTimeout(resolve, 1000);
+            const datacopy = [...data];
+            const row = rowData.tableData.id;
+            const field = columnDef.field;
+            datacopy[row][field] = newValue;
+            setData(datacopy);
+            resolve();
           });
         }
       }}

diff --git a/src/components/MTableEditCell/index.js b/src/components/MTableEditCell/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { TableCell, CircularProgress } from '@material-ui/core';
 import { withTheme } from '@material-ui/core/styles';
@@ -9,6 +9,23 @@ function MTableEditCell(props) {
     value: props.rowData[props.columnDef.field]
   }));
 
+  useEffect(() => {
+    props.cellEditable
+      .onCellEditApproved(
+        state.value, // newValue
+        props.rowData[props.columnDef.field], // oldValue
+        props.rowData, // rowData with old value
+        props.columnDef // columnDef
+      )
+      .then(() => {
+        setState({ ...state, isLoading: false });
+        props.onCellEditFinished(props.rowData, props.columnDef);
+      })
+      .catch(() => {
+        setState({ ...state, isLoading: false });
+      });
+  }, []);
+
   const getStyle = () => {
     let cellStyle = {
       boxShadow: '2px 0px 15px rgba(125,147,178,.25)',
@@ -55,22 +72,7 @@ function MTableEditCell(props) {
   };
 
   const onApprove = () => {
-    setState({ ...state, isLoading: true }, () => {
-      props.cellEditable
-        .onCellEditApproved(
-          state.value, // newValue
-          props.rowData[props.columnDef.field], // oldValue
-          props.rowData, // rowData with old value
-          props.columnDef // columnDef
-        )
-        .then(() => {
-          setState({ ...state, isLoading: false });
-          props.onCellEditFinished(props.rowData, props.columnDef);
-        })
-        .catch(() => {
-          setState({ ...state, isLoading: false });
-        });
-    });
+    setState({ ...state, isLoading: true });
   };
 
   const onCancel = () => {

diff --git a/src/components/MTableEditField/BooleanField.js b/src/components/MTableEditField/BooleanField.js
@@ -0,0 +1,30 @@
+import React from 'react';
+
+export default function BooleanField(props) {
+  return (
+    <FormControl error={Boolean(props.error)} component="fieldset">
+      <FormGroup>
+        <FormControlLabel
+          label=""
+          control={
+            <Checkbox
+              {...props}
+              value={String(props.value)}
+              checked={Boolean(props.value)}
+              onChange={(event) => props.onChange(event.target.checked)}
+              style={{
+                padding: 0,
+                width: 24,
+                marginLeft: 9
+              }}
+              inputProps={{
+                'aria-label': props.columnDef.title
+              }}
+            />
+          }
+        />
+      </FormGroup>
+      <FormHelperText>{props.helperText}</FormHelperText>
+    </FormControl>
+  );
+}
diff --git a/src/components/MTableEditField/CurrencyField.js b/src/components/MTableEditField/CurrencyField.js
@@ -0,0 +1,31 @@
+import React from 'react';
+
+export default function CurrencyField(props) {
+  return (
+    <TextField
+      {...props}
+      placeholder={props.columnDef.editPlaceholder || props.columnDef.title}
+      style={{ float: 'right' }}
+      type="number"
+      value={props.value === undefined ? '' : props.value}
+      onChange={(event) => {
+        let value = event.target.valueAsNumber;
+        if (!value && value !== 0) {
+          value = undefined;
+        }
+        return props.onChange(value);
+      }}
+      InputProps={{
+        style: {
+          fontSize: 13,
+          textAlign: 'right'
+        }
+      }}
+      inputProps={{
+        'aria-label': props.columnDef.title
+      }}
+      onKeyDown={props.onKeyDown}
+      autoFocus={props.autoFocus}
+    />
+  );
+}
diff --git a/src/components/MTableEditField/DateField.js b/src/components/MTableEditField/DateField.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import DateFnsUtils from '@date-io/date-fns';
+import { MuiPickersUtilsProvider, DatePicker } from '@material-ui/pickers';
+
+export default function DateField({
+  columnDef,
+  value,
+  onChange,
+  locale,
+  ...rest
+}) {
+  const getProps = () => {
+    const {
+      columnDef,
+      rowData,
+      onRowDataChange,
+      errorState,
+      onBulkEditRowChanged,
+      scrollWidth,
+      ...remaining
+    } = rest;
+    return remaining;
+  };
+
+  const dateFormat =
+    columnDef.dateSetting && columnDef.dateSetting.format
+      ? columnDef.dateSetting.format
+      : 'dd.MM.yyyy';
+
+  const datePickerProps = getProps();
+
+  return (
+    <MuiPickersUtilsProvider utils={DateFnsUtils} locale={locale}>
+      <DatePicker
+        {...datePickerProps}
+        format={dateFormat}
+        value={value || null}
+        onChange={onChange}
+        clearable
+        InputProps={{
+          style: {
+            fontSize: 13
+          }
+        }}
+        inputProps={{
+          'aria-label': `${columnDef.title}: press space to edit`
+        }}
+      />
+    </MuiPickersUtilsProvider>
+  );
+}
diff --git a/src/components/MTableEditField/DateTimeField.js b/src/components/MTableEditField/DateTimeField.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import DateFnsUtils from '@date-io/date-fns';
+import { MuiPickersUtilsProvider, DateTimePicker } from '@material-ui/pickers';
+
+export default function DateTimeField(props) {
+  return (
+    <MuiPickersUtilsProvider utils={DateFnsUtils} locale={props.locale}>
+      <DateTimePicker
+        {...props}
+        format="dd.MM.yyyy HH:mm:ss"
+        value={props.value || null}
+        onChange={props.onChange}
+        clearable
+        InputProps={{
+          style: {
+            fontSize: 13
+          }
+        }}
+        inputProps={{
+          'aria-label': `${props.columnDef.title}: press space to edit`
+        }}
+      />
+    </MuiPickersUtilsProvider>
+  );
+}
diff --git a/src/components/MTableEditField/LookupField.js b/src/components/MTableEditField/LookupField.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+export default function LookupField(props) {
+  return (
+    <FormControl error={Boolean(props.error)}>
+      <Select
+        {...props}
+        value={props.value === undefined ? '' : props.value}
+        onChange={(event) => props.onChange(event.target.value)}
+        style={{
+          fontSize: 13
+        }}
+        SelectDisplayProps={{ 'aria-label': props.columnDef.title }}
+      >
+        {Object.keys(props.columnDef.lookup).map((key) => (
+          <MenuItem key={key} value={key}>
+            {props.columnDef.lookup[key]}
+          </MenuItem>
+        ))}
+      </Select>
+      {Boolean(helperText) && <FormHelperText>{helperText}</FormHelperText>}
+    </FormControl>
+  );
+}
diff --git a/src/components/MTableEditField/TextField.js b/src/components/MTableEditField/TextField.js
@@ -0,0 +1,32 @@
+import React from 'react';
+
+let renders = 0;
+
+export default function TextField(props) {
+  return (
+    <TextField
+      {...props}
+      fullWidth
+      style={props.columnDef.type === 'numeric' ? { float: 'right' } : {}}
+      type={props.columnDef.type === 'numeric' ? 'number' : 'text'}
+      placeholder={props.columnDef.editPlaceholder || props.columnDef.title}
+      value={props.value === undefined ? '' : props.value}
+      onChange={(event) =>
+        props.onChange(
+          props.columnDef.type === 'numeric'
+            ? event.target.valueAsNumber
+            : event.target.value
+        )
+      }
+      InputProps={{
+        style: {
+          minWidth: 50,
+          fontSize: 13
+        }
+      }}
+      inputProps={{
+        'aria-label': props.columnDef.title
+      }}
+    />
+  );
+}
diff --git a/src/components/MTableEditField/TimeField.js b/src/components/MTableEditField/TimeField.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import DateFnsUtils from '@date-io/date-fns';
+
+export default function TimeField(props) {
+  return (
+    <MuiPickersUtilsProvider utils={DateFnsUtils} locale={props.locale}>
+      <TimePicker
+        {...getProps()}
+        format="HH:mm:ss"
+        value={props.value || null}
+        onChange={props.onChange}
+        clearable
+        InputProps={{
+          style: {
+            fontSize: 13
+          }
+        }}
+        inputProps={{
+          'aria-label': `${props.columnDef.title}: press space to edit`
+        }}
+      />
+    </MuiPickersUtilsProvider>
+  );
+}