remove outer list collapse

decaporg · Dec 22, 2017 · af30171 · af30171
1 parent 017b491
commit af30171
Showing 1 changed file with 35 additions and 78 deletions.
diff --git a/src/components/EditorWidgets/List/ListControl.js b/src/components/EditorWidgets/List/ListControl.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { List, Map, fromJS } from 'immutable';
+import { List, Map } from 'immutable';
 import { partial } from 'lodash';
 import c from 'classnames';
 import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
@@ -23,14 +23,11 @@ function valueToString(value) {
 
 const SortableListItem = SortableElement(ListItem);
 
-const TopBar = ({ onAdd, listLabel, listCollapsed, onCollapseToggle, onCollapseAllToggle, allItemsCollapsed, itemsCount }) => (
+const TopBar = ({ onAdd, listLabel, onCollapseAllToggle, allItemsCollapsed, itemsCount }) => (
   <div className="nc-listControl-topBar">
     <div className="nc-listControl-listCollapseToggle">
-      <button className="nc-listControl-listCollapseToggleButton" onClick={onCollapseToggle}>
-        <Icon type="chevron" direction={listCollapsed ? 'up' : 'down'} size="small" />
-      </button>
       <button className="nc-listControl-listCollapseToggleButton" onClick={onCollapseAllToggle}>
-        <Icon type="chevron-double" direction={allItemsCollapsed ? 'up' : 'down'} size="small" />
+        <Icon type="chevron" direction={allItemsCollapsed ? 'up' : 'down'} size="small" />
       </button>
       {itemsCount} {listLabel}
     </div>
@@ -53,10 +50,7 @@ export default class ListControl extends Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,
     onChangeObject: PropTypes.func.isRequired,
-    value: PropTypes.oneOfType([
-      ImmutablePropTypes.list,
-      PropTypes.string,
-    ]),
+    value: ImmutablePropTypes.list,
     field: PropTypes.object,
     forID: PropTypes.string,
     mediaPaths: ImmutablePropTypes.map.isRequired,
@@ -69,24 +63,19 @@ export default class ListControl extends Component {
     setInactiveStyle: PropTypes.func.isRequired,
   };
 
+  static defaultProps = {
+    value: List(),
+  };
+
   constructor(props) {
     super(props);
     const { field, value } = props;
-    const itemsCount = value ? value.size : 0;
-    const allItemsExpanded = field.get('expandItems') || false;
-    let itemsCollapsed = List();
-
-    if (!allItemsExpanded) {
-      for (let i = 0; i < itemsCount; i++) {
-        itemsCollapsed = itemsCollapsed.set(i, true);
-      }
-    }
+    const allItemsCollapsed = field.get('collapsed') || true;
+    const itemsCollapsed = Array(value.size).fill(allItemsCollapsed);
 
     this.state = {
-      listCollapsed: field.get('collapsed') || false,
-      itemsCollapsed,
-      allItemsCollapsed: !allItemsExpanded,
-      value: valueToString(props.value),
+      itemsCollapsed: List(itemsCollapsed),
+      value: valueToString(value),
     };
 
     this.valueType = null;
@@ -150,10 +139,7 @@ export default class ListControl extends Component {
     e.preventDefault();
     const { value, onChange } = this.props;
     const parsedValue = (this.valueType === valueTypes.SINGLE) ? null : Map();
-    this.setState({ 
-      listCollapsed: false,
-      allItemsCollapsed: false,
-    });
+    this.setState({ itemsCollapsed: this.state.itemsCollapsed.push(false) });
     onChange((value || List()).push(parsedValue));
   };
 
@@ -181,46 +167,25 @@ export default class ListControl extends Component {
     const { itemsCollapsed } = this.state;
     const { value, metadata, onChange, forID } = this.props;
     const parsedMetadata = metadata && { [forID]: metadata.removeIn(value.get(index).valueSeq()) };
-
-    this.setState({
-      itemsCollapsed: itemsCollapsed.delete(index),
-    });
-    onChange(value.remove(index), parsedMetadata);
-  }
 
-  handleCollapseToggle = () => {
-    this.setState({ listCollapsed: !this.state.listCollapsed });
+    this.setState({ itemsCollapsed: itemsCollapsed.delete(index) });
+
+    onChange(value.remove(index), parsedMetadata);
   }
 
   handleItemCollapseToggle = (index, event) => {
     event.preventDefault();
-    const { value } = this.props;
-    let { itemsCollapsed } = this.state;
-
-    itemsCollapsed = itemsCollapsed.set(index, !itemsCollapsed.get(index, false));
-    const allCollapsed = itemsCollapsed.every((collapsed, i) => collapsed);
-
-    this.setState({
-      itemsCollapsed,
-      allItemsCollapsed: itemsCollapsed.size === value.size && allCollapsed,
-    });
+    const { itemsCollapsed } = this.state;
+    const collapsed = itemsCollapsed.get(index);
+    this.setState({ itemsCollapsed: itemsCollapsed.set(index, !collapsed) });
   }
 
   handleCollapseAllToggle = (e) => {
     e.preventDefault();
-    const { allItemsCollapsed } = this.state;
     const { value } = this.props;
-    const itemsCount = value ? value.size : 0;
-    let { itemsCollapsed } = this.state;
-
-    for (let i = 0; i < itemsCount; i++) {
-      itemsCollapsed = itemsCollapsed.set(i, !allItemsCollapsed);
-    }
-
-    this.setState({
-      itemsCollapsed,
-      allItemsCollapsed: !allItemsCollapsed,
-    });
+    const { itemsCollapsed } = this.state;
+    const allItemsCollapsed = itemsCollapsed.every(val => val === true);
+    this.setState({ itemsCollapsed: List(Array(value.size).fill(!allItemsCollapsed)) });
   }
 
   objectLabel(item) {
@@ -234,17 +199,17 @@ export default class ListControl extends Component {
 
   onSortEnd = ({ oldIndex, newIndex }) => {
     const { value, onChange } = this.props;
+    const { itemsCollapsed } = this.state;
 
     // Update value
     const item = value.get(oldIndex);
     const newValue = value.delete(oldIndex).insert(newIndex, item);
     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 });
+    const updatedItemsCollapsed = itemsCollapsed.delete(oldIndex).insert(newIndex, collapsed);
+    this.setState({ itemsCollapsed: updatedItemsCollapsed });
   };
 
   renderItem = (item, index) => {
@@ -286,33 +251,25 @@ export default class ListControl extends Component {
 
   renderListControl() {
     const { value, forID, field, classNameWrapper } = this.props;
-    const { listCollapsed } = this.state;
+    const { itemsCollapsed } = this.state;
     const items = value || List();
-    const className = c(classNameWrapper, 'nc-listControl', {
-      'nc-listControl-collapsed' : listCollapsed,
-    });
 
     return (
-      <div id={forID} className={className}>
+      <div id={forID} className={c(classNameWrapper, 'nc-listControl')}>
         <TopBar
           onAdd={this.handleAdd}
           listLabel={field.get('label').toLowerCase()}
-          onCollapseToggle={this.handleCollapseToggle}
           onCollapseAllToggle={this.handleCollapseAllToggle}
-          allItemsCollapsed={this.state.allItemsCollapsed}
-          listCollapsed={listCollapsed}
+          allItemsCollapsed={itemsCollapsed.every(val => val === true)}
           itemsCount={items.size}
         />
-        {
-          listCollapsed ? null :
-            <SortableList
-              items={items}
-              renderItem={this.renderItem}
-              onSortEnd={this.onSortEnd}
-              useDragHandle
-              lockAxis="y"
-            />
-        }
+        <SortableList
+          items={items}
+          renderItem={this.renderItem}
+          onSortEnd={this.onSortEnd}
+          useDragHandle
+          lockAxis="y"
+        />
       </div>
     );
   }