@elice/material-quiz 1.240712.0 → 1.240715.0-touch.1

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

@@ -1,19 +1,8 @@
-/// <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,104 +3,39 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var $ = require('jquery');
-require('jquery-ui/ui/widgets/draggable');
+var core = require('@dnd-kit/core');
+var utilities = require('@dnd-kit/utilities');
 
+//
+//
+//
 const EbDraggable = ({
   children,
   id,
-  disabled = false,
-  revert = true,
-  clone = false,
   className,
-  onStart,
-  onStop,
-  onDrag,
-  onCreate
+  disabled = false
 }) => {
-  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,
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform
+  } = core.useDraggable({
+    id,
+    disabled
+  });
+  const style = {
+    transform: utilities.CSS.Translate.toString(transform),
+    cursor: disabled ? 'auto' : 'move'
+  };
+  //
+  //
+  //
+  return React.createElement("div", Object.assign({
+    ref: setNodeRef,
     className: className,
-    style: {
-      cursor: disabled ? 'auto' : 'move'
-    }
-  }, children);
+    style: style
+  }, listeners, attributes), children);
 };
 
 exports.default = EbDraggable;

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

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

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

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

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

@@ -10,8 +10,9 @@ 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/QuizDraggbleOption.js');
+require('../shared/QuizDraggbleDroppedOption.js');
 require('../shared/QuizDraggbleDummyOption.js');
+require('../shared/QuizDraggbleOption.js');
 require('../shared/question-radio/QuestionRadio.js');
 require('../shared/question-radio/QuestionRadioOption.js');
 var QuestionCheckbox = require('../shared/question-checkbox/QuestionCheckbox.js');