@applica-software-guru/react-admin 1.5.262 → 1.5.263

package/package.json

@@ -106,5 +106,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.262"
+  "version": "1.5.263"
 }

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

@@ -0,0 +1,34 @@
+import { PlusCircleOutlined } from '@ant-design/icons';
+import { IconButton, Stack, Typography, useTheme } from '@mui/material';
+import React from 'react';
+
+function AddTableRow(props: any): JSX.Element {
+  const { label, disableAdd, onClick, inset } = 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';
+
+  return (
+    <Stack
+      justifyContent={'space-between'}
+      alignItems={'center'}
+      flexDirection={'row'}
+      sx={inset ? { p: 2.5 } : { pt: 2 }}
+    >
+      {label !== false && <Typography>{label}</Typography>}
+      {!disableAdd &&
+        (React.isValidElement(props?.customButton) ? (
+          React.cloneElement(props?.customButton, {
+            onClick: onClick
+          })
+        ) : (
+          <IconButton color="secondary" sx={{ border: `1px solid ${tableBorderColor}` }} onClick={onClick}>
+            <PlusCircleOutlined style={{ color: iconColor }} />
+          </IconButton>
+        ))}
+    </Stack>
+  );
+}
+
+export { AddTableRow };

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

@@ -0,0 +1,58 @@
+import { AddTableRow } from './AddTableRow';
+import { Dialog } from '@mui/material';
+import { CreateContextProvider, SaveHandler } from 'ra-core';
+import React from 'react';
+import { useArrayInput } from 'react-admin';
+
+interface CreateButtonProps {
+  label: string;
+  disableAdd?: boolean;
+  inset?: boolean;
+  source?: string;
+  template?: any;
+  children: React.ReactNode;
+}
+
+function CreateButton(props: CreateButtonProps): JSX.Element {
+  const { label, disableAdd, inset, source, template } = props;
+  const [open, setOpen] = React.useState(false);
+  const { append } = useArrayInput();
+
+  const toggleOpen = React.useCallback(() => {
+    setOpen((prev) => !prev);
+  }, [setOpen]);
+
+  const handleSave = React.useCallback(
+    (data: any) => {
+      setOpen(false);
+      append(data);
+      return Promise.resolve();
+    },
+    [setOpen, append]
+  );
+
+  return (
+    <>
+      {React.cloneElement(<AddTableRow />, {
+        label,
+        source,
+        disableAdd,
+        template,
+        onClick: toggleOpen,
+        inset
+      })}
+      <Dialog open={open} onClose={toggleOpen} maxWidth="xs">
+        <CreateContextProvider
+          // @ts-ignore
+          value={{
+            save: handleSave as SaveHandler<any>
+          }}
+        >
+          {props.children}
+        </CreateContextProvider>
+      </Dialog>
+    </>
+  );
+}
+
+export { CreateButton };

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

@@ -0,0 +1,42 @@
+import { useTableFormIteratorItem } from './TableFormIteratorItemContext';
+import { Button, Dialog } from '@mui/material';
+import React from 'react';
+import { EditContextProvider, SaveHandler, useArrayInput, useTranslate } from 'react-admin';
+
+function EditButton(props: any) {
+  const { children } = props;
+  const { item, index } = useTableFormIteratorItem();
+  const [open, setOpen] = React.useState(false);
+  const { update } = useArrayInput();
+  const translate = useTranslate();
+
+  const handleSave: SaveHandler<any> = React.useCallback(
+    (data) => {
+      setOpen(false);
+      update(index, data);
+      return Promise.resolve();
+    },
+    [index, update]
+  );
+
+  return (
+    <>
+      <Button color="primary" onClick={() => setOpen(true)} sx={{ justifyContent: 'flex-start' }}>
+        {translate('ra.action.edit')}
+      </Button>
+      <Dialog open={open} onClose={() => setOpen(false)} maxWidth="xs" fullWidth>
+        <EditContextProvider
+          // @ts-ignore
+          value={{
+            record: item,
+            save: handleSave
+          }}
+        >
+          {children}
+        </EditContextProvider>
+      </Dialog>
+    </>
+  );
+}
+
+export { EditButton };

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

