Fixes the sortable component (dnnsoftware#214)

* Fixed the sortable component * Replaced deprecated method usage * Fixed typo * Some cleanup
mikebigun · Jan 24, 2019 · 1e1c405 · 1e1c405
1 parent 42db918
commit 1e1c405
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 44 deletions.
diff --git a/src/Sortable/index.jsx b/src/Sortable/index.jsx
@@ -19,13 +19,16 @@ export default class Sortable extends Component {
             },
             isDraggingOver: false
         };
+        this.dnnSortableRef = React.createRef();
     }
 
-    UNSAFE_componentWillReceiveProps(newProps) {
-        const items = newProps.items.map((item, index) => {
-            return { index, item, id: index };
-        });
-        this.setState({items});
+    componentDidUpdate(prevProps) {
+        if (prevProps.items !== this.props.items){
+            const items = this.props.items.map((item, index) => {
+                return { index, item, id: index };
+            });
+            this.setState({items});
+        }
     }
 
     sortColumns(a, b) {
@@ -37,8 +40,6 @@ export default class Sortable extends Component {
     }
 
     onDragStart(component, event) {
-        const itemElement = ReactDOM.findDOMNode(this.refs.dnnSortable).querySelectorAll(`[data-dnn-sortable-id="${id}"]`)[0];
-
         let dragging = {
             isDragging: true
         };
@@ -76,11 +77,6 @@ export default class Sortable extends Component {
                 items.selected = false;
             }
         });
-        // const itemElement = ReactDOM.findDOMNode(this.refs.dnnSortable).querySelectorAll(`[data-dnn-sortable-id="${id}"]`)[0];
-        // if (selected) {
-        //     return itemElement.classList.add("sortable-selected");
-        // }
-        // itemElement.classList.remove("sortable-selected");
     }
 
     onDragMove() {
@@ -130,7 +126,7 @@ export default class Sortable extends Component {
     sortItem(newIndex) {
         const curIndex = this.currentIndex;
         let {items} = this.state;
-        let currentItem = items.find(i => i.index == curIndex);
+        let currentItem = items.find(i => i.index == curIndex);                
         let itemToReplace = items.find(i => i.index == newIndex);
         if (!itemToReplace) {
             return;
@@ -158,21 +154,24 @@ export default class Sortable extends Component {
 
     sortOnDrag(event, dropX, dropY) {
         let id = event.draggable._element.getAttribute("data-dnn-sortable-id");
-        const itemElement = ReactDOM.findDOMNode(this.refs.dnnSortable).querySelectorAll(`[data-dnn-sortable-id="${id}"]`)[0];
-        itemElement.getAttribute("data-index");
-        const sortableItems = document.getElementsByClassName("sortable-item");
-        let newIndex = this.getNewIndex(sortableItems, dropY);
-
-        if (this.currentIndex == -1) {
-            const currentIndex = itemElement.getAttribute("data-index");
-            this.currentIndex = currentIndex;
-        }
+        if (this.dnnSortableRef.current)
+        {
+            const itemElement = this.dnnSortableRef.current.querySelectorAll(`[data-dnn-sortable-id="${id}"]`)[0];
+            itemElement.getAttribute("data-index");
+            const sortableItems = document.getElementsByClassName("sortable-item");
+            let newIndex = this.getNewIndex(sortableItems, dropY);
+
+            if (this.currentIndex == -1) {
+                const currentIndex = itemElement.getAttribute("data-index");
+                this.currentIndex = currentIndex;
+            }
 
-        const isSameIndex = newIndex == this.currentIndex;
-        if (isSameIndex) {
-            return;
+            const isSameIndex = newIndex == this.currentIndex;
+            if (isSameIndex) {
+                return;
+            }
+            this.sortItem(newIndex);
         }
-        this.sortItem(newIndex);
     }
 
     onDrop(event, dropX, dropY) {
@@ -183,22 +182,24 @@ export default class Sortable extends Component {
             return;
         }
         let id = event.draggable._element.getAttribute("data-dnn-sortable-id");
-        const itemElement = ReactDOM.findDOMNode(this.refs.dnnSortable).querySelectorAll(`[data-dnn-sortable-id="${id}"]`)[0];
-        itemElement.classList.remove("sortable-selected");
-        this.removePlaceholder();
-        const sortableItems = document.getElementsByClassName("sortable-item");
-        let newIndex = this.getNewIndex(sortableItems, dropY);
-        const currentIndex = event.draggable._element.getAttribute("data-index");
-        const isSameIndex = currentIndex != null && (newIndex == currentIndex || newIndex - 1 == currentIndex);
-        if (isSameIndex) {
-            return;
-        }
+        if (this.dnnSortableRef.current){
+            const itemElement = this.dnnSortableRef.current.querySelectorAll(`[data-dnn-sortable-id="${id}"]`)[0];
+            itemElement.classList.remove("sortable-selected");
+            this.removePlaceholder();
+            const sortableItems = document.getElementsByClassName("sortable-item");
+            let newIndex = this.getNewIndex(sortableItems, dropY);
+            const currentIndex = event.draggable._element.getAttribute("data-index");
+            const isSameIndex = currentIndex != null && (newIndex == currentIndex || newIndex - 1 == currentIndex);
+            if (isSameIndex) {
+                return;
+            }
 
-        let {items} = this.state;
-        items = this.updateIndexes(items, newIndex);
-        this.moveItem(items, id, newIndex);
-        this.resetIndexes(items);
-        this.setState({ items }, this.callProps.bind(this));
+            let {items} = this.state;
+            items = this.updateIndexes(items, newIndex);
+            this.moveItem(items, id, newIndex);
+            this.resetIndexes(items);
+            this.setState({ items }, this.callProps.bind(this));
+        }
     }
 
     callProps() {
@@ -229,7 +230,7 @@ export default class Sortable extends Component {
             });
         });
 
-        return <div className="dnn-sortable" ref="dnnSortable">
+        return <div className="dnn-sortable" ref={this.dnnSortableRef}>
             <SortableContainer
                 onDragMove={this.onDragMove.bind(this) }
                 onDragStart={this.onDragStart.bind(this) }
@@ -250,6 +251,5 @@ Sortable.propTypes = {
     children: PropTypes.node.isRequired,
     items: PropTypes.array.isRequired,
     onSort: PropTypes.func.isRequired,
-
     sortOnDrag: PropTypes.bool
 };
diff --git a/src/Sortable/sortable.stories.js b/src/Sortable/sortable.stories.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Component } from "react";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 import Sortable from "./index";
@@ -13,6 +13,16 @@ storiesOf("Sortable", module).add("with content", () => (
     </Sortable>
 ));
 
+storiesOf("Sortable", module).add("in rows", () => (
+    <Sortable
+        onSort={action("Sorted")}
+        items={testProperties}
+        sortOnDrag={true}>
+            {renderRows()}
+        </Sortable>
+
+));
+
 const testProperties =
     [
         {
@@ -43,4 +53,27 @@ function renderedProperties() {
                 name={item.name} label={item.name} />
         );
     });
+}
+
+function renderRows() {
+    let i=0;
+    return testProperties.map((item, index) => {
+        return (
+            <MyComponent
+                key={"row-" + index}
+                id={item.id}
+                name={item.name}
+            ></MyComponent>
+        );
+    });
+}
+
+export default class MyComponent extends Component{
+    render(){
+        return(
+            <div className="my-component">
+                <span>{this.props.name}</span>
+            </div>
+        );
+    }
 }