@applica-software-guru/react-admin 1.3.125 → 1.3.126

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.3.125",
+  "version": "1.3.126",
   "private": false,
   "repository": {
     "type": "git",

package/src/components/ra-forms/TableForm/TableFormIterator.tsx

@@ -15,14 +15,14 @@ import {
   TableRow,
   Typography
 } from '@mui/material';
-import { RaRecord, useRecordContext, useTranslate, useTranslateLabel } from 'ra-core';
+import { FormDataConsumer, RaRecord, useRecordContext, useTranslate, useTranslateLabel } from 'ra-core';
 import { styled, useTheme } from '@mui/material/styles';
 
 import { PlusCircleOutlined } from '@ant-design/icons';
 import PropTypes from 'prop-types';
 import { TableFormIteratorContext } from './TableFormIteratorContext';
 import { TableFormIteratorItem } from './TableFormIteratorItem';
-import { UseFieldArrayReturn } from 'react-hook-form';
+import { UseFieldArrayReturn, useFormContext } from 'react-hook-form';
 import get from 'lodash/get';
 
 /**
@@ -44,13 +44,27 @@ import get from 'lodash/get';
  * @returns
  */
 const TableFormIterator = (props: TableFormIteratorProps) => {
-  const { children, resource, source, label, disableActions = false, disableAdd = false, disableRemove = false, className, empty, template = {} } = props;
+  const {
+    children,
+    resource,
+    source,
+    label,
+    disableActions = false,
+    disableAdd = false,
+    disableRemove = false,
+    className,
+    empty,
+    template = {}
+  } = props;
   const [confirmIsOpen, setConfirmIsOpen] = useState<boolean>(false);
-  const { fields, remove, replace } = useArrayInput(props);
+  const { fields, remove, replace, append } = useArrayInput(props);
+  const { resetField } = useFormContext();
+
   const theme = useTheme();
   const translate = useTranslate();
   const record = useRecordContext(props);
-  const initialDefaultValue = useRef({});
+  const initialDefaultValue = useRef(template || {});
+
   const translateLabel = useTranslateLabel();
   const removeField = useCallback(
     (index: number) => {
@@ -66,6 +80,50 @@ const TableFormIterator = (props: TableFormIteratorProps) => {
     for (const k in initialDefaultValue.current) initialDefaultValue.current[k] = null;
   }
 
+  const addField = useCallback(
+    (item: any = undefined) => {
+      let defaultValue = item;
+      if (item == null) {
+        defaultValue = initialDefaultValue.current;
+        if (
+          Children.count(children) === 1 &&
+          React.isValidElement(Children.only(children)) &&
+          // @ts-ignore
+          !Children.only(children).props.source &&
+          // Make sure it's not a FormDataConsumer
+          // @ts-ignore
+          Children.map(children, (input) => React.isValidElement(input) && input.type !== FormDataConsumer).some(Boolean)
+        ) {
+          // ArrayInput used for an array of scalar values
+          // (e.g. tags: ['foo', 'bar'])
+          defaultValue = '';
+        } else {
+          // ArrayInput used for an array of objects
+          // (e.g. authors: [{ firstName: 'John', lastName: 'Doe' }, { firstName: 'Jane', lastName: 'Doe' }])
+          defaultValue = defaultValue || ({} as Record<string, unknown>);
+          Children.forEach(children, (input) => {
+            if (React.isValidElement(input) && input.type !== FormDataConsumer && input.props.source) {
+              defaultValue[input.props.source] = input.props.defaultValue ?? null;
+            }
+          });
+        }
+      }
+      const newField = { ...defaultValue, ...template };
+      append(newField);
+      // Make sure the newly added inputs are not considered dirty by react-hook-form
+      resetField(`${source}.${fields.length}`, { defaultValue });
+    },
+    [append, children, resetField, source, fields.length, template]
+  );
+
+  // add field and call the onClick event of the button passed as addButton prop
+  const handleAddButtonClick = (originalOnClickHandler: any) => (event: MouseEvent) => {
+    addField();
+    if (originalOnClickHandler) {
+      originalOnClickHandler(event);
+    }
+  };
+
   const handleArrayClear = useCallback(() => {
     replace([]);
     setConfirmIsOpen(false);
@@ -95,7 +153,7 @@ const TableFormIterator = (props: TableFormIteratorProps) => {
           source,
           disableAdd,
           template,
-          addButton: props?.addButton,
+          onClick: handleAddButtonClick((props?.addButton as any)?.props?.onClick)
         })}
 
         <TableContainer component={Paper} sx={{ mt: 2, border: `1px solid ${tableBorderColor}` }}>
@@ -177,34 +235,25 @@ const TableFormIterator = (props: TableFormIteratorProps) => {
 };
 
 const AddTableRow = (props: any) => {
-  const { label, disableAdd, template = {} } = props;
-  const { append } = useArrayInput(props);
+  const { label, disableAdd, onClick } = props;
   const theme = useTheme();
   // @ts-ignore
   const tableBorderColor = theme.palette.mode === 'dark' ? theme.palette.grey.A400 : theme.palette.grey.A800;
   const iconColor = theme.palette.mode === 'light' ? '#000000' : '#FFFFFF';
 
-  const handleAddButtonClick = useCallback((
-    originalOnClickHandler: React.MouseEventHandler<Element>
-  ) => (event: React.MouseEvent<Element, MouseEvent>) => {
-    append(template);
-    originalOnClickHandler && originalOnClickHandler(event);
-  }, [append, template]);
-
   return (
     <Stack justifyContent={'space-between'} alignItems={'center'} flexDirection={'row'}>
-      <Typography>{label}</Typography>
-      {!disableAdd && (
-        React.isValidElement(props?.addButton) ?
+      {label !== false && <Typography>{label}</Typography>}
+      {!disableAdd &&
+        (React.isValidElement(props?.addButton) ? (
           React.cloneElement(props?.addButton, {
-            onClick: handleAddButtonClick(
-              props?.addButton?.props.onClick
-            ),
-          }) :
-          <IconButton size="small" color="secondary" sx={{ border: `1px solid ${tableBorderColor}` }} onClick={() => append(template)}>
+            onClick: onClick
+          })
+        ) : (
+          <IconButton size="small" color="secondary" sx={{ border: `1px solid ${tableBorderColor}` }} onClick={onClick}>
             <PlusCircleOutlined style={{ color: iconColor }} />
           </IconButton>
-      )}
+        ))}
     </Stack>
   );
 };
@@ -222,7 +271,7 @@ const StyledTableFormIterator = styled(TableFormIterator, {
 }));
 
 AddTableRow.propTypes = {
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   source: PropTypes.string,
   defaultValue: PropTypes.any
 };
@@ -237,7 +286,7 @@ TableFormIterator.propTypes = {
   formState: PropTypes.object,
   record: PropTypes.object,
   source: PropTypes.string,
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   resource: PropTypes.string,
   translate: PropTypes.func,
   disableAdd: PropTypes.bool,
@@ -261,7 +310,7 @@ export interface TableFormIteratorProps extends Partial<UseFieldArrayReturn> {
     submitFailed?: boolean;
   };
   record?: RaRecord;
-  label?: string;
+  label?: string | boolean;
   resource?: string;
   source?: string;
   sx?: SxProps;

package/src/components/ra-forms/TableForm/TableFormIteratorItem.tsx

@@ -47,14 +47,14 @@ export const TableFormIteratorItem = React.forwardRef((props: TableFormIteratorI
               resource,
               disabled,
               ...inputProps,
-              label: false
+              label: ''
             })}
           </TableCell>
         );
       })}
 
       {!disableActions && (
-        <TableCell sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', border: 0, pt: 2 }}>
+        <TableCell sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', border: 0, pt: 2.5 }}>
           <ActionsMenu horizontal>
             <Typography color="error" onClick={() => setConfirmIsOpen(true)}>
               {translate('ra.action.delete')}