@@ -0,0 +1,23 @@
+import React, { Children } from 'react';
+import { useRecordContext } from 'react-admin';
+import { useFormContext } from 'react-hook-form';
+
+interface FieldProps {
+  source: string;
+  children: React.ReactNode;
+}
+
+interface ChildProps {
+  source: string;
+  record: Record<string, any>;
+}
+
+function Field({ source, children }: FieldProps): JSX.Element | null {
+  const Child = Children.only(children) as React.ReactElement<ChildProps>;
+  const { getValues } = useFormContext();
+  const record = useRecordContext({ record: getValues() });
+
+  return React.isValidElement(Child) ? React.cloneElement(Child, { source, record }) : null;
+}
+
+export { Field };

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

@@ -1,11 +1,12 @@
+import { Field } from './Field';
+import { AddTableRow } from './AddTableRow';
+import { CreateButton } from './CreateButton';
+import { EditButton } from './EditButton';
 import { ActionsMenu } from '@/components/ActionsMenu';
 import { TableFormIteratorContext } from '@/components/ra-forms/TableForm/TableFormIteratorContext';
 import { TableFormIteratorItem } from '@/components/ra-forms/TableForm/TableFormIteratorItem';
-import { PlusCircleOutlined } from '@ant-design/icons';
 import {
-  IconButton,
   Paper,
-  Stack,
   SxProps,
   Table,
   TableBody,
@@ -16,23 +17,24 @@ import {
   Typography
 } from '@mui/material';
 import { styled, useTheme } from '@mui/material/styles';
-import get from 'lodash/get';
-import { FormDataConsumer, RaRecord, useRecordContext, useTranslate, useTranslateLabel } from 'ra-core';
+import { FormDataConsumer, RaRecord, useTranslate, useTranslateLabel } from 'ra-core';
 import * as React from 'react';
 import { Children, ReactElement, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
 import { Confirm, useArrayInput } from 'react-admin';
 import { UseFieldArrayReturn, useFormContext } from 'react-hook-form';
 
 /**
+ * How to use TableFormIterator:
  *
  * @example
  *  <Grid container>
  *    <Grid item xs={12}>
  *       <ArrayInput label={false} source="descriptor.fields">
- *           <TableFormIterator template={{ property: 'FIELD' }} label="Catalogo proprietà"> // template: default value for new row
+ *           <TableFormIterator label="Property catalog">
  *               <TextInput label="Name" source={'name'} validate={required()} />
- *               <TextInput source={'denomination'} helperText={false} />
+ *               <TextInput label="Denomination" source={'denomination'} helperText={false} />
  *               <SelectInput choices={FieldTypes} source={'type'} helperText={false} />
+ *               {...}
  *            </TableFormIterator>
  *       </ArrayInput>
  *     </Grid>
@@ -50,15 +52,14 @@ function RawTableFormIterator(props: TableFormIteratorProps): ReactElement | nul
     className,
     empty,
     template = {},
+    addButton = <AddTableRow />,
     inset
   } = props;
   const [confirmIsOpen, setConfirmIsOpen] = useState<boolean>(false);
   const { fields, remove, replace, append } = useArrayInput(props);
   const { resetField } = useFormContext();
-
   const theme = useTheme();
   const translate = useTranslate();
-  const record = useRecordContext(props);
   const initialDefaultValue = useRef(template || {});
 
   const translateLabel = useTranslateLabel();
@@ -129,9 +130,6 @@ function RawTableFormIterator(props: TableFormIteratorProps): ReactElement | nul
     setConfirmIsOpen(false);
   }, [replace]);
 
-  // @ts-ignore
-  const records = get(record, source);
-
   const context = useMemo(
     () => ({
       total: fields.length,
@@ -149,12 +147,15 @@ function RawTableFormIterator(props: TableFormIteratorProps): ReactElement | nul
     // @ts-ignore
     <TableFormIteratorContext.Provider value={context}>
       <div className={className}>
-        {React.cloneElement(<AddTableRow />, {
+        {React.cloneElement(addButton, {
           label,
           source,
           disableAdd,
           template,
-          onClick: handleAddButtonClick((props?.addButton as any)?.props?.onClick),
+          onClick:
+            addButton?.type !== CreateButton
+              ? handleAddButtonClick((props?.addButton as any)?.props?.onClick)
+              : undefined,
           inset
         })}
 
@@ -173,6 +174,9 @@ function RawTableFormIterator(props: TableFormIteratorProps): ReactElement | nul
               <TableRow>
                 {/** @ts-ignore */}
                 {Children.map(children, (input: ReactElement, index) => {
+                  if (input.type === EditButton) {
+                    return null;
+                  }
                   if (!React.isValidElement<any>(input)) {
                     return null;
                   }
@@ -185,18 +189,17 @@ function RawTableFormIterator(props: TableFormIteratorProps): ReactElement | nul
                   );
                 })}
 
