@elice/material-quiz 1.240715.0-touch.4 → 1.240715.0

package/cjs/components/eb-sortable/EbDraggable.d.ts

@@ -1,8 +1,19 @@
+/// <reference types="jquery" />
+/// <reference types="jquery" />
+/// <reference types="jqueryui" />
 import React from 'react';
+import 'jquery-ui/ui/widgets/draggable';
 interface EbDraggableProps {
-    id: string;
+    id?: string;
     className?: string;
+    connectWith?: JQuery.Selector;
     disabled?: boolean;
+    revert?: boolean;
+    clone?: boolean;
+    onStart?: (event: JQueryEventObject, ui: JQueryUI.DraggableEventUIParams) => void;
+    onStop?: (event: JQueryEventObject, ui: JQueryUI.DraggableEventUIParams) => void;
+    onDrag?: (event: JQueryEventObject, ui: JQueryUI.DraggableEventUIParams) => void;
+    onCreate?: (event: JQueryEventObject, ui: JQueryUI.DraggableEventUIParams) => void;
 }
 declare const EbDraggable: React.FC<EbDraggableProps>;
 export default EbDraggable;

package/cjs/components/eb-sortable/EbDraggable.js

@@ -3,42 +3,104 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var core = require('@dnd-kit/core');
-var utilities = require('@dnd-kit/utilities');
+var $ = require('jquery');
+require('jquery-ui/ui/widgets/draggable');
 
-//
-//
-//
 const EbDraggable = ({
   children,
   id,
+  disabled = false,
+  revert = true,
+  clone = false,
   className,
-  disabled = false
+  onStart,
+  onStop,
+  onDrag,
+  onCreate
 }) => {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    isDragging
-  } = core.useDraggable({
-    id,
-    disabled
-  });
-  const style = {
-    transform: utilities.CSS.Translate.toString(transform),
-    cursor: disabled ? 'auto' : 'move'
-  };
-  //
-  //
-  //
-  return React.createElement("div", Object.assign({
-    ref: setNodeRef,
+  const rootEl = React.useRef(null);
+  const onStartCallback = React.useCallback((event, ui) => {
+    if (onStart) {
+      return onStart(event, ui);
+    } else {
+      return () => {
+        return;
+      };
+    }
+  }, [onStart]);
+  const onStopCallback = React.useCallback((event, ui) => {
+    if (onStop) {
+      return onStop(event, ui);
+    } else {
+      return () => {
+        return;
+      };
+    }
+  }, [onStop]);
+  const onDragCallback = React.useCallback((event, ui) => {
+    if (onDrag) {
+      return onDrag(event, ui);
+    } else {
+      return () => {
+        return;
+      };
+    }
+  }, [onDrag]);
+  const onCreateCallback = React.useCallback((event, ui) => {
+    if (onCreate) {
+      return onCreate(event, ui);
+    } else {
+      return () => {
+        return;
+      };
+    }
+  }, [onCreate]);
+  React.useEffect(() => {
+    if (!rootEl.current) {
+      return;
+    }
+    const draggableEl = $(rootEl.current);
+    draggableEl.draggable(Object.assign(Object.assign(Object.assign(Object.assign({}, disabled ? {
+      disabled
+    } : null), revert ? {
+      revert
+    } : null), clone ? {
+      helper: 'clone'
+    } : null), {
+      zIndex: 200,
+      revertDuration: 0,
+      start: (event, ui) => {
+        if (!onStartCallback) {
+          return;
+        }
+        onStartCallback(event, ui);
+      },
+      stop: (event, ui) => {
+        if (!onStopCallback) {
+          return;
+        }
+        // draggableEl.draggable('cancel');
+        onStopCallback(event, ui);
+      },
+      drag: (event, ui) => {
+        onDragCallback(event, ui);
+      },
+      create: (event, ui) => {
+        onCreateCallback(event, ui);
+      }
+    }));
+    return () => {
+      draggableEl.draggable('destroy');
+    };
+  }, [clone, disabled, onCreateCallback, onDragCallback, onStartCallback, onStopCallback, revert]);
+  return React.createElement("div", {
+    ref: rootEl,
+    id: id,
     className: className,
-    style: isDragging ? Object.assign(Object.assign({}, style), {
-      zIndex: 1000
-    }) : style
-  }, listeners, attributes), children);
+    style: {
+      cursor: disabled ? 'auto' : 'move'
+    }
+  }, children);
 };
 
 exports.default = EbDraggable;

package/cjs/components/eb-sortable/EbDroppable.d.ts

@@ -1,9 +1,14 @@
+/// <reference types="jquery" />
+/// <reference types="jquery" />
+/// <reference types="jqueryui" />
 import React from 'react';
-interface EbDroppableProps {
-    id: string;
+import 'jquery-ui/ui/widgets/droppable';
+export interface EbDroppableProps {
+    id?: string;
     className?: string;
     disabled?: boolean;
-    accept?: string;
+    accept?: JQuery.Selector;
+    onDrop?: (event: JQueryEventObject, ui: JQueryUI.DroppableEventUIParam) => void;
 }
 declare const EbDroppable: React.FC<EbDroppableProps>;
 export default EbDroppable;

package/cjs/components/eb-sortable/EbDroppable.js

@@ -3,32 +3,51 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var core = require('@dnd-kit/core');
+var $ = require('jquery');
+require('jquery-ui/ui/widgets/droppable');
 
-//
-//
-//
 const EbDroppable = ({
   children,
   id,
-  className,
   disabled = false,
-  accept
+  accept,
+  className,
+  onDrop
 }) => {
-  const {
-    setNodeRef
-  } = core.useDroppable({
-    id,
-    disabled,
-    data: {
-      accept
+  const rootEl = React.useRef(null);
+  const onDropCallback = React.useCallback((event, ui) => {
+    if (onDrop) {
+      return onDrop(event, ui);
+    } else {
+      return () => {
+        return;
+      };
     }
-  });
-  //
-  //
-  //
+  }, [onDrop]);
+  React.useEffect(() => {
+    if (!rootEl.current) {
+      return;
+    }
+    const draggableEl = $(rootEl.current);
+    draggableEl.droppable(Object.assign(Object.assign(Object.assign({}, disabled ? {
+      disabled
+    } : null), accept ? {
+      accept
+    } : null), {
+      drop: (event, ui) => {
+        if (!onDropCallback) {
+          return;
+        }
+        onDropCallback(event, ui);
+      }
+    }));
+    return () => {
+      draggableEl.droppable('destroy');
+    };
+  }, [accept, disabled, onDropCallback]);
   return React.createElement("div", {
-    ref: setNodeRef,
+    ref: rootEl,
+    id: id,
     className: className
   }, children);
 };

package/cjs/components/material-quiz/MaterialQuizSelectMultiple.js

@@ -10,9 +10,8 @@ var material = require('@mui/material');
 var element = require('../../constant/element.js');
 var index = require('../../helpers/index.js');
 var useCaculatePassage = require('../../hooks/useCaculatePassage.js');
-require('../shared/QuizDraggbleDroppedOption.js');
-require('../shared/QuizDraggbleDummyOption.js');
 require('../shared/QuizDraggbleOption.js');
+require('../shared/QuizDraggbleDummyOption.js');
 require('../shared/question-radio/QuestionRadio.js');
 require('../shared/question-radio/QuestionRadioOption.js');
 var QuestionCheckbox = require('../shared/question-checkbox/QuestionCheckbox.js');