refactoring code

src/components/Widgets/EditableCell.jsx

@@ -0,0 +1,63 @@
+import { useSelector } from 'react-redux';
+import React from 'react';
+import { normalizeValue } from '@plone/volto/components/manage/Widgets/SelectUtils';
+import { useIntl } from 'react-intl';
+import moment from 'moment';
+import { getFieldType, getOnChange, getValue, getValueToRender } from './utils';
+
+export const EditableCell = ({
+  value: initialValue,
+  row: { index },
+  column: { id },
+  updateCell, // This is a custom function that we supplied to our table instance
+  selectedRow,
+  setSelectedRow,
+  schema,
+  reactSelect,
+  state: { pageIndex, pageSize },
+}) => {
+  const fieldSchema = { ...schema?.properties?.[id], id: id };
+  const locale = useSelector((state) => state.intl.locale);
+  moment.locale(locale);
+
+  const [value, setValue] = React.useState(initialValue);
+
+  const onBlur = () => {
+    updateCell(index, id, value);
+  };
+
+  React.useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+  const { choices, defaultValue, isMulti } = fieldSchema;
+  const intl = useIntl();
+  const fieldType = getFieldType(fieldSchema, reactSelect);
+  const Field = fieldType.Field;
+  const normalizedValue = normalizeValue(choices, value, intl);
+  const onChangeFunction = getOnChange(fieldType.type, setValue);
+  return selectedRow === index ? (
+    <Field
+      {...fieldType.properties}
+      value={getValue(fieldType.type, value, defaultValue, normalizedValue)}
+      onChange={(...args) => onChangeFunction({ ...args, isMulti: isMulti })}
+      onBlur={onBlur}
+    />
+  ) : (
+    <span
+      role="button"
+      className="editable-cell"
+      tabIndex={0}
+      onClick={() => {
+        setSelectedRow(index);
+      }}
+      onKeyDown={() => {
+        setSelectedRow(index);
+      }}
+      onFocus={() => {
+        setSelectedRow(index);
+      }}
+    >
+      {getValueToRender(fieldType, value, moment)}
+    </span>
+  );
+};

src/components/Widgets/EditableTable.jsx

@@ -1,197 +1,14 @@
-import {
-  ClearIndicator,
-  DropdownIndicator,
-  MenuList,
-  Option,
-  customSelectStyles,
-  selectTheme,
-} from '@plone/volto/components/manage/Widgets/SelectStyling';
-import { Input, Pagination, Table } from 'semantic-ui-react';
+import { Pagination, Table } from 'semantic-ui-react';
 import { usePagination, useTable } from 'react-table';
-import { useSelector } from 'react-redux';
 import { Icon } from '@plone/volto/components';
 import React from 'react';
 import { compose } from 'redux';
 import deleteSVG from '@plone/volto/icons/delete.svg';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-import { map } from 'lodash';
-import { normalizeValue } from '@plone/volto/components/manage/Widgets/SelectUtils';
 import paginationLeftSVG from '@plone/volto/icons/left-key.svg';
 import paginationRightSVG from '@plone/volto/icons/right-key.svg';
 import plusSVG from '@plone/volto/icons/circle-plus.svg';
