@applica-software-guru/react-admin 1.1.89 → 1.1.90

package/package.json

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

package/src/components/ActionsMenu.tsx

@@ -2,7 +2,7 @@ import { IconButton, MenuItem, styled } from '@mui/material';
 import React, { Children, useCallback, useState } from 'react';
 
 import MenuPopover from './MenuPopover/MenuPopover';
-import { MoreVert } from '@mui/icons-material';
+import { MoreHoriz, MoreVert } from '@mui/icons-material';
 import PropTypes from 'prop-types';
 
 const StyledRoot = styled('div', {
@@ -28,6 +28,7 @@ const StyledMenuPopover = styled(MenuPopover, {
 }));
 export type ActionsMenuProps = {
   children: React.ReactNode;
+  horizontal?: boolean;
 };
 
 /**
@@ -43,7 +44,7 @@ export type ActionsMenuProps = {
  * @param {ActionsMenuProps}
  * @returns {React.ReactElement}
  */
-const ActionsMenu = ({ children }: ActionsMenuProps): React.ReactElement | null => {
+const ActionsMenu = ({ horizontal = false, children }: ActionsMenuProps): React.ReactElement | null => {
   const [open, setOpen] = useState(null);
   const handleClick = (e: any) => {
     e.stopPropagation();
@@ -66,7 +67,7 @@ const ActionsMenu = ({ children }: ActionsMenuProps): React.ReactElement | null
   return (
     <StyledRoot>
       <IconButton aria-label="more" aria-haspopup="true" onClick={handleClick} color={open ? 'inherit' : 'default'}>
-        <MoreVert />
+        {horizontal ? <MoreHoriz /> : <MoreVert />}
       </IconButton>
       <StyledMenuPopover open={open} onClose={handleClose} arrow="right-top">
         {Children.map(

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

@@ -0,0 +1,241 @@
+import * as React from 'react';
+
+import { Children, ReactElement, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
+import { Confirm, useArrayInput } from 'react-admin';
+import {
+  IconButton,
+  Paper,
+  Stack,
+  SxProps,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography
+} from '@mui/material';
+import { RaRecord, useRecordContext, useTranslate } from 'ra-core';
+
+import { MoreHoriz } from '@mui/icons-material';
+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 get from 'lodash/get';
+import { styled } from '@mui/material/styles';
+
+/**
+ *
+ * @example
+ *  <Grid container>
+ *    <Grid item xs={12}>
+ *       <ArrayInput label={false} source="descriptor.fields">
+ *           <TableFormIterator label="Catalogo proprietà">
+ *               <TextInput label="Name" source={'name'} validate={required()} />
+ *               <TextInput source={'denomination'} helperText={false} />
+ *               <SelectInput choices={FieldTypes} source={'type'} helperText={false} />
+ *            </TableFormIterator>
+ *       </ArrayInput>
+ *     </Grid>
+ *   </Grid>
+ *
+ * @param props
+ * @returns
+ */
+const TableFormIterator = (props: TableFormIteratorProps) => {
+  const { children, resource, source, label, disableActions = false, disableAdd = false, disableRemove = false, className } = props;
+  const [confirmIsOpen, setConfirmIsOpen] = useState<boolean>(false);
+  const { fields, remove, replace } = useArrayInput(props);
+  const translate = useTranslate();
+  const record = useRecordContext(props);
+  const initialDefaultValue = useRef({});
+  const removeField = useCallback(
+    (index: number) => {
+      remove(index);
+    },
+    [remove]
+  );
+
+  if (fields.length > 0) {
+    const { ...rest } = fields[0];
+    initialDefaultValue.current = rest;
+    // @ts-ignore
+    for (const k in initialDefaultValue.current) initialDefaultValue.current[k] = null;
+  }
+
+  const handleArrayClear = useCallback(() => {
+    replace([]);
+    setConfirmIsOpen(false);
+  }, [replace]);
+
+  // @ts-ignore
+  const records = get(record, source);
+
+  const context = useMemo(
+    () => ({
+      total: fields.length,
+      remove: removeField,
+      source
+    }),
+    [fields.length, removeField, source]
+  );
+
+  const tableBorderColor = '#F0F0F0';
+
+  return fields ? (
+    // @ts-ignore
+    <TableFormIteratorContext.Provider value={context}>
+      <div className={className}>
+        {/** @ts-ignore */}
+        <AddTableRow label={label} source={source} disableAdd={disableAdd} />
+
+        <TableContainer component={Paper} sx={{ mt: 2, border: `1px solid ${tableBorderColor}` }}>
+          <Table>
+            <TableHead sx={{ borderTop: 0, borderBottom: `1px solid ${tableBorderColor}` }}>
+              <TableRow>
+                {/** @ts-ignore */}
+                {Children.map(children, (input: ReactElement, index) => {
+                  if (!React.isValidElement<any>(input)) {
+                    return null;
+                  }
+                  const { source, label = '' } = input.props;
+                  return (
+                    <TableCell key={index}>
+                      <Typography display={'flex'} variant="subtitle1" fontWeight={500} color="text.primary" textTransform="none">
+                        {label || source}
+                      </Typography>
+                    </TableCell>
+                  );
+                })}
+
+                {!disableActions && (
+                  <TableCell sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }} key={'actions'}>
+                    <Typography display={'flex'} variant="subtitle1" fontWeight={500} color="text.primary" textTransform="none">
+                      <MoreHoriz />
+                    </Typography>
+                  </TableCell>
+                )}
+              </TableRow>
+            </TableHead>
+
+            <TableBody>
+              {fields.length === 0 && (
+                <TableRow sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                  <TableCell colSpan={4} align="center">
+                    <Typography variant="body1" color="text.secondary">
+                      -
+                    </Typography>
+                  </TableCell>
+                </TableRow>
+              )}
+
+              {fields.length > 0 &&
+                fields.map((member, index) => (
+                  <TableRow sx={{ borderBottom: `1px solid ${tableBorderColor}}` }} key={member.id}>
+                    <TableFormIteratorItem
+                      disableRemove={disableRemove}
+                      disableActions={disableActions}
+                      index={index}
+                      member={`${source}.${index}`}
+                      onRemoveField={removeField}
+                      record={(records && records[index]) || {}}
+                      // @ts-ignore
+                      resource={resource}
+                      // @ts-ignore
+                      source={source}
+                    >
+                      {children}
+                    </TableFormIteratorItem>
+                  </TableRow>
+                ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+
+        {fields.length > 0 && (
+          <Confirm
+            isOpen={confirmIsOpen}
+            title={translate('ra.action.clear_array_input')}
+            content={translate('ra.message.clear_array_input')}
+            onConfirm={handleArrayClear}
+            onClose={() => setConfirmIsOpen(false)}
+          />
+        )}
+      </div>
+    </TableFormIteratorContext.Provider>
+  ) : null;
+};
+
+const AddTableRow = (props: any) => {
+  const { label, disableAdd } = props;
+  const { append } = useArrayInput(props);
+
+  return (
+    <Stack justifyContent={'space-between'} alignItems={'center'} flexDirection={'row'}>
+      <Typography>{label}</Typography>
+      {!disableAdd && (
+        <IconButton size="small" color="secondary" sx={{ border: '1px solid #D9D9D9' }} onClick={() => append({})}>
+          <PlusCircleOutlined style={{ color: '#000000' }} />
+        </IconButton>
+      )}
+    </Stack>
+  );
+};
+
+const StyledTableFormIterator = styled(TableFormIterator, {
+  name: 'RaApplicaTableFormIterator',
+  slot: 'Root'
+})(({ theme }) => ({
+  '& > div.MuiPaper-root': {
+    overflowX: 'auto',
+    [theme.breakpoints.down('sm')]: {
+      width: `calc(100vw - ${theme.spacing(8)})`
+    }
+  }
+}));
+
+AddTableRow.propTypes = {
+  label: PropTypes.string.isRequired,
+  source: PropTypes.string.isRequired
+};
+
+TableFormIterator.propTypes = {
+  addButton: PropTypes.element,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  field: PropTypes.object,
+  fields: PropTypes.array,
+  fieldState: PropTypes.object,
+  formState: PropTypes.object,
+  record: PropTypes.object,
+  source: PropTypes.string,
+  label: PropTypes.string,
+  resource: PropTypes.string,
+  translate: PropTypes.func,
+  disableAdd: PropTypes.bool,
+  disableRemove: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
+  TransitionProps: PropTypes.shape({})
+};
+
+export interface TableFormIteratorProps extends Partial<UseFieldArrayReturn> {
+  addButton?: ReactElement;
+  children?: ReactNode;
+  className?: string;
+  disableAdd?: boolean;
+  disableActions?: boolean;
+  disableRemove?: boolean;
+  meta?: {
+    // the type defined in FieldArrayRenderProps says error is boolean, which is wrong.
+    error?: any;
+    submitFailed?: boolean;
+  };
+  record?: RaRecord;
+  label?: string;
+  resource?: string;
+  source?: string;
+  sx?: SxProps;
+}
+
+export default StyledTableFormIterator;

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

@@ -0,0 +1,19 @@
+import { createContext } from 'react';
+
+/**
+ * A React context that provides access to a TableFormIterator data (the total number of items) and mutators (add, reorder and remove).
+ * Useful to create custom array input iterators.
+ * @see {TableFormIterator}
+ * @see {ArrayInput}
+ *
+ */
+// @ts-ignore
+export const TableFormIteratorContext = createContext<TableFormIteratorContextValue>(undefined);
+
+export type TableFormIteratorContextValue = {
+  add: () => void;
+  remove: (index: number) => void;
+  reOrder: (index: number, newIndex: number) => void;
+  source: string;
+  total: number;
+};

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

@@ -0,0 +1,91 @@
+import * as React from 'react';
+
+import { Children, ReactElement, ReactNode, cloneElement, isValidElement, useMemo } from 'react';
+import { Confirm, useTranslate } from 'react-admin';
+import { TableCell, Typography } from '@mui/material';
+import { TableFormIteratorItemContext, TableFormIteratorItemContextValue } from './TableFormIteratorItemContext';
+
+import ActionsMenu from '../../ActionsMenu';
+import { RaRecord } from 'ra-core';
+import { useTableFormIterator } from './useTableFormIterator';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const TableFormIteratorItem = React.forwardRef((props: TableFormIteratorItemProps, ref: any) => {
+  const { children, disabled, disableActions = false, index, member, resource } = props;
+  const translate = useTranslate();
+  const [confirmIsOpen, setConfirmIsOpen] = React.useState<boolean>(false);
+  const { total, remove } = useTableFormIterator();
+
+  const handleRowDelete = React.useCallback(() => {
+    setConfirmIsOpen(false);
+    remove(index);
+  }, [index, remove]);
+
+  const context = useMemo<TableFormIteratorItemContextValue>(
+    // @ts-ignore
+    () => ({
+      index,
+      total,
+      remove: () => remove(index)
+    }),
+    [index, total, remove]
+  );
+
+  return (
+    <TableFormIteratorItemContext.Provider value={context}>
+      {/** @ts-ignore */}
+      {Children.map(children, (input: ReactElement, index2) => {
+        if (!isValidElement<any>(input)) {
+          return null;
+        }
+        const { source, ...inputProps } = input.props;
+        return (
+          <TableCell sx={{ border: 0 }}>
+            {cloneElement(input, {
+              source: source ? `${member}.${source}` : member,
+              index: source ? undefined : index2,
+              resource,
+              disabled,
+              ...inputProps,
+              label: false
+            })}
+          </TableCell>
+        );
+      })}
+
+      {!disableActions && (
+        <TableCell sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', border: 0, pt: 2 }}>
+          <ActionsMenu horizontal>
+            <Typography color="error" onClick={() => setConfirmIsOpen(true)}>
+              {translate('ra.action.delete')}
+            </Typography>
+          </ActionsMenu>
+        </TableCell>
+      )}
+      {/** @ts-ignore */}
+      {children.length > 0 && (
+        <Confirm
+          isOpen={confirmIsOpen}
+          title={translate('ra.action.remove_item')}
+          content={translate('ra.message.remove_item')}
+          onConfirm={handleRowDelete}
+          onClose={() => setConfirmIsOpen(false)}
+        />
+      )}
+    </TableFormIteratorItemContext.Provider>
+  );
+});
+
+export type TableFormIteratorItemProps = {
+  children?: ReactNode;
+  disabled?: boolean;
+  disableRemove?: boolean;
+  disableActions?: boolean;
+  index: number;
+  member: string;
+  onRemoveField: (index: number) => void;
+  record: RaRecord;
+  removeButton?: ReactElement;
+  resource: string;
+  source: string;
+};

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

@@ -0,0 +1,17 @@
+import { createContext } from 'react';
+
+/**
+ * A React context that provides access to a TableFormIterator item meta (its index and the total number of items) and mutators (reorder and remove this remove).
+ * Useful to create custom array input iterators.
+ * @see {TableFormIterator}
+ * @see {ArrayInput}
+ */
+// @ts-ignore
+export const TableFormIteratorItemContext = createContext<TableFormIteratorItemContextValue>(undefined);
+
+export type TableFormIteratorItemContextValue = {
+  index: number;
+  total: number;
+  remove: () => void;
+  reOrder: (newIndex: number) => void;
+};

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

@@ -0,0 +1,7 @@
+import TableFormIterator from './TableFormIterator';
+export * from './TableFormIteratorContext';
+export * from './TableFormIteratorItem';
+export * from './TableFormIteratorItemContext';
+export * from './useTableFormIterator';
+
+export default TableFormIterator;

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

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { TableFormIteratorContext } from './TableFormIteratorContext';
+
+/**
+ * A hook that provides access to a TableFormIterator data (the total number of items) and mutators (add, reorder and remove).
+ * Useful to create custom array input iterators.
+ * @see {TableFormIterator}
+ * @see {ArrayInput}
+ */
+export const useTableFormIterator = () => useContext(TableFormIteratorContext);

package/src/components/ra-forms/index.jsx

@@ -7,5 +7,18 @@ import LongForm from './LongForm';
 import SimpleForm from './SimpleForm';
 import SimpleFormIterator from './SimpleFormIterator';
 import TabbedForm from './TabbedForm';
+import TableFormIterator from './TableForm';
 import Toolbar from './Toolbar';
-export { Create, CardForm, ChangePasswordForm, Edit, FormHeader, LongForm, SimpleForm, SimpleFormIterator, TabbedForm, Toolbar };
+export {
+  Create,
+  CardForm,
+  ChangePasswordForm,
+  Edit,
+  FormHeader,
+  LongForm,
+  SimpleForm,
+  SimpleFormIterator,
+  TabbedForm,
+  TableFormIterator,
+  Toolbar
+};

package/src/playground/components/ra-forms/UserForm.jsx

@@ -1,4 +1,13 @@
-import { BooleanInput, ImageInput, SelectArrayInput, SimpleForm, TextInput, useThemeConfig } from '@applica-software-guru/react-admin';
+import {
+  ArrayInput,
+  BooleanInput,
+  ImageInput,
+  SelectArrayInput,
+  SimpleForm,
+  TableFormIterator,
+  TextInput,
+  useThemeConfig
+} from '@applica-software-guru/react-admin';
 
 import { Grid } from '@mui/material';
 import PropTypes from 'prop-types';
@@ -23,6 +32,15 @@ const UserForm = ({ configuredRoles }) => {
         <Grid item lg={12} xs={12}>
           <ImageInput source="image" accept="image/*" multiple={false} fullWidth />
         </Grid>
+        <Grid item lg={12} xs={12}>
+          <ArrayInput source="items" label={false}>
+            <TableFormIterator label="Ciao">
+              <TextInput source="name" label="Giovaaaa" sx={{ minWidth: 200 }} />
+              <TextInput source="surname" label="Weee" sx={{ minWidth: 150 }} />
+              <SelectArrayInput source="roles" choices={configuredRoles} />
+            </TableFormIterator>
+          </ArrayInput>
+        </Grid>
       </Grid>
 
       <BooleanInput source="active" />

package/src/playground/components/ra-forms/index.jsx

@@ -1,4 +1,3 @@
 export { default as DeviceForm } from './DeviceForm';
 export { default as I18nMessageForm } from './I18nMessageForm';
 export { default as UserForm } from './UserForm';
-export { default as OrderForm } from './OrderForm';

package/src/playground/components/ra-lists/index.jsx

@@ -1,4 +1,3 @@
 export { default as DeviceList } from './DeviceList';
 export { default as I18nMessageList } from './I18nMessageList';
 export { default as UserList } from './UserList';
-export { default as OrderList } from './OrderList';

package/src/playground/entities/index.jsx

@@ -2,4 +2,3 @@ export { default as user } from './user';
 export { default as notification } from './notification';
 export { default as i18nMessage } from './i18n-message';
 export { default as device } from './device';
-// export { default as order } from './order'; # Just for local tests.

package/src/playground/menu.jsx

@@ -52,6 +52,13 @@ const config = [
         url: '/entities/i18n-message',
         icon: FlagOutlined
       },
+      {
+        id: 'entities/category',
+        title: 'ra.menu.item.entities/category',
+        type: 'item',
+        url: '/entities/category',
+        icon: FlagOutlined
+      },
       {
         id: 'entities/user',
         title: 'ra.menu.item.entities/user',

package/src/playground/components/ra-forms/OrderForm.jsx

@@ -1,48 +0,0 @@
-import {
-  ArrayInput,
-  AttachmentInput,
-  LongForm,
-  MainCard,
-  SaveButton,
-  SimpleFormIterator,
-  TextInput,
-  Toolbar
-} from '@applica-software-guru/react-admin';
-
-import { Grid } from '@mui/material';
-
-const OrderForm = () => (
-  <LongForm>
-    <LongForm.Tab label="Test">
-      <MainCard title="Foo">
-        <Grid container>
-          <Grid item xs={12}>
-            <TextInput source="name" />
-            <AttachmentInput source="attachment" title="name" multiple={false} />
-            <AttachmentInput source="attachments" title="name" multiple={true} />
-          </Grid>
-          <Grid item xs={12}>
-            <ArrayInput source="items">
-              <SimpleFormIterator>
-                <TextInput source="name" />
-                <AttachmentInput source="attachment" multiple={false} title="attachment.name" />
-                <ArrayInput source="subItems">
-                  <SimpleFormIterator>
-                    <TextInput source="name" />
-                    <AttachmentInput source="attachment" multiple={false} title="attachment.name" />
-                    <AttachmentInput source="subAttachments" multiple title="attachment.name" />
-                  </SimpleFormIterator>
-                </ArrayInput>
-              </SimpleFormIterator>
-            </ArrayInput>
-          </Grid>
-        </Grid>
-        <Toolbar>
-          <SaveButton />
-        </Toolbar>
-      </MainCard>
-    </LongForm.Tab>
-  </LongForm>
-);
-
-export default OrderForm;

package/src/playground/components/ra-lists/OrderList.jsx

@@ -1,12 +0,0 @@
-import { Datagrid, DateField, EditButton, List, TextField } from '@applica-software-guru/react-admin';
-const OrderList = () => (
-  <List perPage={25}>
-    <Datagrid>
-      <TextField source="name" />
-      <DateField source="updated" showTime />
-      <EditButton />
-    </Datagrid>
-  </List>
-);
-
-export default OrderList;