Add exclude field to Draggable options to allow disable default plugins and sensors

Remove duplicated code

Refactor to more readable

Change 'toBe' to 'toEqual' for compare value only

Author: bahung1221

src/Draggable/Draggable.js

@@ -52,6 +52,10 @@ export const defaultOptions = {
   placedTimeout: 800,
   plugins: [],
   sensors: [],
+  exclude: {
+    plugins: [],
+    sensors: [],
+  },
 };
 
 /**
@@ -72,6 +76,16 @@ export default class Draggable {
    */
   static Plugins = {Announcement, Focusable, Mirror, Scrollable};
 
+  /**
+   * Default sensors draggable uses
+   * @static
+   * @property {Object} Sensors
+   * @property {MouseSensor} Sensors.MouseSensor
+   * @property {TouchSensor} Sensors.TouchSensor
+   * @type {Object}
+   */
+  static Sensors = {MouseSensor, TouchSensor};
+
   /**
    * Draggable constructor.
    * @constructs Draggable
@@ -103,6 +117,10 @@ export default class Draggable {
         ...defaultAnnouncements,
         ...(options.announcements || {}),
       },
+      exclude: {
+        plugins: (options.exclude && options.exclude.plugins) || [],
+        sensors: (options.exclude && options.exclude.sensors) || [],
+      },
     };
 
     /**
@@ -143,8 +161,12 @@ export default class Draggable {
     document.addEventListener('drag:stop', this[onDragStop], true);
     document.addEventListener('drag:pressure', this[onDragPressure], true);
 
-    const defaultPlugins = Object.values(Draggable.Plugins).map((Plugin) => Plugin);
-    const defaultSensors = [MouseSensor, TouchSensor];
+    const defaultPlugins = Object.values(Draggable.Plugins).filter(
+      (Plugin) => !this.options.exclude.plugins.includes(Plugin),
+    );
+    const defaultSensors = Object.values(Draggable.Sensors).filter(
+      (sensor) => !this.options.exclude.sensors.includes(sensor),
+    );
 
     this.addPlugin(...[...defaultPlugins, ...this.options.plugins]);
     this.addSensor(...[...defaultSensors, ...this.options.sensors]);

src/Draggable/Plugins/Focusable/Focusable.js

@@ -51,6 +51,9 @@ export default class Focusable extends AbstractPlugin {
    */
   detach() {
     this.draggable.off('draggable:initialize', this[onInitialize]).off('draggable:destroy', this[onDestroy]);
+
+    // Remove modified elements when detach
+    this[onDestroy]();
   }
 
   /**

src/Draggable/README.md

@@ -96,6 +96,9 @@ By default draggable includes the `MouseSensor` & `TouchSensor`. Default: `[]`
 Draggable adds classes to elements to indicate state. These classes can be used to add styling
 on elements in certain states.
 
+**`exclude {plugins: Plugin[], sensors: Sensor[]}`**  
+Allow excluding default plugins and default sensors. Use with caution as it may create strange behavior.
+
 ### Events
 
 | Name                                       | Description                                               | Cancelable | Cancelable action   |
@@ -151,3 +154,17 @@ draggable.on('drag:start', () => console.log('drag:start'));
 draggable.on('drag:move', () => console.log('drag:move'));
 draggable.on('drag:stop', () => console.log('drag:stop'));
 ```
+
+Create draggable which excluded some default plugins and sensor:
+
+```js
+import { Draggable } from '@shopify/draggable';
+
+const draggable = new Draggable(document.querySelectorAll('ul'), {
+  draggable: 'li',
+  exclude: {
+    plugins: [Draggable.Plugins.Focusable],
+    sensors: [Draggable.Sensors.TouchSensor],
+  }
+});
+```

src/Draggable/tests/Draggable.test.js

@@ -64,7 +64,7 @@ describe('Draggable', () => {
 
       for (const key in defaultOptions) {
         if (defaultOptions.hasOwnProperty(key)) {
-          expect(newInstance.options[key]).toBe(defaultOptions[key]);
+          expect(newInstance.options[key]).toEqual(defaultOptions[key]);
         }
       }
     });
@@ -105,6 +105,20 @@ describe('Draggable', () => {
       expect(newInstance.plugins[3]).toBeInstanceOf(Scrollable);
     });
 
+    it('should remove default plugins from the list of exclude plugins', () => {
+      const newInstance = new Draggable([], {
+        exclude: {
+          plugins: [Draggable.Plugins.Focusable],
+        },
+      });
+
+      expect(newInstance.plugins).toHaveLength(3);
+
+      newInstance.plugins.forEach((plugin) => {
+        expect(plugin).not.toBeInstanceOf(Focusable);
+      });
+    });
+
     it('should attach custom plugins', () => {
       const newInstance = new Draggable([], {
         plugins: [TestPlugin],
@@ -133,6 +147,20 @@ describe('Draggable', () => {
       expect(newInstance.sensors[1]).toBeInstanceOf(TouchSensor);
     });
 
+    it('should remove default sensors from the list of exclude sensors', () => {
+      const newInstance = new Draggable([], {
+        exclude: {
+          sensors: [Draggable.Sensors.TouchSensor],
+        },
+      });
+
+      expect(newInstance.sensors).toHaveLength(1);
+
+      newInstance.sensors.forEach((sensor) => {
+        expect(sensor).not.toBeInstanceOf(TouchSensor);
+      });
+    });
+
     it('should trigger DraggableInitializedEvent on init', () => {
       const spy = jest.spyOn(Draggable.prototype, 'trigger');
       const newInstance = new Draggable();