From 9c1683a887f8af6affaca0dcb5cdcb72300da140 Mon Sep 17 00:00:00 2001
From: Benaiah Mischenko <benaiah@mischenko.com>
Date: Mon, 16 Oct 2017 18:16:03 -0700
Subject: [PATCH 1/3] Migrate ListControl from react-sortable to
 react-sortable-hoc

---
 package.json                           |  2 +-
 src/components/Widgets/ListControl.css |  7 ++-
 src/components/Widgets/ListControl.js  | 82 +++++++++++++-------------
 yarn.lock                              | 15 +++--
 4 files changed, 57 insertions(+), 49 deletions(-)

diff --git a/package.json b/package.json
index 82dc7a44587a..a1fd868cc3dd 100644
--- a/package.json
+++ b/package.json
@@ -154,7 +154,7 @@
     "react-router-dom": "^4.2.2",
     "react-router-redux": "^5.0.0-alpha.6",
     "react-sidebar": "^2.2.1",
-    "react-sortable": "^1.2.0",
+    "react-sortable-hoc": "^0.6.8",
     "react-split-pane": "^0.1.66",
     "react-toolbox": "^2.0.0-beta.12",
     "react-topbar-progress-indicator": "^1.0.0",
diff --git a/src/components/Widgets/ListControl.css b/src/components/Widgets/ListControl.css
index 72aaa7dcc01a..e6798ed51351 100644
--- a/src/components/Widgets/ListControl.css
+++ b/src/components/Widgets/ListControl.css
@@ -52,7 +52,6 @@
 .nc-listControl-item {
   position: relative;
   padding-left: 24px;
-  cursor: move;
 }
 
 .nc-listControl-objectLabel {
@@ -83,9 +82,11 @@
 }
 
 .nc-listControl-dragIcon {
+  cursor: move;
+  display: block;
   position: absolute;
+  text-align: center;
   top: 2px;
-  display: block;
   width: 100%;
-  text-align: center;
+  z-index: 1;
 }
