fix: updated the behaviour of disabled elements

Author: Clauderic Demers

src/.stories/Storybook.scss

@@ -46,6 +46,11 @@
   font-weight: 400;
 }
 
+.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
 // Drag handle
 .handle {
   display: block;

src/.stories/index.js

@@ -32,7 +32,10 @@ const Handle = SortableHandle(() => <div className={style.handle} />);
 const Item = SortableElement((props) => {
   return (
     <div
-      className={props.className}
+      className={classNames(
+        props.className,
+        props.isDisabled && style.disabled,
+      )}
       style={{
         height: props.height,
         ...props.style,
@@ -47,19 +50,25 @@ const Item = SortableElement((props) => {
 });
 
 const SortableList = SortableContainer(
-  ({className, items, itemClass, shouldUseDragHandle}) => {
+  ({className, items, disabledItems = [], itemClass, shouldUseDragHandle}) => {
     return (
       <div className={className}>
-        {items.map(({value, height}, index) => (
-          <Item
-            key={`item-${value}`}
-            className={itemClass}
-            index={index}
-            value={value}
-            height={height}
-            shouldUseDragHandle={shouldUseDragHandle}
-          />
-        ))}
+        {items.map(({value, height}, index) => {
+          const disabled = disabledItems.includes(value);
+
+          return (
+            <Item
+              key={`item-${value}`}
+              disabled={disabled}
+              isDisabled={disabled}
+              className={itemClass}
+              index={index}
+              value={value}
+              height={height}
+              shouldUseDragHandle={shouldUseDragHandle}
+            />
+          );
+        })}
       </div>
     );
   },
@@ -119,6 +128,7 @@ class ListWrapper extends Component {
     onSortEnd: PropTypes.func,
     component: PropTypes.func,
     shouldUseDragHandle: PropTypes.bool,
+    disabledItems: PropTypes.arrayOf(PropTypes.string),
   };
 
   static defaultProps = {
@@ -367,6 +377,18 @@ storiesOf('Basic Configuration', module)
       </div>
     );
   })
+  .add('Disabled items', () => {
+    return (
+      <div className={style.root}>
+        <ListWrapper
+          component={SortableList}
+          items={getItems(10, 59)}
+          helperClass={style.stylizedHelper}
+          disabledItems={[2, 3, 7]}
+        />
+      </div>
+    );
+  })
   .add('Elements that shrink', () => {
     const getHelperDimensions = ({node}) => ({
       height: 20,
@@ -480,11 +502,13 @@ storiesOf('Advanced', module)
   })
   .add('Custom sortable helper container', () => {
     return (
-      <ListWrapper
-        component={SortableListWithCustomContainer}
-        items={getItems(50, 59)}
-        helperClass={style.stylizedHelper}
-      />
+      <div className={style.root}>
+        <ListWrapper
+          component={SortableListWithCustomContainer}
+          items={getItems(50, 59)}
+          helperClass={style.stylizedHelper}
+        />
+      </div>
     );
   });
 

src/SortableContainer/index.js

@@ -190,7 +190,11 @@ export default function sortableContainer(
         !this.state.sorting
       ) {
         const {useDragHandle} = this.props;
-        const {index, collection} = node.sortableInfo;
+        const {index, collection, disabled} = node.sortableInfo;
+
+        if (disabled) {
+          return;
+        }
 
         if (
           useDragHandle &&
@@ -596,7 +600,7 @@ export default function sortableContainer(
 
       for (let i = 0, len = nodes.length; i < len; i++) {
         const {node} = nodes[i];
-        const index = node.sortableInfo.index;
+        const {index} = node.sortableInfo;
         const width = node.offsetWidth;
         const height = node.offsetHeight;
         const offset = {

src/SortableElement/index.js

@@ -30,54 +30,48 @@ export default function sortableElement(
     };
 
     componentDidMount() {
-      const {collection, disabled, index} = this.props;
-
-      if (!disabled) {
-        this.setDraggable(collection, index);
-      }
+      this.register();
     }
 
-    componentWillReceiveProps(nextProps) {
-      if (this.props.index !== nextProps.index && this.node) {
-        this.node.sortableInfo.index = nextProps.index;
-      }
+    componentDidUpdate(prevProps) {
+      if (this.node) {
+        if (prevProps.index !== this.props.index) {
+          this.node.sortableInfo.index = this.props.index;
+        }
 
-      if (this.props.disabled !== nextProps.disabled) {
-        const {collection, disabled, index} = nextProps;
-        if (disabled) {
-          this.removeDraggable(collection);
-        } else {
-          this.setDraggable(collection, index);
+        if (prevProps.disabled !== this.props.disabled) {
+          this.node.sortableInfo.disabled = this.props.disabled;
         }
-      } else if (this.props.collection !== nextProps.collection) {
-        this.removeDraggable(this.props.collection);
-        this.setDraggable(nextProps.collection, nextProps.index);
+      }
+
+      if (prevProps.collection !== this.props.collection) {
+        this.unregister(prevProps.collection);
+        this.register();
       }
     }
 
     componentWillUnmount() {
-      const {collection, disabled} = this.props;
-
-      if (!disabled) {
-        this.removeDraggable(collection);
-      }
+      this.unregister();
     }
 
-    setDraggable(collection, index) {
+    register() {
+      const {collection, disabled, index} = this.props;
       const node = findDOMNode(this);
 
       node.sortableInfo = {
         index,
         collection,
+        disabled,
         manager: this.context.manager,
       };
 
       this.node = node;
       this.ref = {node};
+
       this.context.manager.add(collection, this.ref);
     }
 
-    removeDraggable(collection) {
+    unregister(collection = this.props.collection) {
       this.context.manager.remove(collection, this.ref);
     }