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

This commit is contained in:
Sam
2018-03-15 16:16:32 -04:00
committed by Shawn Erquhart
parent 2c697b08d9
commit a2d4267500
5 changed files with 18818 additions and 12 deletions

View File

@ -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}