refactor: add mirror classes

Author: zjffun

src/Draggable/Plugins/Mirror/Mirror.js

@@ -275,7 +275,7 @@ export default class Mirror extends AbstractPlugin {
    * @private
    */
   [onMirrorCreated]({mirror, source, sensorEvent}) {
-    const mirrorClass = this.draggable.getClassNamesFor('mirror');
+    const mirrorClasses = this.draggable.getClassNamesFor('mirror');
 
     const setState = ({mirrorOffset, initialX, initialY, ...args}) => {
       this.mirrorOffset = mirrorOffset;
@@ -292,7 +292,7 @@ export default class Mirror extends AbstractPlugin {
       mirror,
       source,
       sensorEvent,
-      mirrorClass,
+      mirrorClasses,
       scrollOffset: this.scrollOffset,
       options: this.options,
       passedThreshX: true,
@@ -446,18 +446,14 @@ function resetMirror({mirror, source, options, ...args}) {
  * Applys mirror class on mirror element
  * @param {Object} state
  * @param {HTMLElement} state.mirror
- * @param {String|String[]} state.mirrorClass
+ * @param {String[]} state.mirrorClasses
  * @return {Promise}
  * @private
  */
-function addMirrorClasses({mirror, mirrorClass, ...args}) {
+function addMirrorClasses({mirror, mirrorClasses, ...args}) {
   return withPromise((resolve) => {
-    if (mirrorClass instanceof Array) {
-      mirror.classList.add(...mirrorClass);
-    } else {
-      mirror.classList.add(mirrorClass);
-    }
-    resolve({mirror, mirrorClass, ...args});
+    mirror.classList.add(...mirrorClasses);
+    resolve({mirror, mirrorClasses, ...args});
   });
 }
 

src/Draggable/README.md

@@ -124,7 +124,7 @@ 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. Accept String or Array of strings.
 
-**NOTE**: When specifying multiple classes to an indicate state, the first class MUST be unique for that state to avoid duplicate classes for other states. 
+**NOTE**: When specifying multiple classes to an indicate state, the first class MUST be unique for that state to avoid duplicate classes for other states. IE doesn't support add or remove multiple classes. If you want to use multiple classes in IE, you need to add a classList polyfill to your project first.
 
 **`exclude {plugins: Plugin[], sensors: Sensor[]}`**  
 Allow excluding default plugins and default sensors. Use with caution as it may create strange behavior.
@@ -209,7 +209,7 @@ import { Draggable } from '@shopify/draggable';
 const draggable = new Draggable(document.querySelectorAll('ul'), {
   draggable: 'li',
   classes: {
-    'draggable:over': ['draggable--over', '.bg-red-200', 'bg-opacity-25'],
+    'draggable:over': ['draggable--over', 'bg-red-200', 'bg-opacity-25'],
   },
 });
 ```