-                {!disableRemove &&
-                  (showClearAllButton ? (
-                    <TableCell key="actions" sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-                      <ActionsMenu horizontal>
-                        <Typography color="error" onClick={() => setConfirmIsOpen(true)}>
-                          {translate('ra.action.delete')}
-                        </Typography>
-                      </ActionsMenu>
-                    </TableCell>
-                  ) : (
-                    <TableCell key="empty_actions" />
-                  ))}
+                {!disableRemove && showClearAllButton ? (
+                  <TableCell key="actions" sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                    <ActionsMenu horizontal>
+                      <Typography color="error" onClick={() => setConfirmIsOpen(true)}>
+                        {translate('ra.action.delete')}
+                      </Typography>
+                    </ActionsMenu>
+                  </TableCell>
+                ) : (
+                  <TableCell key="empty_actions" />
+                )}
               </TableRow>
             </TableHead>
 
@@ -223,7 +226,7 @@ function RawTableFormIterator(props: TableFormIteratorProps): ReactElement | nul
                       index={index}
                       member={`${source}.${index}`}
                       onRemoveField={removeField}
-                      record={(records && records[index]) || {}}
+                      record={(fields && fields[index]) || {}}
                       // @ts-ignore
                       resource={resource}
                       // @ts-ignore
@@ -251,35 +254,6 @@ function RawTableFormIterator(props: TableFormIteratorProps): ReactElement | nul
   ) : null;
 }
 
