added collapse.additionalTitleField

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.

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 (
     <div className={`${wrapClassName}`}>
       <div
@@ -87,7 +95,10 @@ function CollapseMenu(props) {
           background
         }}
       >
-        <span style={{ color: textColor }}>{title || name}</span>&nbsp;
+        <span style={{ color: textColor }}>
+          {title || name}
+          {additionalTitle}
+        </span>&nbsp;
         {addTo && (
           <a
             onClick={handleAdd}
@@ -246,7 +257,8 @@ class CollapsibleField extends Component {
       registry: { fields },
       idSchema: { $id } = {},
       name,
-      formContext
+      formContext,
+      formData
     } = this.props;
     let { collapsed, AddElement } = this.state;
     let { collapse: { field } } = uiSchema;
@@ -263,6 +275,7 @@ class CollapsibleField extends Component {
           uiSchema={uiSchema}
           collapsed={collapsed}
           formContext={formContext}
+          formData={formData}
           onAdd={this.handleAdd}
           onChange={this.handleCollapsed}
         />