diff --git a/src/components/Widgets/ListControl.js b/src/components/Widgets/ListControl.js
index ddf6ece6f363..d40e015aea25 100644
--- a/src/components/Widgets/ListControl.js
+++ b/src/components/Widgets/ListControl.js
@@ -1,12 +1,12 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { List, Map, fromJS } from 'immutable';
-import { sortable } from 'react-sortable';
+import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
 import FontIcon from 'react-toolbox/lib/font_icon';
 import ObjectControl from './ObjectControl';
 
 function ListItem(props) {
-  return <div {...props} className={`list-item ${ props.className }`}>{props.children}</div>;
+  return <div {...props} className={`list-item ${ props.className || '' }`}>{props.children}</div>;
 }
 ListItem.propTypes = {
   className: PropTypes.string,
@@ -18,7 +18,12 @@ function valueToString(value) {
   return value ? value.join(',').replace(/,([^\s]|$)/g, ', $1') : '';
 }
 
-const SortableListItem = sortable(ListItem);
+const SortableListItem = SortableElement(ListItem);
+const DragHandle = SortableHandle(
+  () => <FontIcon value="drag_handle" className="nc-listControl-dragIcon" />
+);
+const SortableList = SortableContainer(({ items, renderItem }) =>
+  (<div>{items.map(renderItem)}</div>));
 
 const valueTypes = {
   SINGLE: 'SINGLE',
@@ -126,55 +131,52 @@ export default class ListControl extends Component {
     return value || `No ${ labelField.get('name') }`;
   }
 
-  handleSort = (obj) => {
-    this.setState({ draggingIndex: obj.draggingIndex });
-    if ('items' in obj) {
-      this.props.onChange(fromJS(obj.items));
-    }
+  onSortEnd = ({ oldIndex, newIndex }) => {
+    const { value, onChange } = this.props;
+    const item = value.get(oldIndex);
+    const newValue = value.delete(oldIndex).insert(newIndex, item);
+    this.props.onChange(newValue);
   };
 
-  renderItem(item, index) {
-    const { value, field, getAsset, onAddAsset, onRemoveAsset } = this.props;
+  renderItem = (item, index) => {
+    const { field, getAsset, onAddAsset, onRemoveAsset } = this.props;
     const { itemStates } = this.state;
     const collapsed = itemStates.getIn([index, 'collapsed']);
     const classNames = ['nc-listControl-item', collapsed ? 'nc-listControl-collapsed' : 'nc-listControl-expanded'];
 
-    return (<SortableListItem
-      key={index}
-      updateState={this.handleSort} // eslint-disable-line
-      items={value ? value.toJS() : []}
-      draggingIndex={this.state.draggingIndex}
-      sortId={index}
-      outline="list"
-    >
-      <div className={classNames.join(' ')}>
-        <button className="nc-listControl-toggleButton" onClick={this.handleToggle(index)}>
-          <FontIcon value={collapsed ? 'expand_more' : 'expand_less'} />
-        </button>
-        <FontIcon value="drag_handle" className="nc-listControl-dragIcon" />
-        <button className="nc-listControl-removeButton" onClick={this.handleRemove(index)}>
-          <FontIcon value="close" />
-        </button>
-        <div className="nc-listControl-objectLabel">{this.objectLabel(item)}</div>
-        <ObjectControl
-          value={item}
-          field={field}
-          className="nc-listControl-objectControl"
-          onChange={this.handleChangeFor(index)}
-          getAsset={getAsset}
-          onAddAsset={onAddAsset}
-          onRemoveAsset={onRemoveAsset}
-        />
-      </div>
+    return (<SortableListItem className={classNames.join(' ')} index={index} key={`item-${ index }`}>
+      <button className="nc-listControl-toggleButton" onClick={this.handleToggle(index)}>
+        <FontIcon value={collapsed ? 'expand_more' : 'expand_less'} />
+      </button>
+      <DragHandle />
+      <button className="nc-listControl-removeButton" onClick={this.handleRemove(index)}>
+        <FontIcon value="close" />
+      </button>
+      <div className="nc-listControl-objectLabel">{this.objectLabel(item)}</div>
+      <ObjectControl
+        value={item}
+        field={field}
+        className="nc-listControl-objectControl"
+        onChange={this.handleChangeFor(index)}
+        getAsset={getAsset}
+        onAddAsset={onAddAsset}
+        onRemoveAsset={onRemoveAsset}
+      />
     </SortableListItem>);
-  }
+  };
 
   renderListControl() {
     const { value, forID, field } = this.props;
     const listLabel = field.get('label');
 
     return (<div id={forID}>
-      {value && value.map((item, index) => this.renderItem(item, index))}
+      <SortableList
+        items={value || List()}
+        renderItem={this.renderItem}
+        onSortEnd={this.onSortEnd}
+        useDragHandle
+        lockAxis="y"
+      />
       <button className="nc-listControl-addButton" onClick={this.handleAdd}>
         <FontIcon value="add" className="nc-listControl-addButtonIcon" />
         <span className="nc-listControl-addButtonText">new {listLabel}</span>
@@ -198,4 +200,4 @@ export default class ListControl extends Component {
       onBlur={this.handleCleanup}
     />);
   }
-}
+};
diff --git a/yarn.lock b/yarn.lock
index f27bd124bc1f..fad2d347deba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1177,7 +1177,7 @@ babel-register@^6.26.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-babel-runtime@6.x.x, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.5.0, babel-runtime@^6.6.1, babel-runtime@^6.9.2:
+babel-runtime@6.x.x, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.5.0, babel-runtime@^6.6.1, babel-runtime@^6.9.2:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   dependencies:
@@ -5303,7 +5303,7 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-"lodash@4.6.1 || ^4.16.1", lodash@^4.0.0, lodash@^4.1.0, lodash@^4.11.2, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.16.2, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@^4.6.1, lodash@^4.7.0:
+"lodash@4.6.1 || ^4.16.1", lodash@^4.0.0, lodash@^4.1.0, lodash@^4.11.2, lodash@^4.12.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.16.2, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@^4.6.1, lodash@^4.7.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -7536,9 +7536,14 @@ react-simple-di@^1.2.0:
     babel-runtime "6.x.x"
     hoist-non-react-statics "1.x.x"
 
-react-sortable@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/react-sortable/-/react-sortable-1.2.0.tgz#5acd7e1910df665408957035acb5f2354519d849"
+react-sortable-hoc@^0.6.8:
+  version "0.6.8"
+  resolved "https://registry.yarnpkg.com/react-sortable-hoc/-/react-sortable-hoc-0.6.8.tgz#b08562f570d7c41f6e393fca52879d2ebb9118e9"
+  dependencies:
+    babel-runtime "^6.11.6"
+    invariant "^2.2.1"
+    lodash "^4.12.0"
+    prop-types "^15.5.7"
 
 react-split-pane@^0.1.66:
   version "0.1.66"

From 0ab37fd183b4e36926a63a2a05aa2a05f7c4e760 Mon Sep 17 00:00:00 2001
From: Benaiah Mischenko <benaiah@mischenko.com>
Date: Fri, 20 Oct 2017 14:45:41 -0700
Subject: [PATCH 2/3] Make collapsing persist on correct item when sorting

---
 src/components/Widgets/ListControl.js | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/Widgets/ListControl.js b/src/components/Widgets/ListControl.js
index d40e015aea25..10c9ca09d16f 100644
--- a/src/components/Widgets/ListControl.js
+++ b/src/components/Widgets/ListControl.js
@@ -43,7 +43,7 @@ export default class ListControl extends Component {
 
   constructor(props) {
     super(props);
-    this.state = { itemStates: Map(), value: valueToString(props.value) };
+    this.state = { itemsCollapsed: List(), value: valueToString(props.value) };
     this.valueType = null;
   }
 
@@ -115,9 +115,9 @@ export default class ListControl extends Component {
   handleToggle(index) {
     return (e) => {
       e.preventDefault();
-      const { itemStates } = this.state;
+      const { itemsCollapsed } = this.state;
       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 }) => {
     const { value, onChange } = this.props;
+
+    // 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 });
   };
 
   renderItem = (item, index) => {
     const { field, getAsset, onAddAsset, onRemoveAsset } = this.props;
-    const { itemStates } = this.state;
-    const collapsed = itemStates.getIn([index, 'collapsed']);
+    const { itemsCollapsed } = this.state;
+    const collapsed = itemsCollapsed.get(index);
     const classNames = ['nc-listControl-item', collapsed ? 'nc-listControl-collapsed' : 'nc-listControl-expanded'];
 
     return (<SortableListItem className={classNames.join(' ')} index={index} key={`item-${ index }`}>

From 79ce94ab1c9ad5d3e81d12ac7314f0c8aeb19b37 Mon Sep 17 00:00:00 2001
From: Shawn Erquhart <shawn@erquh.art>
Date: Mon, 23 Oct 2017 12:25:55 -0400
Subject: [PATCH 3/3] fix list object styling

---
 src/components/Widgets/ListControl.css | 18 ++++++++++--------
 src/components/Widgets/ListControl.js  |  2 +-
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/Widgets/ListControl.css b/src/components/Widgets/ListControl.css
index e6798ed51351..4a28af7a170a 100644
--- a/src/components/Widgets/ListControl.css
+++ b/src/components/Widgets/ListControl.css
@@ -64,14 +64,6 @@
   display: none;
 }
 
-.nc-listControl-objectControl {
-  display: block;
-  border-top: 28px solid rgba(0,0,0,0.1);
-  border-top-left-radius: 0;
-}
-
-.nc-listControl-expanded {}
-
 .nc-listControl-collapsed {
   & .nc-listControl-objectLabel {
     display: block;
@@ -90,3 +82,13 @@
   width: 100%;
   z-index: 1;
 }
+
+/**
+ * Styles for objects nested within lists.
+ */
+.nc-listControl-item .nc-listControl-objectControl {
+  display: block;
+  border-top: 28px solid rgba(0,0,0,0.1);
+  border-top-left-radius: 0;
+}
+
diff --git a/src/components/Widgets/ListControl.js b/src/components/Widgets/ListControl.js
index 10c9ca09d16f..33e2f7cd19d6 100644
--- a/src/components/Widgets/ListControl.js
+++ b/src/components/Widgets/ListControl.js
@@ -150,7 +150,7 @@ export default class ListControl extends Component {
     const { field, getAsset, onAddAsset, onRemoveAsset } = this.props;
     const { itemsCollapsed } = this.state;
     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' : ''];
 
     return (<SortableListItem className={classNames.join(' ')} index={index} key={`item-${ index }`}>
       <button className="nc-listControl-toggleButton" onClick={this.handleToggle(index)}>