@pie-lib/drag 2.20.0 → 2.22.0-mui-update.0

package/src/placeholder.jsx

@@ -1,14 +1,66 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import grey from '@material-ui/core/colors/grey';
 import { color } from '@pie-lib/render-ui';
+import { grey } from '@mui/material/colors';
+
+const StyledPlaceholder = styled('div')(({ theme }) => ({
+  WebkitTouchCallout: 'none',
+  WebkitUserSelect: 'none',
+  KhtmlUserSelect: 'none',
+  MozUserSelect: 'none',
+  MsUserSelect: 'none',
+  userSelect: 'none',
+  width: '100%',
+  height: '100%',
+  background: color.white(),
+  transition: 'background-color 200ms linear, border-color 200ms linear',
+  boxSizing: 'border-box',
+  display: 'grid',
+  gridRowGap: `${theme.spacing(1)}px`,
+  gridColumnGap: `${theme.spacing(1)}px`,
+  padding: theme.spacing(1),
+  border: `2px dashed ${color.black()}`,
+  '&.disabled': {
+    boxShadow: 'none',
+    background: theme.palette.background.paper,
+  },
+  '&.over': {
+    border: `1px solid ${grey[500]}`,
+    backgroundColor: `${grey[300]}`,
+  },
+  '&.board': {
+    padding: theme.spacing(1),
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    minHeight: '100px',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    touchAction: 'none',
+    backgroundColor: color.backgroundDark(),
+  },
+  '&.categorizeBoard': {
+    padding: theme.spacing(0.5),
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    minHeight: '100px',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    touchAction: 'none',
+    backgroundColor: color.backgroundDark(),
+  },
+  '&.verticalPool': {
+    display: 'flex',
+    flexFlow: 'column wrap',
+  },
+}));
 
 export const PlaceHolder = (props) => {
   const {
     children,
-    classes,
     className,
     isOver,
     type,
@@ -21,10 +73,10 @@ export const PlaceHolder = (props) => {
   } = props;
 
   const names = classNames(
-    classes.placeholder,
-    disabled && classes.disabled,
-    isOver && classes.over,
-    classes[type],
+    'placeholder',
+    disabled && 'disabled',
+    isOver && 'over',
+    type,
     className,
   );
 
@@ -49,24 +101,22 @@ export const PlaceHolder = (props) => {
     style.background = color.backgroundDark();
   }
 
-  const boardStyle = isCategorize ? classes.categorizeBoard : classes.board;
+  const boardStyle = isCategorize ? 'categorizeBoard' : 'board';
 
   return (
-    <div
+    <StyledPlaceholder
       style={{ ...style, minHeight: minHeight }}
       className={classNames(
-        classes.noSelectStyles,
         choiceBoard ? boardStyle : names,
-        isVerticalPool && classes.verticalPool,
+        isVerticalPool && 'verticalPool',
       )}
     >
       {children}
-    </div>
+    </StyledPlaceholder>
   );
 };
 
 PlaceHolder.propTypes = {
-  classes: PropTypes.object.isRequired,
   choiceBoard: PropTypes.bool,
   grid: PropTypes.shape({
     columns: PropTypes.number,
@@ -85,61 +135,4 @@ PlaceHolder.propTypes = {
   minHeight: PropTypes.number,
 };
 
-const styles = (theme) => ({
-  noSelectStyles: {
-    WebkitTouchCallout: 'none',
-    WebkitUserSelect: 'none',
-    KhtmlUserSelect: 'none',
-    MozUserSelect: 'none',
-    MsUserSelect: 'none',
-    userSelect: 'none',
-  },
-  placeholder: {
-    width: '100%',
-    height: '100%',
-    background: color.white(),
-    transition: 'background-color 200ms linear, border-color 200ms linear',
-    boxSizing: 'border-box',
-    display: 'grid',
-    gridRowGap: `${theme.spacing.unit}px`,
-    gridColumnGap: `${theme.spacing.unit}px`,
-    padding: theme.spacing.unit * 1,
-    border: `2px dashed ${color.black()}`,
-  },
-  disabled: {
-    boxShadow: 'none',
-    background: theme.palette.background.paper,
-  },
-  over: {
-    border: `1px solid ${grey[500]}`,
-    backgroundColor: `${grey[300]}`,
-  },
-  board: {
-    padding: theme.spacing.unit,
-    display: 'flex',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    minHeight: '100px',
-    justifyContent: 'center',
-    overflow: 'hidden',
-    touchAction: 'none',
-    backgroundColor: color.backgroundDark(),
-  },
-  categorizeBoard: {
-    padding: theme.spacing.unit / 2,
-    display: 'flex',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    minHeight: '100px',
-    justifyContent: 'center',
-    overflow: 'hidden',
-    touchAction: 'none',
-    backgroundColor: color.backgroundDark(),
-  },
-  verticalPool: {
-    display: 'flex',
-    flexFlow: 'column wrap',
-  },
-});
-
-export default withStyles(styles)(PlaceHolder);
+export default PlaceHolder;

package/src/preview-component.jsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useRef, useState, useCallback } from 'react';
-import { usePreview } from 'react-dnd-multi-backend';
+import React, { useEffect, useRef, useState } from 'react';
+import { DragOverlay, useDndContext } from '@dnd-kit/core';
 import { PreviewPrompt, color } from '@pie-lib/render-ui';
 import { renderMath } from '@pie-lib/math-rendering';
 
@@ -54,99 +54,91 @@ const styles = {
   },
 };
 
-const getPrompt = (itemType, item) => {
-  switch (itemType) {
-    // DRAG-IN-THE-BLANK
+const getPrompt = (dragData) => {
+  if (!dragData) return undefined;
+
+  // Handle different drag data structures based on the component type
+  if (dragData.choiceId) {
+    // DraggableChoice format
+    return dragData.value;
+  }
+  
+  // Legacy format support
+  switch (dragData.itemType) {
     case 'MaskBlank':
-      return item?.choice?.value;
-    // IMAGE-CLOZE-ASSOCIATION
-    case 'react-dnd-response':
-      return item?.value;
-    // MATCH-LIST
+      return dragData.choice?.value;
+    case 'dnd-kit-response':
+      return dragData.value;
     case 'Answer':
-      return item?.value;
-    // PLACEMENT-ORDERING
+      return dragData.value;
     case 'Tile':
-      return item?.value;
+      return dragData.value;
+    case 'categorize':
+      return dragData.value;
     default:
-      return item?.itemType === 'categorize' ? item?.value : undefined;
+      return dragData.value;
   }
 };
 
-const getCustomStyle = (itemType, item, touchPosition, style) => {
-  const transform = `translate(${touchPosition.x}px, ${touchPosition.y}px)`;
-  const top = style?.top || 0;
-  const left = style?.left || 0;
-  const position = style?.position || 'fixed';
+const getCustomStyle = (dragData) => {
+  if (!dragData) return {};
 
-  return {
-    position,
-    top,
-    left,
-    transform,
-    ...(itemType === 'MaskBlank' ? styles.maskBlank : {}),
-    ...(item?.itemType === 'categorize' ? styles.categorize : {}),
-    ...(itemType === 'Answer' ? styles.matchList : {}),
-    ...(itemType === 'Tile' ? styles.placementOrdering : {}),
-    ...(itemType === 'react-dnd-response' ? styles.ica : {}),
+  const baseStyle = {
+    cursor: 'grabbing',
+    opacity: 0.8,
+    transform: 'rotate(5deg)', // Slight rotation for visual feedback
   };
+
+  // Apply specific styles based on item type
+  if (dragData.itemType === 'MaskBlank') {
+    return { ...baseStyle, ...styles.maskBlank };
+  }
+  if (dragData.itemType === 'categorize') {
+    return { ...baseStyle, ...styles.categorize };
+  }
+  if (dragData.itemType === 'Answer') {
+    return { ...baseStyle, ...styles.matchList };
+  }
+  if (dragData.itemType === 'Tile') {
+    return { ...baseStyle, ...styles.placementOrdering };
+  }
+  if (dragData.itemType === 'dnd-kit-response') {
+    return { ...baseStyle, ...styles.ica };
+  }
+
+  // Default style for choice items
+  return { ...baseStyle, ...styles.categorize };
 };
 
 const PreviewComponent = () => {
-  const preview = usePreview();
-  const { itemType, item, style, display } = preview;
-  const [touchPosition, setTouchPosition] = useState({ x: 0, y: 0 });
+  const { active } = useDndContext();
   const [zoomLevel, setZoomLevel] = useState(1);
-
-  const handleTouchMove = useCallback(
-    (event) => {
-      if (event.touches.length > 0) {
-        const touch = event.touches[0];
-        const touchOffset = 1;
-        setTouchPosition({
-          x: (touch.clientX + touchOffset) / zoomLevel,
-          y: (touch.clientY + touchOffset) / zoomLevel,
-        });
-      }
-    },
-    [zoomLevel],
-  );
-
   const root = useRef(null);
 
+  const dragData = active?.data?.current;
+  const isActive = !!active;
+
   useEffect(() => {
-    if (display && root.current) {
+    if (isActive && root.current) {
       renderMath(root.current);
 
       // Adjusted for precise zoom level calculation in Online Testing, targeting the specific class pattern .asmt-zoomable.asmt-zoom-NR .asmt-question .padding
       const zoomAffectedElement = document.querySelector('.padding') || document.body;
-
       setZoomLevel(parseFloat(getComputedStyle(zoomAffectedElement).zoom) || 1);
     }
-  }, [display, item?.choice?.value, item?.value, itemType, item]);
-
-  useEffect(() => {
-    const touchMoveListener = (event) => handleTouchMove(event);
-    if (display) {
-      window.addEventListener('touchmove', touchMoveListener);
-    }
-    return () => {
-      window.removeEventListener('touchmove', touchMoveListener);
-    };
-  }, [display, handleTouchMove]);
-
-  if (!display) {
-    return null;
-  }
-
-  const customStyle = getCustomStyle(itemType, item, touchPosition, style);
+  }, [isActive, dragData]);
 
-  const prompt = getPrompt(itemType, item);
+  const customStyle = getCustomStyle(dragData);
+  const prompt = getPrompt(dragData);
 
   return (
-    <div ref={root} style={customStyle}>
-      <PreviewPrompt className="label" prompt={prompt} tagName="span" />
-    </div>
+    <DragOverlay>
+      {isActive && prompt && (
+        <div ref={root} style={customStyle}>
+          <PreviewPrompt className="label" prompt={prompt} tagName="span" />
+        </div>
+      )}
+    </DragOverlay>
   );
 };
 

package/lib/choice.js

@@ -1,129 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.DRAG_TYPE = exports.Choice = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _grey = _interopRequireDefault(require("@material-ui/core/colors/grey"));
-
-var _reactDnd = require("react-dnd");
-
-var _uidContext = require("./uid-context");
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var DRAG_TYPE = 'CHOICE';
-exports.DRAG_TYPE = DRAG_TYPE;
-
-var Choice = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Choice, _React$Component);
-
-  var _super = _createSuper(Choice);
-
-  function Choice() {
-    (0, _classCallCheck2["default"])(this, Choice);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2["default"])(Choice, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          classes = _this$props.classes,
-          className = _this$props.className,
-          children = _this$props.children,
-          connectDragSource = _this$props.connectDragSource;
-      return connectDragSource( /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])(classes.choice, className)
-      }, children));
-    }
-  }]);
-  return Choice;
-}(_react["default"].Component);
-
-exports.Choice = Choice;
-(0, _defineProperty2["default"])(Choice, "propTypes", {
-  classes: _propTypes["default"].object.isRequired,
-  className: _propTypes["default"].string,
-  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]),
-  connectDragSource: _propTypes["default"].func.isRequired
-});
-(0, _defineProperty2["default"])(Choice, "defaultProps", {});
-
-var styles = function styles(theme) {
-  return {
-    choice: {
-      backgroundColor: theme.palette.background.paper,
-      border: "solid 1px ".concat(_grey["default"][400]),
-      padding: theme.spacing.unit,
-      minHeight: '30px',
-      minWidth: theme.spacing.unit * 20,
-      maxWidth: theme.spacing.unit * 75
-    }
-  };
-};
-
-var choiceSource = {
-  canDrag: function canDrag(props) {
-    return !props.disabled;
-  },
-  beginDrag: function beginDrag(props) {
-    var out = {
-      choiceId: props.choice.id,
-      from: props.category.id,
-      alternateResponseIndex: props.alternateResponseIndex,
-      choiceIndex: props.choiceIndex
-    };
-    return out;
-  },
-  endDrag: function endDrag(props, monitor) {
-    if (!monitor.didDrop()) {
-      var item = monitor.getItem();
-
-      if (item.from) {
-        props.onRemoveChoice(item);
-      }
-    }
-  }
-};
-var styledChoice = (0, _styles.withStyles)(styles)(Choice);
-var DraggableChoice = (0, _reactDnd.DragSource)(function (_ref) {
-  var uid = _ref.uid;
-  return uid;
-}, choiceSource, function (connect, monitor) {
-  return {
-    connectDragSource: connect.dragSource(),
-    connectDragPreview: connect.dragPreview(),
-    isDragging: monitor.isDragging()
-  };
-})(styledChoice);
-
-var _default = (0, _uidContext.withUid)(DraggableChoice);
-
-exports["default"] = _default;
-//# sourceMappingURL=choice.js.map

