[FR] Support changing "Add Item" text with uiSchema

[marian2js]

Prerequisites

• I have read the documentation;

Description

Use case: I need to change the text used for "Add Item" buttons for dynamically generated schemas (e.g. "Add Property", "Add User", etc).

Currently these buttons use a "+" button for Bootstrap and "+ Add Item" for other themes.

The documented method for changing the text is using CSS, which is theme specific and hard to manage for dynamic schemas.

Another alternative is with custom widgets, but adding custom widgets for arrays and objects adds a lot of unnecessary complexity and maintenance cost when the required change is just the button text.

I think it would be very useful to have support on uiSchema for this, it could be part of ui:options:

{
  "ui:options": {
    "addItemText": "Custom Button Text",
    "addable": true,
    "removable": false
  }
}

[coderzzp]

Is this good feature supported?

[PsyGik]

It is doable by using a sample from https://react-jsonschema-form.readthedocs.io/en/latest/advanced-customization/custom-templates/#arrayfieldtemplate (YMMV 🤷🏽‍♂️ )

CodePen: https://codepen.io/judas_brutus/pen/ExZPjRd
👇🏽 Backup in case of dead link

function ArrayFieldTemplate(props) {
 // There should be a better way to do this?
  const {uiSchema: {"ui:options": {addText, deleteText}}} = props;
  return (
    <div className={props.className}>
      {props.items &&
        props.items.map((element) => (
          <div key={element.key} className={element.className}>
            <div>{element.children}</div>
            {element.hasMoveDown && (
              <button
                onClick={element.onReorderClick(
                  element.index,
                  element.index + 1
                )}
              >
                Down
              </button>
            )}
            {element.hasMoveUp && (
              <button
                onClick={element.onReorderClick(
                  element.index,
                  element.index - 1
                )}
              >
                Up
              </button>
            )}
            <button onClick={element.onDropIndexClick(element.index)}>
              {deleteText} // Custom Label FTW 🚀 
            </button>
            <hr />
          </div>
        ))}

      {props.canAdd && (
        <div className="row">
          <p className="col-xs-3 col-xs-offset-9 array-item-add text-right">
            <button onClick={props.onAddClick} type="button">
              {addText} // Custom Label FTW 🚀 
            </button>
          </p>
        </div>
      )}
    </div>
  );
}

const schema = {
  type: "array",
  items: {
    type: "string"
  }
};

const uiSchema = {
  "ui:options": {
    addText: "Custom Button Text",
    deleteText: "Remove",
    removable: false
  }
};

ReactDOM.render(
  <Form
    schema={schema}
    uiSchema={uiSchema}
    ArrayFieldTemplate={ArrayFieldTemplate}
  />,
  document.getElementById("app")
);

[heath-freenome]

Fixed in the v5 beta via ButtonTemplates, see the 5.x migration guide