@elice/material-quiz 1.240719.0 → 1.240722.0-dev2.0

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,113 +3,43 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var $ = require('jquery');
-require('jquery-ui/ui/widgets/draggable');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var $__default = /*#__PURE__*/_interopDefaultCompat($);
+var core = require('@dnd-kit/core');
+var utilities = require('@dnd-kit/utilities');
 
+//
+//
+//
 var EbDraggable = function EbDraggable(_ref) {
   var children = _ref.children,
     id = _ref.id,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$revert = _ref.revert,
-    revert = _ref$revert === void 0 ? true : _ref$revert,
-    _ref$clone = _ref.clone,
-    clone = _ref$clone === void 0 ? false : _ref$clone,
     className = _ref.className,
-    onStart = _ref.onStart,
-    onStop = _ref.onStop,
-    onDrag = _ref.onDrag,
-    onCreate = _ref.onCreate;
-  var rootEl = React__default.default.useRef(null);
-  var onStartCallback = React__default.default.useCallback(function (event, ui) {
-    if (onStart) {
-      return onStart(event, ui);
-    } else {
-      return function () {
-        return;
-      };
-    }
-  }, [onStart]);
-  var onStopCallback = React__default.default.useCallback(function (event, ui) {
-    if (onStop) {
-      return onStop(event, ui);
-    } else {
-      return function () {
-        return;
-      };
-    }
-  }, [onStop]);
-  var onDragCallback = React__default.default.useCallback(function (event, ui) {
-    if (onDrag) {
-      return onDrag(event, ui);
-    } else {
-      return function () {
-        return;
-      };
-    }
-  }, [onDrag]);
-  var onCreateCallback = React__default.default.useCallback(function (event, ui) {
-    if (onCreate) {
-      return onCreate(event, ui);
-    } else {
-      return function () {
-        return;
-      };
-    }
-  }, [onCreate]);
-  React__default.default.useEffect(function () {
-    if (!rootEl.current) {
-      return;
-    }
-    var draggableEl = $__default.default(rootEl.current);
-    draggableEl.draggable(Object.assign(Object.assign(Object.assign(Object.assign({}, disabled ? {
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var _useDraggable = core.useDraggable({
+      id: id,
       disabled: disabled
-    } : null), revert ? {
-      revert: revert
-    } : null), clone ? {
-      helper: 'clone'
-    } : null), {
-      zIndex: 200,
-      revertDuration: 0,
-      start: function start(event, ui) {
-        if (!onStartCallback) {
-          return;
-        }
-        onStartCallback(event, ui);
-      },
-      stop: function stop(event, ui) {
-        if (!onStopCallback) {
-          return;
-        }
-        // draggableEl.draggable('cancel');
-        onStopCallback(event, ui);
-      },
-      drag: function drag(event, ui) {
-        onDragCallback(event, ui);
-      },
-      create: function create(event, ui) {
-        onCreateCallback(event, ui);
-      }
-    }));
-    return function () {
-      draggableEl.draggable('destroy');
-    };
-  }, [clone, disabled, onCreateCallback, onDragCallback, onStartCallback, onStopCallback, revert]);
-  return jsxRuntime.jsx("div", {
-    ref: rootEl,
-    id: id,
+    }),
+    attributes = _useDraggable.attributes,
+    listeners = _useDraggable.listeners,
+    setNodeRef = _useDraggable.setNodeRef,
+    transform = _useDraggable.transform,
+    isDragging = _useDraggable.isDragging;
+  var style = {
+    transform: utilities.CSS.Translate.toString(transform),
+    cursor: disabled ? 'auto' : 'move'
+  };
+  //
+  //
+  //
+  return jsxRuntime.jsx("div", Object.assign({
+    ref: setNodeRef,
     className: className,
-    style: {
-      cursor: disabled ? 'auto' : 'move'
-    },
+    style: isDragging ? Object.assign(Object.assign({}, style), {
+      zIndex: 1000
+    }) : style
+  }, listeners, attributes, {
     children: 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,57 +3,31 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var $ = require('jquery');
-require('jquery-ui/ui/widgets/droppable');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var $__default = /*#__PURE__*/_interopDefaultCompat($);
+var core = require('@dnd-kit/core');
 
+//
+//
+//
 var EbDroppable = function EbDroppable(_ref) {
   var children = _ref.children,
     id = _ref.id,
+    className = _ref.className,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    accept = _ref.accept,
-    className = _ref.className,
-    onDrop = _ref.onDrop;
-  var rootEl = React__default.default.useRef(null);
-  var onDropCallback = React__default.default.useCallback(function (event, ui) {
-    if (onDrop) {
-      return onDrop(event, ui);
-    } else {
-      return function () {
-        return;
-      };
-    }
-  }, [onDrop]);
-  React__default.default.useEffect(function () {
-    if (!rootEl.current) {
-      return;
-    }
-    var draggableEl = $__default.default(rootEl.current);
-    draggableEl.droppable(Object.assign(Object.assign(Object.assign({}, disabled ? {
-      disabled: disabled
-    } : null), accept ? {
-      accept: accept
-    } : null), {
-      drop: function drop(event, ui) {
-        if (!onDropCallback) {
-          return;
-        }
-        onDropCallback(event, ui);
+    accept = _ref.accept;
+  var _useDroppable = core.useDroppable({
+      id: id,
+      disabled: disabled,
+      data: {
+        accept: accept
       }
-    }));
-    return function () {
-      draggableEl.droppable('destroy');
-    };
-  }, [accept, disabled, onDropCallback]);
+    }),
+    setNodeRef = _useDroppable.setNodeRef;
+  //
+  //
+  //
   return jsxRuntime.jsx("div", {
-    ref: rootEl,
-    id: id,
+    ref: setNodeRef,
     className: className,
     children: children
   });

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

@@ -12,8 +12,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');