package/lib/choice.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/choice.jsx"],"names":["DRAG_TYPE","Choice","props","classes","className","children","connectDragSource","choice","React","Component","PropTypes","object","isRequired","string","oneOfType","arrayOf","node","func","styles","theme","backgroundColor","palette","background","paper","border","grey","padding","spacing","unit","minHeight","minWidth","maxWidth","choiceSource","canDrag","disabled","beginDrag","out","choiceId","id","from","category","alternateResponseIndex","choiceIndex","endDrag","monitor","didDrop","item","getItem","onRemoveChoice","styledChoice","DraggableChoice","uid","connect","dragSource","connectDragPreview","dragPreview","isDragging"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport grey from '@material-ui/core/colors/grey';\n\nimport { DragSource } from 'react-dnd';\nimport { withUid } from './uid-context';\n\nexport const DRAG_TYPE = 'CHOICE';\n\nexport class Choice extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n    connectDragSource: PropTypes.func.isRequired,\n  };\n\n  static defaultProps = {};\n\n  render() {\n    const { classes, className, children, connectDragSource } = this.props;\n\n    return connectDragSource(<div className={classNames(classes.choice, className)}>{children}</div>);\n  }\n}\n\nconst styles = (theme) => ({\n  choice: {\n    backgroundColor: theme.palette.background.paper,\n    border: `solid 1px ${grey[400]}`,\n    padding: theme.spacing.unit,\n    minHeight: '30px',\n    minWidth: theme.spacing.unit * 20,\n    maxWidth: theme.spacing.unit * 75,\n  },\n});\n\nconst choiceSource = {\n  canDrag(props) {\n    return !props.disabled;\n  },\n  beginDrag(props) {\n    const out = {\n      choiceId: props.choice.id,\n      from: props.category.id,\n      alternateResponseIndex: props.alternateResponseIndex,\n      choiceIndex: props.choiceIndex,\n    };\n    return out;\n  },\n\n  endDrag: (props, monitor) => {\n    if (!monitor.didDrop()) {\n      const item = monitor.getItem();\n      if (item.from) {\n        props.onRemoveChoice(item);\n      }\n    }\n  },\n};\n\nconst styledChoice = withStyles(styles)(Choice);\n\nconst DraggableChoice = DragSource(\n  ({ uid }) => uid,\n  choiceSource,\n  (connect, monitor) => ({\n    connectDragSource: connect.dragSource(),\n    connectDragPreview: connect.dragPreview(),\n    isDragging: monitor.isDragging(),\n  }),\n)(styledChoice);\n\nexport default withUid(DraggableChoice);\n"],"file":"choice.js"}

