Use callback of MaterialArrayLayout's 'Add Item'

General
1

I am trying to attach additional functionality on to when a user adds an item to an array (in a custom renderer). Right now the following does nothing and also stops me being able to add items to the array. I am obviously misunderstanding how to do this, what is the correct approach? Thanks.

import { and, rankWith, scopeEndsWith } from "@jsonforms/core";
import { Unwrapped } from "@jsonforms/material-renderers";
import { withJsonFormsArrayLayoutProps } from "@jsonforms/react";

const { MaterialArrayLayout } = Unwrapped;

export const ArrayWithIdControl = (props) => {

    const customProps = {...props}
    return (
        <MaterialArrayLayout {...customProps} addItem={() => console.log("Hello world")} />
    )
}

export const arrayWithIdControlTester = rankWith(
    5,
    scopeEndsWith('rooms')
  );

export default withJsonFormsArrayLayoutProps(ArrayWithIdControl);
2

Hi @simonmellows,

addItem is a function factory.

You can test this with your own version of addItem:

const myAddItemGenerator = (path: string, defaultValue: any) => {
  console.log("myAddItemGenerator was called");
  const defaultAddItem = props.addItem(path, defaultValue);
  return () => {
    console.log("myAddItem was requested from the renderer");
    defaultAddItem();
  }
}

<MaterialArrayLayout {...props}  addItem={myAddItemGenerator} />

This will keep the default behavior in tact but you should see exactly what is going on

3

Thank you for the response. I have managed to get it working. Is there something similar I can do for when an item is removed from the array?

4

There is the removeItems prop.