Add expand/collapse to object widget (#927)

src/components/EditorWidgets/List/ListControl.js

@@ -245,6 +245,7 @@ export default class ListControl extends Component {
         onAddAsset={onAddAsset}
         onRemoveInsertedMedia={onRemoveInsertedMedia}
         classNameWrapper={`${classNameWrapper} nc-listControl-objectControl`}
+        forList
       />
     </SortableListItem>);
   };

src/components/EditorWidgets/Object/Object.css

@@ -1,3 +1,12 @@
 .nc-objectControl-root {
-  padding: 14px;
+  padding: 0 14px;
+}
+
+.nc-objectControl-topBar {
+  align-items: center;
+  background-color: #dfdfe3;
+  display: flex;
+  justify-content: space-between;
+  margin: 0 -14px;
+  padding: 13px;
 }

src/components/EditorWidgets/Object/ObjectControl.js

@@ -5,16 +5,18 @@ import { Map } from 'immutable';
 import { partial } from 'lodash';
 import c from 'classnames';
 import { resolveWidget } from 'Lib/registry';
+import { Icon } from 'UI';
 import EditorControl from 'Editor/EditorControlPane/EditorControl';
 
-const TopBar = ({ collapsed, onCollapseToggle }) =>
-  <div className="nc-listControl-topBar">
-    <div className="nc-listControl-listCollapseToggle" onClick={onCollapseToggle}>
-      <Icon type="chevron" direction={collapsed ? 'up' : 'down'} size="small"/>
-      {itemsCount} {listLabel}
+const TopBar = ({ collapsed, onCollapseToggle }) => (
+  <div className="nc-objectControl-topBar">
+    <div className="nc-objectControl-objectCollapseToggle">
+      <button className="nc-listControl-listCollapseToggleButton" onClick={onCollapseToggle}>
+        <Icon type="chevron" direction={collapsed ? 'up' : 'down'} size="small" />
+      </button>
     </div>
-  </div>;
-
+  </div>
+);
 
 export default class ObjectControl extends Component {
   static propTypes = {
@@ -32,6 +34,7 @@ export default class ObjectControl extends Component {
     field: PropTypes.object,
     forID: PropTypes.string,
     classNameWrapper: PropTypes.string.isRequired,
+    forList: PropTypes.bool,
   };
 
   constructor(props) {
@@ -85,15 +88,23 @@ export default class ObjectControl extends Component {
     );
   }
 
+  handleCollapseToggle = () => {
+    this.setState({ collapsed: !this.state.collapsed });
+  }
+
   render() {
-    const { field, forID, classNameWrapper } = this.props;
+    const { field, forID, classNameWrapper, forList } = this.props;
+    const { collapsed } = this.state;
     const multiFields = field.get('fields');
     const singleField = field.get('field');
 
     if (multiFields) {
-      return (<div id={forID} className={c(classNameWrapper, 'nc-objectControl-root')}>
-        {multiFields.map((f, idx) => this.controlFor(f, idx))}
-      </div>);
+      return (
+        <div id={forID} className={c(classNameWrapper, 'nc-objectControl-root')}>
+          { forList ? null : <TopBar collapsed={collapsed} onCollapseToggle={this.handleCollapseToggle} /> }
+          { collapsed ? null : multiFields.map((f, idx) => this.controlFor(f, idx)) }
+        </div>
+      );
     } else if (singleField) {
       return this.controlFor(singleField);
     }