package/lib/with-drag-context.js

@@ -1,59 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactDndMultiBackend = _interopRequireWildcard(require("react-dnd-multi-backend"));
-
-var _reactDnd = require("react-dnd");
-
-var _reactDndTouchBackend = require("react-dnd-touch-backend");
-
-var _reactDndHtml5Backend = require("react-dnd-html5-backend");
-
-var _previewComponent = _interopRequireDefault(require("./preview-component"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var backends = [{
-  backend: _reactDndHtml5Backend.HTML5Backend,
-  transition: _reactDndMultiBackend.MouseTransition
-}, {
-  backend: _reactDndTouchBackend.TouchBackend,
-  options: {
-    enableMouseEvents: true,
-    enableTouchEvents: true
-  },
-  preview: true,
-  transition: _reactDndMultiBackend.TouchTransition,
-  skipDispatchOnTransition: true
-}];
-
-var _default = function _default(Component) {
-  return function (props) {
-    var isClient = typeof window !== 'undefined';
-    return /*#__PURE__*/_react["default"].createElement(_reactDnd.DndProvider, (0, _extends2["default"])({
-      backend: _reactDndMultiBackend["default"],
-      options: {
-        backends: backends
-      }
-    }, isClient && {
-      context: window
-    }), /*#__PURE__*/_react["default"].createElement(Component, props), /*#__PURE__*/_react["default"].createElement(_previewComponent["default"], null));
-  };
-};
-
-exports["default"] = _default;
-//# sourceMappingURL=with-drag-context.js.map

package/lib/with-drag-context.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/with-drag-context.js"],"names":["backends","backend","HTML5Backend","transition","MouseTransition","TouchBackend","options","enableMouseEvents","enableTouchEvents","preview","TouchTransition","skipDispatchOnTransition","Component","props","isClient","window","MultiBackend","context"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAEA,IAAMA,QAAQ,GAAG,CACf;AACEC,EAAAA,OAAO,EAAEC,kCADX;AAEEC,EAAAA,UAAU,EAAEC;AAFd,CADe,EAKf;AACEH,EAAAA,OAAO,EAAEI,kCADX;AAEEC,EAAAA,OAAO,EAAE;AAAEC,IAAAA,iBAAiB,EAAE,IAArB;AAA2BC,IAAAA,iBAAiB,EAAE;AAA9C,GAFX;AAGEC,EAAAA,OAAO,EAAE,IAHX;AAIEN,EAAAA,UAAU,EAAEO,qCAJd;AAKEC,EAAAA,wBAAwB,EAAE;AAL5B,CALe,CAAjB;;eAce,kBAACC,SAAD;AAAA,SAAe,UAACC,KAAD,EAAW;AACvC,QAAMC,QAAQ,GAAG,OAAOC,MAAP,KAAkB,WAAnC;AAEA,wBACE,gCAAC,qBAAD;AAAa,MAAA,OAAO,EAAEC,gCAAtB;AAAoC,MAAA,OAAO,EAAE;AAAEhB,QAAAA,QAAQ,EAARA;AAAF;AAA7C,OAAgEc,QAAQ,IAAI;AAAEG,MAAAA,OAAO,EAAEF;AAAX,KAA5E,gBACE,gCAAC,SAAD,EAAeF,KAAf,CADF,eAEE,gCAAC,4BAAD,OAFF,CADF;AAMD,GATc;AAAA,C","sourcesContent":["import React from 'react';\nimport MultiBackend, { TouchTransition, MouseTransition } from 'react-dnd-multi-backend';\nimport { DndProvider } from 'react-dnd';\nimport { TouchBackend } from 'react-dnd-touch-backend';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\n\nimport PreviewComponent from './preview-component';\n\nconst backends = [\n  {\n    backend: HTML5Backend,\n    transition: MouseTransition,\n  },\n  {\n    backend: TouchBackend,\n    options: { enableMouseEvents: true, enableTouchEvents: true },\n    preview: true,\n    transition: TouchTransition,\n    skipDispatchOnTransition: true,\n  },\n];\n\nexport default (Component) => (props) => {\n  const isClient = typeof window !== 'undefined';\n\n  return (\n    <DndProvider backend={MultiBackend} options={{ backends }} {...(isClient && { context: window })}>\n      <Component {...props} />\n      <PreviewComponent />\n    </DndProvider>\n  );\n};\n"],"file":"with-drag-context.js"}

package/src/choice.jsx

@@ -1,76 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
-import grey from '@material-ui/core/colors/grey';
-
-import { DragSource } from 'react-dnd';
-import { withUid } from './uid-context';
-
-export const DRAG_TYPE = 'CHOICE';
-
-export class Choice extends React.Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    className: PropTypes.string,
-    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-    connectDragSource: PropTypes.func.isRequired,
-  };
-
-  static defaultProps = {};
-
-  render() {
-    const { classes, className, children, connectDragSource } = this.props;
-
-    return connectDragSource(<div className={classNames(classes.choice, className)}>{children}</div>);
-  }
-}
-
-const styles = (theme) => ({
-  choice: {
-    backgroundColor: theme.palette.background.paper,
-    border: `solid 1px ${grey[400]}`,
-    padding: theme.spacing.unit,
-    minHeight: '30px',
-    minWidth: theme.spacing.unit * 20,
-    maxWidth: theme.spacing.unit * 75,
-  },
-});
-
-const choiceSource = {
-  canDrag(props) {
-    return !props.disabled;
-  },
-  beginDrag(props) {
-    const out = {
-      choiceId: props.choice.id,
-      from: props.category.id,
-      alternateResponseIndex: props.alternateResponseIndex,
-      choiceIndex: props.choiceIndex,
-    };
-    return out;
-  },
-
-  endDrag: (props, monitor) => {
-    if (!monitor.didDrop()) {
-      const item = monitor.getItem();
-      if (item.from) {
-        props.onRemoveChoice(item);
-      }
-    }
-  },
-};
-
-const styledChoice = withStyles(styles)(Choice);
-
-const DraggableChoice = DragSource(
-  ({ uid }) => uid,
-  choiceSource,
-  (connect, monitor) => ({
-    connectDragSource: connect.dragSource(),
-    connectDragPreview: connect.dragPreview(),
-    isDragging: monitor.isDragging(),
-  }),
-)(styledChoice);
-
-export default withUid(DraggableChoice);

package/src/with-drag-context.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import MultiBackend, { TouchTransition, MouseTransition } from 'react-dnd-multi-backend';
-import { DndProvider } from 'react-dnd';
-import { TouchBackend } from 'react-dnd-touch-backend';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-
-import PreviewComponent from './preview-component';
-
-const backends = [
-  {
-    backend: HTML5Backend,
-    transition: MouseTransition,
-  },
-  {
-    backend: TouchBackend,
-    options: { enableMouseEvents: true, enableTouchEvents: true },
-    preview: true,
-    transition: TouchTransition,
-    skipDispatchOnTransition: true,
-  },
-];
-
-export default (Component) => (props) => {
-  const isClient = typeof window !== 'undefined';
-
-  return (
-    <DndProvider backend={MultiBackend} options={{ backends }} {...(isClient && { context: window })}>
-      <Component {...props} />
-      <PreviewComponent />
-    </DndProvider>
-  );
-};