diff --git a/README.md b/README.md index 46b8806..38b612b 100644 --- a/README.md +++ b/README.md @@ -198,7 +198,7 @@ You can customize presentation of collapsible field, with "collapse" object in u - `object` that allows to render any kind of `legend` you need, which will be sourced from `formContext` `legends` configuration - `component` `string` name of the component, that will be sourced from `formContext.legends` object - `props` `object` additional properties for rendered component - +- `additionalTitleField` `string` the name of an inner field whose value will be appended to the title separated by ':' Additional feature of the Collapsible field is to allow adding empty value to hidden `array`, it's enabled with `addTo` feature, which can be either `self` which assumes that Collapsible field is the target array, or it can be a property field. diff --git a/src/CollapsibleField.js b/src/CollapsibleField.js index 2ccccc2..cbb6a6d 100644 --- a/src/CollapsibleField.js +++ b/src/CollapsibleField.js @@ -34,6 +34,7 @@ function CollapseMenu(props) { let { uiSchema: { collapse: { + additionalTitleField, // use the value of an inner field to append it to the title icon: { enabled = "glyphicon glyphicon-chevron-down", disabled = "glyphicon glyphicon-chevron-right", @@ -60,6 +61,7 @@ function CollapseMenu(props) { } }, formContext = {}, + formData = {}, onChange, onAdd, title, @@ -72,6 +74,12 @@ function CollapseMenu(props) { onAdd(event); }; + // read the value of the additional title from an inner field + let additionalTitle = formData[additionalTitleField]; + if (additionalTitle !== undefined) { + additionalTitle = ": " + additionalTitle; + } + return (