-function AddTableRow(props: any): JSX.Element {
-  const { label, disableAdd, onClick, inset } = 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';
-
-  return (
-    <Stack
-      justifyContent={'space-between'}
-      alignItems={'center'}
-      flexDirection={'row'}
-      sx={inset ? { p: 2.5 } : { pt: 2 }}
-    >
-      {label !== false && <Typography>{label}</Typography>}
-      {!disableAdd &&
-        (React.isValidElement(props?.addButton) ? (
-          React.cloneElement(props?.addButton, {
-            onClick: onClick
-          })
-        ) : (
-          <IconButton color="secondary" sx={{ border: `1px solid ${tableBorderColor}` }} onClick={onClick}>
-            <PlusCircleOutlined style={{ color: iconColor }} />
-          </IconButton>
-        ))}
-    </Stack>
-  );
-}
-
 const TableFormIterator = styled(RawTableFormIterator, { slot: 'Root' })(({ theme }) => ({
   '& > div.MuiPaper-root': {
     overflowX: 'auto',
@@ -302,12 +276,23 @@ interface TableFormIteratorProps extends Partial<UseFieldArrayReturn> {
   disableAdd?: boolean;
   disableRemove?: boolean;
   enableClearAll?: boolean;
+  /**
+   * Adding the template prop will allow to set a default value for the new row.
+   *
+   * @example
+   *  <Grid container>
+   *    <Grid item xs={12}>
+   *       <ArrayInput label={false} source="descriptor.fields">
+   *           <TableFormIterator template={{ property: 'FIELD' }} label="Property catalog">
+   *               <TextInput label="Name" source={'name'} validate={required()} />
+   *               <TextInput source={'denomination'} helperText={false} />
+   *               <SelectInput choices={FieldTypes} source={'type'} helperText={false} />
+   *            </TableFormIterator>
+   *       </ArrayInput>
+   *     </Grid>
+   *   </Grid>
+   */
   template?: object;
-  meta?: {
-    // the type defined in FieldArrayRenderProps says error is boolean, which is wrong.
-    error?: any;
-    submitFailed?: boolean;
-  };
   record?: RaRecord;
   label?: string | boolean;
   resource?: string;
@@ -317,5 +302,89 @@ interface TableFormIteratorProps extends Partial<UseFieldArrayReturn> {
   inset?: boolean;
 }
 
-export { TableFormIterator };
+type ITableForm = typeof TableFormIterator & {
+  /**
+   * TableFormiterator allows to insert an addButton which will render the default btn and open a dialog with the form fields passed as children.
+   *
+   * @example
+   *  <Grid container>
+   *    <Grid item xs={12}>
+   *       <ArrayInput label={false} source="descriptor.fields">
+   *           <TableFormIterator
+   *              addButton={<TableFormIterator.CreateButton>
+   *                <TextInput label="Name" source={'name'} validate={required()} />
+   *                <SelectInput choices={FieldTypes} source={'type'} helperText={false} />
+   *                </TableFormIterator.CreateButton>}
+   *              label="Property catalog">
+   *               <TextInput label="Name" source={'name'} validate={required()} />
+   *               <TextInput label="Denomination" source={'denomination'} helperText={false} />
+   *               <SelectInput choices={FieldTypes} source={'type'} helperText={false} />
+   *            </TableFormIterator>
+   *       </ArrayInput>
+   *     </Grid>
+   *   </Grid>
+   */
+  CreateButton: typeof CreateButton;
+
+  /**
+   * TableFormiterator allows a child EditButton which will render an edit button in the ActionsMenu of each row.
+   * The EditButton will open a dialog with the form fields passed as children.
+   *
+   * @example
+   *  <Grid container>
+   *    <Grid item xs={12}>
+   *       <ArrayInput label={false} source="descriptor.fields">
+   *           <TableFormIterator label="Property catalog">
+   *
+   *               <TableFormIterator.EditButton>
+   *                  <TextInput label="Name" source={'name'} validate={required()} />
+   *                  <SelectInput choices={FieldTypes} source={'type'} helperText={false} />
+   *               </TableFormIterator.EditButton>
+   *
+   *               <TextInput label="Name" source={'name'} validate={required()} />
+   *               <TextInput label="Denomination" source={'denomination'} helperText={false} />
+   *               <SelectInput choices={FieldTypes} source={'type'} helperText={false} />
+   *            </TableFormIterator>
+   *       </ArrayInput>
+   *     </Grid>
+   *   </Grid>
+   */
+  EditButton: typeof EditButton;
+  /**
+   * TableFormiterator allows a child Field which will render a read-only field in the Table with a custom record context.
+   * The record context will overwritthe by getValues() of useFormContext() hook.
+   *
+   * @example
+   *  <Grid container>
+   *    <Grid item xs={12}>
+   *       <ArrayInput label={false} source="descriptor.fields">
+   *           <TableFormIterator label="Property catalog">
+   *
+   *               <TableFormIterator.EditButton>
+   *                  <TextInput label="Name" source={'name'} validate={required()} />
+   *                  <SelectInput choices={FieldTypes} source={'type'} helperText={false} />
+   *               </TableFormIterator.EditButton>
+   *
+   *               <TableFormIterator.Field source="name">
+   *                  <TextField />
+   *               </TableFormIterator.Field>
+   *               <TableFormIterator.Field source="type">
+   *                  <TextField />
+   *               </TableFormIterator.Field>
+   *               {...}
+   *            </TableFormIterator>
+   *       </ArrayInput>
+   *     </Grid>
+   *   </Grid>
+   */
+  Field: typeof Field;
+};
+
+const DefaultTableForm = TableFormIterator as ITableForm;
+
+DefaultTableForm.CreateButton = CreateButton;
+DefaultTableForm.EditButton = EditButton;
+DefaultTableForm.Field = Field;
+
+export { DefaultTableForm as TableFormIterator };
 export type { TableFormIteratorProps };

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

@@ -1,18 +1,19 @@
+import { EditButton } from './EditButton';
 import { ActionsMenu } from '@/components/ActionsMenu';
 import { useTableFormIterator } from '@/components/ra-forms/TableForm/TableFormIteratorContext';
 import {
   TableFormIteratorItemContext,
   TableFormIteratorItemContextValue
 } from '@/components/ra-forms/TableForm/TableFormIteratorItemContext';
-import { Stack, TableCell, Typography } from '@mui/material';
+import { Button, Stack, TableCell } from '@mui/material';
 import { RaRecord } from 'ra-core';
 import { Children, ReactElement, ReactNode, cloneElement, isValidElement, useMemo } from 'react';
 import * as React from 'react';
 import { Confirm, useTranslate } from 'react-admin';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const TableFormIteratorItem = React.forwardRef((props: TableFormIteratorItemProps, _: any) => {
-  const { children, disabled, disableRemove = false, index, member, resource } = props;
+const TableFormIteratorItem = React.forwardRef((props: TableFormIteratorItemProps, _: any) => {
+  const { children, disabled, disableRemove = false, index, member, resource, record } = props;
   const translate = useTranslate();
   const [confirmIsOpen, setConfirmIsOpen] = React.useState<boolean>(false);
   const { total, remove } = useTableFormIterator();
@@ -27,15 +28,31 @@ export const TableFormIteratorItem = React.forwardRef((props: TableFormIteratorI
     () => ({
       index,
       total,
+      item: record,
       remove: () => remove(index)
     }),
-    [index, total, remove]
+    [index, total, remove, record]
+  );
+
+  const renderEditButton = useMemo(
+    () =>
+      Children.map(children, (Child) => {
+        if (isValidElement(Child) && Child?.type === EditButton) {
+          return React.isValidElement(Child) ? Child : null;
+        }
+
+        return null;
+      }),
+    [children]
   );
 
   return (
     <TableFormIteratorItemContext.Provider value={context}>
       {/** @ts-ignore */}
       {Children.map(children, (input: ReactElement, index2) => {
+        if (input.type === EditButton) {
+          return null;
+        }
         if (!isValidElement<any>(input)) {
           return null;
         }
@@ -58,13 +75,22 @@ export const TableFormIteratorItem = React.forwardRef((props: TableFormIteratorI
         <TableCell>
           <Stack direction="row" spacing={1} justifyContent="center" alignItems="center">
             <ActionsMenu horizontal>
-              <Typography color="error" onClick={() => setConfirmIsOpen(true)}>
+              <Button onClick={() => setConfirmIsOpen(true)} color="error" sx={{ justifyContent: 'flex-start' }}>
                 {translate('ra.action.delete')}
-              </Typography>
+              </Button>
+              {renderEditButton}
             </ActionsMenu>
           </Stack>
         </TableCell>
       )}
+      {disableRemove && renderEditButton ? (
+        <TableCell>
+          <Stack direction="row" spacing={1} justifyContent="center" alignItems="center">
+            <ActionsMenu horizontal>{renderEditButton}</ActionsMenu>
+          </Stack>
+        </TableCell>
+      ) : null}
+
       {/** @ts-ignore */}
       {children.length > 0 && (
         <Confirm
@@ -79,7 +105,7 @@ export const TableFormIteratorItem = React.forwardRef((props: TableFormIteratorI
   );
 });
 
-export type TableFormIteratorItemProps = {
+type TableFormIteratorItemProps = {
   children?: ReactNode;
   disabled?: boolean;
   disableRemove?: boolean;
@@ -88,6 +114,10 @@ export type TableFormIteratorItemProps = {
   onRemoveField: (index: number) => void;
   record: RaRecord;
   removeButton?: ReactElement;
+  editAction?: ReactElement;
   resource: string;
   source: string;
 };
+
+export { TableFormIteratorItem };
+export type { TableFormIteratorItemProps };

package/src/components/ra-forms/TableForm/TableFormIteratorItemContext.ts

@@ -12,6 +12,7 @@ const TableFormIteratorItemContext = createContext<TableFormIteratorItemContextV
 type TableFormIteratorItemContextValue = {
   index: number;
   total: number;
+  item: any;
   remove: () => void;
   reOrder: (newIndex: number) => void;
 };

package/src/components/ra-forms/TableForm/index.ts

@@ -1,3 +1,7 @@
+export * from './AddTableRow';
+export * from './CreateButton';
+export * from './EditButton';
+export * from './Field';
 export * from './TableFormIterator';
 export * from './TableFormIteratorContext';
 export * from './TableFormIteratorItem';