-import { useIntl } from 'react-intl';
-import DatetimeWidget from '@plone/volto/components/manage/Widgets/DatetimeWidget';
-import moment from 'moment';
-const FieldEditor = (props) => {
-  const {
-    fieldSchema,
-    value,
-    onChange,
-    onChangeSelect,
-    onChangeDate,
-    onBlur,
-    reactSelect,
-  } = props;
-  const Select = reactSelect.default;
-
-  const {
-    type,
-    choices,
-    id,
-    minimum,
-    maximum,
-    defaultValue,
-    isMulti,
-  } = fieldSchema;
-  const intl = useIntl();
-  const normalizedValue = normalizeValue(choices, value, intl);
-  if (choices) {
-    const options = [
-      ...map(choices, (option) => ({
-        value: option[0],
-        label:
-          // Fix "None" on the serializer, to remove when fixed in p.restapi
-          option[1] !== 'None' && option[1] ? option[1] : option[0],
-      })),
-    ];
-    return (
-      <Select
-        id={`field-${id}`}
-        value={normalizedValue}
-        className="react-table-select-field"
-        theme={selectTheme}
-        isMulti={isMulti}
-        components={{
-          ...(choices?.length > 25 && {
-            MenuList,
-          }),
-          DropdownIndicator,
-          ClearIndicator,
-          Option: Option,
-        }}
-        options={options}
-        styles={customSelectStyles}
-        onChange={(e) => onChangeSelect(e, isMulti)}
-        onBlur={onBlur}
-      />
-    );
-  }
-  if (type === 'number') {
-    return (
-      <Input
-        id={`field-${id}`}
-        className="react-table-integer-field"
-        type="number"
-        min={minimum || null}
-        max={maximum || null}
-        value={value || defaultValue}
-        onChange={onChange}
-        onBlur={onBlur}
-      />
-    );
-  }
-  if (type === 'date') {
-    return (
-      <DatetimeWidget
-        id={`field-${id}`}
-        title="date"
-        value={value || defaultValue}
-        onChange={onChangeDate}
-        onBlur={onBlur}
-      />
-    );
-  }
-  return (
-    <Input
-      id={`field-${id}`}
-      type="text"
-      className="react-table-text-field"
-      fluid
-      value={value}
-      onChange={onChange}
-      onBlur={onBlur}
-    />
-  );
-};
-// Create an editable cell renderer
-const EditableCell = ({
-  value: initialValue,
-  row: { index },
-  column: { id },
-  updateCell, // This is a custom function that we supplied to our table instance
-  selectedRow,
-  setSelectedRow,
-  schema,
-  reactSelect,
-  state: { pageIndex, pageSize },
-}) => {
-  const fieldSchema = { ...schema?.properties?.[id], id: id };
-  const locale = useSelector((state) => state.intl.locale);
-  moment.locale(locale);
-
-  const [value, setValue] = React.useState(initialValue);
-  const onChange = (e) => {
-    setValue(e.target.value);
-  };
-
-  const onChangeSelect = (e, isMulti) => {
-    if (!isMulti) {
-      setValue(e.value);
-    } else {
-      setValue(e.map((value) => value.value));
-    }
-  };
-
-  const onChangeDate = (e, dateValue) => {
-    // console.log(dateValue);
-    setValue(dateValue);
-  };
-
-  const onBlur = () => {
-    updateCell(index, id, value);
-  };
-
-  React.useEffect(() => {
-    setValue(initialValue);
-  }, [initialValue]);
-  return selectedRow === index ? (
-    // eslint-disable-next-line jsx-a11y/no-autofocus
-    <FieldEditor
-      fieldSchema={fieldSchema}
-      value={value}
-      onChange={onChange}
-      onChangeSelect={onChangeSelect}
-      onChangeDate={onChangeDate}
-      onBlur={onBlur}
-      reactSelect={reactSelect}
-    />
-  ) : (
-    <span
-      role="button"
-      className="editable-cell"
-      tabIndex={0}
-      onClick={() => {
-        setSelectedRow(index);
-      }}
-      onKeyDown={() => {
-        setSelectedRow(index);
-      }}
-      onFocus={() => {
-        setSelectedRow(index);
-      }}
-    >
-      {fieldSchema.type === 'date' && value ? (
-        moment(value).format('LLL')
-      ) : !fieldSchema.isMulti ? (
-        value || <>&nbsp;</>
-      ) : value ? (
-        value.join(', ')
-      ) : (
-        <>&nbsp;</>
-      )}
-    </span>
-  );
-};
+import { EditableCell } from './EditableCell';
 
 const defaultColumn = {
   Cell: EditableCell,

src/components/Widgets/ReactTableWidget.jsx

@@ -51,7 +51,7 @@ const ReactDataTableWidget = (props) => {
 
   const intl = useIntl();
   const header_columns = schema.fieldsets[0].fields.map((field) => {
-    return { Header: schema.properties[field].title, accessor: field };
+    return { Header: schema.properties[field]?.title, accessor: field };
   });
 
   const tablecolumns = React.useMemo(