Allow adding items to be disabled for list widget (#1102)
This commit is contained in:
@ -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}
|
||||
|
Reference in New Issue
Block a user