Make collapsing persist on correct item when sorting
This commit is contained in:
committed by
Shawn Erquhart
parent
f649e8cad6
commit
040e654382
@ -43,7 +43,7 @@ export default class ListControl extends Component {
|
|||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = { itemStates: Map(), value: valueToString(props.value) };
|
this.state = { itemsCollapsed: List(), value: valueToString(props.value) };
|
||||||
this.valueType = null;
|
this.valueType = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -115,9 +115,9 @@ export default class ListControl extends Component {
|
|||||||
handleToggle(index) {
|
handleToggle(index) {
|
||||||
return (e) => {
|
return (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const { itemStates } = this.state;
|
const { itemsCollapsed } = this.state;
|
||||||
this.setState({
|
this.setState({
|
||||||
itemStates: itemStates.setIn([index, 'collapsed'], !itemStates.getIn([index, 'collapsed'])),
|
itemsCollapsed: itemsCollapsed.set(index, !itemsCollapsed.get(index, false)),
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@ -133,15 +133,23 @@ export default class ListControl extends Component {
|
|||||||
|
|
||||||
onSortEnd = ({ oldIndex, newIndex }) => {
|
onSortEnd = ({ oldIndex, newIndex }) => {
|
||||||
const { value, onChange } = this.props;
|
const { value, onChange } = this.props;
|
||||||
|
|
||||||
|
// Update value
|
||||||
const item = value.get(oldIndex);
|
const item = value.get(oldIndex);
|
||||||
const newValue = value.delete(oldIndex).insert(newIndex, item);
|
const newValue = value.delete(oldIndex).insert(newIndex, item);
|
||||||
this.props.onChange(newValue);
|
this.props.onChange(newValue);
|
||||||
|
|
||||||
|
// Update collapsing
|
||||||
|
const { itemsCollapsed } = this.state;
|
||||||
|
const collapsed = itemsCollapsed.get(oldIndex);
|
||||||
|
const newItemsCollapsed = itemsCollapsed.delete(oldIndex).insert(newIndex, collapsed);
|
||||||
|
this.setState({ itemsCollapsed: newItemsCollapsed });
|
||||||
};
|
};
|
||||||
|
|
||||||
renderItem = (item, index) => {
|
renderItem = (item, index) => {
|
||||||
const { field, getAsset, onAddAsset, onRemoveAsset } = this.props;
|
const { field, getAsset, onAddAsset, onRemoveAsset } = this.props;
|
||||||
const { itemStates } = this.state;
|
const { itemsCollapsed } = this.state;
|
||||||
const collapsed = itemStates.getIn([index, 'collapsed']);
|
const collapsed = itemsCollapsed.get(index);
|
||||||
const classNames = ['nc-listControl-item', collapsed ? 'nc-listControl-collapsed' : 'nc-listControl-expanded'];
|
const classNames = ['nc-listControl-item', collapsed ? 'nc-listControl-collapsed' : 'nc-listControl-expanded'];
|
||||||
|
|
||||||
return (<SortableListItem className={classNames.join(' ')} index={index} key={`item-${ index }`}>
|
return (<SortableListItem className={classNames.join(' ')} index={index} key={`item-${ index }`}>
|
||||||
|
Reference in New Issue
Block a user