@applica-software-guru/react-admin 1.1.113 → 1.1.114

package/package.json

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

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

@@ -31,7 +31,7 @@ import get from 'lodash/get';
  *  <Grid container>
  *    <Grid item xs={12}>
  *       <ArrayInput label={false} source="descriptor.fields">
- *           <TableFormIterator label="Catalogo proprietà">
+ *           <TableFormIterator template={{ property: 'FIELD' }} label="Catalogo proprietà"> // template: default value for new row
  *               <TextInput label="Name" source={'name'} validate={required()} />
  *               <TextInput source={'denomination'} helperText={false} />
  *               <SelectInput choices={FieldTypes} source={'type'} helperText={false} />
@@ -44,7 +44,7 @@ import get from 'lodash/get';
  * @returns
  */
 const TableFormIterator = (props: TableFormIteratorProps) => {
-  const { children, resource, source, label, disableActions = false, disableAdd = false, disableRemove = false, className, empty } = 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 theme = useTheme();
@@ -90,8 +90,13 @@ const TableFormIterator = (props: TableFormIteratorProps) => {
     // @ts-ignore
     <TableFormIteratorContext.Provider value={context}>
       <div className={className}>
-        {/** @ts-ignore */}
-        <AddTableRow label={label} source={source} disableAdd={disableAdd} />
+        {React.cloneElement(<AddTableRow />, {
+          label,
+          source,
+          disableAdd,
+          template,
+          addButton: props?.addButton,
+        })}
 
         <TableContainer component={Paper} sx={{ mt: 2, border: `1px solid ${tableBorderColor}` }}>
           <Table>
@@ -172,20 +177,33 @@ const TableFormIterator = (props: TableFormIteratorProps) => {
 };
 
 const AddTableRow = (props: any) => {
-  const { label, disableAdd } = props;
+  const { label, disableAdd, template = {} } = props;
   const { append } = useArrayInput(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 && (
-        <IconButton size="small" color="secondary" sx={{ border: `1px solid ${tableBorderColor}` }} onClick={() => append({})}>
-          <PlusCircleOutlined style={{ color: iconColor }} />
-        </IconButton>
+        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)}>
+            <PlusCircleOutlined style={{ color: iconColor }} />
+          </IconButton>
       )}
     </Stack>
   );
@@ -204,8 +222,9 @@ const StyledTableFormIterator = styled(TableFormIterator, {
 }));
 
 AddTableRow.propTypes = {
-  label: PropTypes.string.isRequired,
-  source: PropTypes.string.isRequired
+  label: PropTypes.string,
+  source: PropTypes.string,
+  defaultValue: PropTypes.any
 };
 
 TableFormIterator.propTypes = {
@@ -224,7 +243,8 @@ TableFormIterator.propTypes = {
   disableAdd: PropTypes.bool,
   disableRemove: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
   TransitionProps: PropTypes.shape({}),
-  empty: PropTypes.oneOfType([PropTypes.node, PropTypes.string])
+  empty: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  template: PropTypes.object
 };
 
 export interface TableFormIteratorProps extends Partial<UseFieldArrayReturn> {
@@ -234,6 +254,7 @@ export interface TableFormIteratorProps extends Partial<UseFieldArrayReturn> {
   disableAdd?: boolean;
   disableActions?: boolean;
   disableRemove?: boolean;
+  template?: object;
   meta?: {
     // the type defined in FieldArrayRenderProps says error is boolean, which is wrong.
     error?: any;