Allow adding items to be disabled for list widget (#1102)

src/components/EditorWidgets/List/ListControl.js

@@ -23,7 +23,7 @@ function valueToString(value) {
 
 const SortableListItem = SortableElement(ListItem);
 
-const TopBar = ({ onAdd, listLabel, onCollapseAllToggle, allItemsCollapsed, itemsCount }) => (
+const TopBar = ({ allowAdd, onAdd, listLabel, onCollapseAllToggle, allItemsCollapsed, itemsCount }) => (
   <div className="nc-listControl-topBar">
     <div className="nc-listControl-listCollapseToggle">
       <button className="nc-listControl-listCollapseToggleButton" onClick={onCollapseAllToggle}>
@@ -31,9 +31,15 @@ const TopBar = ({ onAdd, listLabel, onCollapseAllToggle, allItemsCollapsed, item
       </button>
       {itemsCount} {listLabel}
     </div>
-    <button className="nc-listControl-addButton" onClick={onAdd}>
-      Add {listLabel} <Icon type="add" size="xsmall" />
-    </button>
+
+    {
+      allowAdd ?
+        <button className="nc-listControl-addButton" onClick={onAdd}>
+          Add {listLabel} <Icon type="add" size="xsmall" />
+        </button>
+      :
+        null
+    }
   </div>
 );
 
@@ -133,7 +139,7 @@ export default class ListControl extends Component {
     const listValue = e.target.value.split(',').map(el => el.trim()).filter(el => el);
     this.setState({ value: valueToString(listValue) });
     this.props.setInactiveStyle();
-  };
+  }
 
   handleAdd = (e) => {
     e.preventDefault();
@@ -141,7 +147,7 @@ export default class ListControl extends Component {
     const parsedValue = (this.valueType === valueTypes.SINGLE) ? null : Map();
     this.setState({ itemsCollapsed: this.state.itemsCollapsed.push(false) });
     onChange((value || List()).push(parsedValue));
-  };
+  }
 
   /**
    * In case the `onChangeObject` function is frozen by a child widget implementation,
@@ -171,14 +177,14 @@ export default class ListControl extends Component {
     this.setState({ itemsCollapsed: itemsCollapsed.delete(index) });
 
     onChange(value.remove(index), parsedMetadata);
-  }
+  };
 
   handleItemCollapseToggle = (index, event) => {
     event.preventDefault();
     const { itemsCollapsed } = this.state;
     const collapsed = itemsCollapsed.get(index);
     this.setState({ itemsCollapsed: itemsCollapsed.set(index, !collapsed) });
-  }
+  };
 
   handleCollapseAllToggle = (e) => {
     e.preventDefault();
@@ -186,7 +192,7 @@ export default class ListControl extends Component {
     const { itemsCollapsed } = this.state;
     const allItemsCollapsed = itemsCollapsed.every(val => val === true);
     this.setState({ itemsCollapsed: List(Array(value.size).fill(!allItemsCollapsed)) });
-  }
+  };
 
   objectLabel(item) {
     const { field } = this.props;
@@ -244,7 +250,7 @@ export default class ListControl extends Component {
         mediaPaths={mediaPaths}
         onAddAsset={onAddAsset}
         onRemoveInsertedMedia={onRemoveInsertedMedia}
-        classNameWrapper={`${classNameWrapper} nc-listControl-objectControl`}
+        classNameWrapper={`${ classNameWrapper } nc-listControl-objectControl`}
         forList
       />
     </SortableListItem>);
@@ -259,6 +265,7 @@ export default class ListControl extends Component {
     return (
       <div id={forID} className={c(classNameWrapper, 'nc-listControl')}>
         <TopBar
+          allowAdd={field.get('allow_add', true)}
           onAdd={this.handleAdd}
           listLabel={label.toLowerCase()}
           onCollapseAllToggle={this.handleCollapseAllToggle}