Migrate ListControl from react-sortable to react-sortable-hoc

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 {
-  position: absolute;
-  top: 2px;
+  cursor: move;
   display: block;
-  width: 100%;
+  position: absolute;
   text-align: center;
+  top: 2px;
+  width: 100%;
+  z-index: 1;
 }

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}
     />);
   }
-}
+};