@pie-lib/drag 2.2.3-next.0 → 2.2.3-next.12

package/lib/drag-in-the-blank-dp.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +11,8 @@ var _reactDnd = require("react-dnd");
 
 var _droppablePlaceholder = require("../lib/droppable-placeholder");
 
-var DRAG_TYPE = 'MaskBlank';
+var _dragType = _interopRequireDefault(require("./drag-type"));
+
 var spec = {
   canDrop: function canDrop(props) {
     return !props.disabled;
@@ -21,7 +24,7 @@ var spec = {
   }
 };
 exports.spec = spec;
-var WithTarget = (0, _reactDnd.DropTarget)(DRAG_TYPE, spec, function (connect, monitor) {
+var WithTarget = (0, _reactDnd.DropTarget)(_dragType["default"].types.db, spec, function (connect, monitor) {
   return {
     connectDropTarget: connect.dropTarget(),
     isOver: monitor.isOver()

package/lib/drag-in-the-blank-dp.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/drag-in-the-blank-dp.jsx"],"names":["DRAG_TYPE","spec","canDrop","props","disabled","drop","dropped","WithTarget","connect","monitor","connectDropTarget","dropTarget","isOver","DroppablePlaceholder"],"mappings":";;;;;;;AAAA;;AACA;;AAEA,IAAMA,SAAS,GAAG,WAAlB;AAEO,IAAMC,IAAI,GAAG;AAClBC,EAAAA,OAAO,EAAE,iBAACC,KAAD,EAAW;AAClB,WAAO,CAACA,KAAK,CAACC,QAAd;AACD,GAHiB;AAIlBC,EAAAA,IAAI,EAAE;AAAA,WAAO;AACXC,MAAAA,OAAO,EAAE;AADE,KAAP;AAAA;AAJY,CAAb;;AASP,IAAMC,UAAU,GAAG,0BAAWP,SAAX,EAAsBC,IAAtB,EAA4B,UAACO,OAAD,EAAUC,OAAV;AAAA,SAAuB;AACpEC,IAAAA,iBAAiB,EAAEF,OAAO,CAACG,UAAR,EADiD;AAEpEC,IAAAA,MAAM,EAAEH,OAAO,CAACG,MAAR;AAF4D,GAAvB;AAAA,CAA5B,EAGfC,0CAHe,CAAnB;eAKeN,U","sourcesContent":["import { DropTarget } from 'react-dnd';\nimport { DroppablePlaceholder } from '../lib/droppable-placeholder';\n\nconst DRAG_TYPE = 'MaskBlank';\n\nexport const spec = {\n  canDrop: (props) => {\n    return !props.disabled;\n  },\n  drop: () => ({\n    dropped: true,\n  }),\n};\n\nconst WithTarget = DropTarget(DRAG_TYPE, spec, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOver: monitor.isOver(),\n}))(DroppablePlaceholder);\n\nexport default WithTarget;\n"],"file":"drag-in-the-blank-dp.js"}
+{"version":3,"sources":["../src/drag-in-the-blank-dp.jsx"],"names":["spec","canDrop","props","disabled","drop","dropped","WithTarget","dragType","types","db","connect","monitor","connectDropTarget","dropTarget","isOver","DroppablePlaceholder"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEO,IAAMA,IAAI,GAAG;AAClBC,EAAAA,OAAO,EAAE,iBAACC,KAAD,EAAW;AAClB,WAAO,CAACA,KAAK,CAACC,QAAd;AACD,GAHiB;AAIlBC,EAAAA,IAAI,EAAE;AAAA,WAAO;AACXC,MAAAA,OAAO,EAAE;AADE,KAAP;AAAA;AAJY,CAAb;;AASP,IAAMC,UAAU,GAAG,0BAAWC,qBAASC,KAAT,CAAeC,EAA1B,EAA8BT,IAA9B,EAAoC,UAACU,OAAD,EAAUC,OAAV;AAAA,SAAuB;AAC5EC,IAAAA,iBAAiB,EAAEF,OAAO,CAACG,UAAR,EADyD;AAE5EC,IAAAA,MAAM,EAAEH,OAAO,CAACG,MAAR;AAFoE,GAAvB;AAAA,CAApC,EAGfC,0CAHe,CAAnB;eAKeT,U","sourcesContent":["import { DropTarget } from 'react-dnd';\nimport { DroppablePlaceholder } from '../lib/droppable-placeholder';\nimport dragType from './drag-type';\n\nexport const spec = {\n  canDrop: (props) => {\n    return !props.disabled;\n  },\n  drop: () => ({\n    dropped: true,\n  }),\n};\n\nconst WithTarget = DropTarget(dragType.types.db, spec, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOver: monitor.isOver(),\n}))(DroppablePlaceholder);\n\nexport default WithTarget;\n"],"file":"drag-in-the-blank-dp.js"}

package/lib/drag-type.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  types: {
+    ica: 'react-dnd-response',
+    ml: 'Answer',
+    db: 'MaskBlank'
+  }
+};
+exports["default"] = _default;
+//# sourceMappingURL=drag-type.js.map

package/lib/drag-type.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/drag-type.js"],"names":["types","ica","ml","db"],"mappings":";;;;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,GAAG,EAAE,oBADA;AAELC,IAAAA,EAAE,EAAE,QAFC;AAGLC,IAAAA,EAAE,EAAE;AAHC;AADM,C","sourcesContent":["export default {\n  types: {\n    ica: 'react-dnd-response',\n    ml: 'Answer',\n    db: 'MaskBlank',\n  },\n};\n"],"file":"drag-type.js"}

package/lib/ica-dp.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.spec = exports["default"] = void 0;
+
+var _reactDnd = require("react-dnd");
+
+var _droppablePlaceholder = require("./droppable-placeholder");
+
+var _dragType = _interopRequireDefault(require("./drag-type"));
+
+var spec = {
+  canDrop: function canDrop(props) {
+    return !props.disabled;
+  },
+  drop: function drop(props, monitor) {
+    var item = monitor.getItem();
+
+    if (props.onRemoveAnswer) {
+      props.onRemoveAnswer(item);
+    }
+  }
+};
+exports.spec = spec;
+var WithTarget = (0, _reactDnd.DropTarget)(_dragType["default"].types.ica, spec, function (connect, monitor) {
+  return {
+    connectDropTarget: connect.dropTarget(),
+    isOver: monitor.isOver()
+  };
+})(_droppablePlaceholder.DroppablePlaceholder);
+var _default = WithTarget;
+exports["default"] = _default;
+//# sourceMappingURL=ica-dp.js.map

package/lib/ica-dp.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ica-dp.jsx"],"names":["spec","canDrop","props","disabled","drop","monitor","item","getItem","onRemoveAnswer","WithTarget","dragType","types","ica","connect","connectDropTarget","dropTarget","isOver","DroppablePlaceholder"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEO,IAAMA,IAAI,GAAG;AAClBC,EAAAA,OAAO,EAAE,iBAACC,KAAD,EAAW;AAClB,WAAO,CAACA,KAAK,CAACC,QAAd;AACD,GAHiB;AAIlBC,EAAAA,IAAI,EAAE,cAACF,KAAD,EAAQG,OAAR,EAAoB;AACxB,QAAMC,IAAI,GAAGD,OAAO,CAACE,OAAR,EAAb;;AAEA,QAAIL,KAAK,CAACM,cAAV,EAA0B;AACxBN,MAAAA,KAAK,CAACM,cAAN,CAAqBF,IAArB;AACD;AACF;AAViB,CAAb;;AAaP,IAAMG,UAAU,GAAG,0BAAWC,qBAASC,KAAT,CAAeC,GAA1B,EAA+BZ,IAA/B,EAAqC,UAACa,OAAD,EAAUR,OAAV;AAAA,SAAuB;AAC7ES,IAAAA,iBAAiB,EAAED,OAAO,CAACE,UAAR,EAD0D;AAE7EC,IAAAA,MAAM,EAAEX,OAAO,CAACW,MAAR;AAFqE,GAAvB;AAAA,CAArC,EAGfC,0CAHe,CAAnB;eAKeR,U","sourcesContent":["import { DropTarget } from 'react-dnd';\nimport { DroppablePlaceholder } from './droppable-placeholder';\nimport dragType from './drag-type';\n\nexport const spec = {\n  canDrop: (props) => {\n    return !props.disabled;\n  },\n  drop: (props, monitor) => {\n    const item = monitor.getItem();\n\n    if (props.onRemoveAnswer) {\n      props.onRemoveAnswer(item);\n    }\n  },\n};\n\nconst WithTarget = DropTarget(dragType.types.ica, spec, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOver: monitor.isOver(),\n}))(DroppablePlaceholder);\n\nexport default WithTarget;\n"],"file":"ica-dp.js"}

package/lib/index.js

@@ -31,6 +31,12 @@ Object.defineProperty(exports, "DropTarget", {
     return _reactDnd.DropTarget;
   }
 });
+Object.defineProperty(exports, "ICADroppablePlaceholder", {
+  enumerable: true,
+  get: function get() {
+    return _icaDp["default"];
+  }
+});
 Object.defineProperty(exports, "MatchDroppablePlaceholder", {
   enumerable: true,
   get: function get() {
@@ -75,6 +81,8 @@ var _matchListDp = _interopRequireDefault(require("./match-list-dp"));
 
 var _dragInTheBlankDp = _interopRequireDefault(require("./drag-in-the-blank-dp"));
 
+var _icaDp = _interopRequireDefault(require("./ica-dp"));
+
 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; }

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;AACA;;AACA","sourcesContent":["import { DragSource, DropTarget } from 'react-dnd';\n\nimport PlaceHolder from './placeholder';\nimport Choice from './choice';\nimport withDragContext from './with-drag-context';\nimport swap from './swap';\nimport * as uid from './uid-context';\nimport MatchDroppablePlaceholder from './match-list-dp';\nimport DragDroppablePlaceholder from './drag-in-the-blank-dp';\n\nexport {\n  PlaceHolder,\n  MatchDroppablePlaceholder,\n  DragDroppablePlaceholder,\n  withDragContext,\n  Choice,\n  swap,\n  uid,\n  DragSource,\n  DropTarget,\n};\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;AACA;;AACA;;AACA","sourcesContent":["import { DragSource, DropTarget } from 'react-dnd';\n\nimport PlaceHolder from './placeholder';\nimport Choice from './choice';\nimport withDragContext from './with-drag-context';\nimport swap from './swap';\nimport * as uid from './uid-context';\nimport MatchDroppablePlaceholder from './match-list-dp';\nimport DragDroppablePlaceholder from './drag-in-the-blank-dp';\nimport ICADroppablePlaceholder from './ica-dp';\n\nexport {\n  PlaceHolder,\n  MatchDroppablePlaceholder,\n  DragDroppablePlaceholder,\n  ICADroppablePlaceholder,\n  withDragContext,\n  Choice,\n  swap,\n  uid,\n  DragSource,\n  DropTarget,\n};\n"],"file":"index.js"}

package/lib/match-list-dp.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +11,8 @@ var _reactDnd = require("react-dnd");
 
 var _droppablePlaceholder = require("./droppable-placeholder");
 
-var DRAG_TYPE = 'Answer';
+var _dragType = _interopRequireDefault(require("./drag-type"));
+
 var spec = {
   canDrop: function canDrop(props) {
     return !props.disabled;
@@ -23,7 +26,7 @@ var spec = {
   }
 };
 exports.spec = spec;
-var WithTarget = (0, _reactDnd.DropTarget)(DRAG_TYPE, spec, function (connect, monitor) {
+var WithTarget = (0, _reactDnd.DropTarget)(_dragType["default"].types.ml, spec, function (connect, monitor) {
   return {
     connectDropTarget: connect.dropTarget(),
     isOver: monitor.isOver()

package/lib/match-list-dp.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/match-list-dp.jsx"],"names":["DRAG_TYPE","spec","canDrop","props","disabled","drop","monitor","item","getItem","onRemoveAnswer","promptId","WithTarget","connect","connectDropTarget","dropTarget","isOver","DroppablePlaceholder"],"mappings":";;;;;;;AAAA;;AACA;;AAEA,IAAMA,SAAS,GAAG,QAAlB;AAEO,IAAMC,IAAI,GAAG;AAClBC,EAAAA,OAAO,EAAE,iBAACC,KAAD,EAAW;AAClB,WAAO,CAACA,KAAK,CAACC,QAAd;AACD,GAHiB;AAIlBC,EAAAA,IAAI,EAAE,cAACF,KAAD,EAAQG,OAAR,EAAoB;AACxB,QAAMC,IAAI,GAAGD,OAAO,CAACE,OAAR,EAAb;;AAEA,QAAIL,KAAK,CAACM,cAAV,EAA0B;AACxBN,MAAAA,KAAK,CAACM,cAAN,CAAqBF,IAAI,CAACG,QAA1B;AACD;AACF;AAViB,CAAb;;AAaP,IAAMC,UAAU,GAAG,0BAAWX,SAAX,EAAsBC,IAAtB,EAA4B,UAACW,OAAD,EAAUN,OAAV;AAAA,SAAuB;AACpEO,IAAAA,iBAAiB,EAAED,OAAO,CAACE,UAAR,EADiD;AAEpEC,IAAAA,MAAM,EAAET,OAAO,CAACS,MAAR;AAF4D,GAAvB;AAAA,CAA5B,EAGfC,0CAHe,CAAnB;eAKeL,U","sourcesContent":["import { DropTarget } from 'react-dnd';\nimport { DroppablePlaceholder } from './droppable-placeholder';\n\nconst DRAG_TYPE = 'Answer';\n\nexport const spec = {\n  canDrop: (props) => {\n    return !props.disabled;\n  },\n  drop: (props, monitor) => {\n    const item = monitor.getItem();\n\n    if (props.onRemoveAnswer) {\n      props.onRemoveAnswer(item.promptId);\n    }\n  },\n};\n\nconst WithTarget = DropTarget(DRAG_TYPE, spec, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOver: monitor.isOver(),\n}))(DroppablePlaceholder);\n\nexport default WithTarget;\n"],"file":"match-list-dp.js"}
+{"version":3,"sources":["../src/match-list-dp.jsx"],"names":["spec","canDrop","props","disabled","drop","monitor","item","getItem","onRemoveAnswer","promptId","WithTarget","dragType","types","ml","connect","connectDropTarget","dropTarget","isOver","DroppablePlaceholder"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEO,IAAMA,IAAI,GAAG;AAClBC,EAAAA,OAAO,EAAE,iBAACC,KAAD,EAAW;AAClB,WAAO,CAACA,KAAK,CAACC,QAAd;AACD,GAHiB;AAIlBC,EAAAA,IAAI,EAAE,cAACF,KAAD,EAAQG,OAAR,EAAoB;AACxB,QAAMC,IAAI,GAAGD,OAAO,CAACE,OAAR,EAAb;;AAEA,QAAIL,KAAK,CAACM,cAAV,EAA0B;AACxBN,MAAAA,KAAK,CAACM,cAAN,CAAqBF,IAAI,CAACG,QAA1B;AACD;AACF;AAViB,CAAb;;AAaP,IAAMC,UAAU,GAAG,0BAAWC,qBAASC,KAAT,CAAeC,EAA1B,EAA8Bb,IAA9B,EAAoC,UAACc,OAAD,EAAUT,OAAV;AAAA,SAAuB;AAC5EU,IAAAA,iBAAiB,EAAED,OAAO,CAACE,UAAR,EADyD;AAE5EC,IAAAA,MAAM,EAAEZ,OAAO,CAACY,MAAR;AAFoE,GAAvB;AAAA,CAApC,EAGfC,0CAHe,CAAnB;eAKeR,U","sourcesContent":["import { DropTarget } from 'react-dnd';\nimport { DroppablePlaceholder } from './droppable-placeholder';\nimport dragType from './drag-type';\n\nexport const spec = {\n  canDrop: (props) => {\n    return !props.disabled;\n  },\n  drop: (props, monitor) => {\n    const item = monitor.getItem();\n\n    if (props.onRemoveAnswer) {\n      props.onRemoveAnswer(item.promptId);\n    }\n  },\n};\n\nconst WithTarget = DropTarget(dragType.types.ml, spec, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOver: monitor.isOver(),\n}))(DroppablePlaceholder);\n\nexport default WithTarget;\n"],"file":"match-list-dp.js"}

package/lib/preview-component.js

@@ -27,30 +27,52 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var MaskBlankStyle = {
-  border: '1px solid black',
-  color: 'black',
-  minWidth: '90px',
-  minHeight: '32px',
-  height: 'auto',
-  maxWidth: '374px',
-  display: 'flex',
-  padding: '4px',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: '16px'
-};
-var ICAStyle = {
-  backgroundColor: _renderUi.color.background(),
-  border: "1px solid ".concat(_renderUi.color.text()),
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  minHeight: '28px',
-  padding: '0 3px',
-  marginLeft: 2,
-  marginTop: 2,
-  width: 'fit-content'
+var styles = {
+  maskBlank: {
+    border: '1px solid black',
+    color: 'black',
+    minWidth: '90px',
+    minHeight: '32px',
+    height: 'auto',
+    maxWidth: '374px',
+    display: 'flex',
+    padding: '4px',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '16px'
+  },
+  ica: {
+    backgroundColor: _renderUi.color.background(),
+    border: "1px solid ".concat(_renderUi.color.primary()),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: '28px',
+    padding: '0 3px',
+    marginLeft: 2,
+    marginTop: 2,
+    width: 'fit-content'
+  },
+  categorize: {
+    color: _renderUi.color.text(),
+    backgroundColor: _renderUi.color.background(),
+    padding: '16px',
+    borderRadius: '4px',
+    border: '1px solid'
+  },
+  matchList: {
+    color: _renderUi.color.text(),
+    backgroundColor: _renderUi.color.background(),
+    padding: '10px',
+    boxSizing: 'border-box',
+    border: '1px solid #D1D1D1'
+  },
+  placementOrdering: {
+    padding: '10px',
+    boxSizing: 'border-box',
+    border: '1px solid #D1D1D1',
+    backgroundColor: _renderUi.color.background()
+  }
 };
 
 var getPrompt = function getPrompt(itemType, item) {
@@ -64,12 +86,26 @@ var getPrompt = function getPrompt(itemType, item) {
 
     case 'react-dnd-response':
       return item === null || item === void 0 ? void 0 : item.value;
+    // MATCH-LIST
+
+    case 'Answer':
+      return item === null || item === void 0 ? void 0 : item.value;
+    // PLACEMENT-ORDERING
+
+    case 'Tile':
+      return item === null || item === void 0 ? void 0 : item.value;
 
     default:
-      return undefined;
+      return (item === null || item === void 0 ? void 0 : item.itemType) === 'categorize' ? item === null || item === void 0 ? void 0 : item.value : undefined;
   }
 };
 
+var getCustomStyle = function getCustomStyle(itemType, item, style) {
+  var baseStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), itemType === 'MaskBlank' ? styles.maskBlank : {}), (item === null || item === void 0 ? void 0 : item.itemType) === 'categorize' ? styles.categorize : {}), itemType === 'Answer' ? styles.matchList : {}), itemType === 'Tile' ? styles.placementOrdering : {}), itemType === 'react-dnd-response' ? styles.ica : {});
+
+  return baseStyle;
+};
+
 var PreviewComponent = function PreviewComponent() {
   var _item$choice2;
 
@@ -89,8 +125,7 @@ var PreviewComponent = function PreviewComponent() {
     return null;
   }
 
-  var customStyle = _objectSpread(_objectSpread({}, style), itemType === 'MaskBlank' ? MaskBlankStyle : {});
-
+  var customStyle = getCustomStyle(itemType, item, style);
   var prompt = getPrompt(itemType, item);
   return /*#__PURE__*/_react["default"].createElement("div", {
     ref: root,

package/lib/preview-component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/preview-component.jsx"],"names":["MaskBlankStyle","border","color","minWidth","minHeight","height","maxWidth","display","padding","alignItems","justifyContent","borderRadius","ICAStyle","backgroundColor","background","text","marginLeft","marginTop","width","getPrompt","itemType","item","choice","value","undefined","PreviewComponent","preview","style","root","current","customStyle","prompt"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;AAGA,IAAMA,cAAc,GAAG;AACrBC,EAAAA,MAAM,EAAE,iBADa;AAErBC,EAAAA,KAAK,EAAE,OAFc;AAGrBC,EAAAA,QAAQ,EAAE,MAHW;AAIrBC,EAAAA,SAAS,EAAE,MAJU;AAKrBC,EAAAA,MAAM,EAAE,MALa;AAMrBC,EAAAA,QAAQ,EAAE,OANW;AAOrBC,EAAAA,OAAO,EAAE,MAPY;AAQrBC,EAAAA,OAAO,EAAE,KARY;AASrBC,EAAAA,UAAU,EAAE,QATS;AAUrBC,EAAAA,cAAc,EAAE,QAVK;AAWrBC,EAAAA,YAAY,EAAE;AAXO,CAAvB;AAcA,IAAMC,QAAQ,GAAG;AACfC,EAAAA,eAAe,EAAEX,gBAAMY,UAAN,EADF;AAEfb,EAAAA,MAAM,sBAAeC,gBAAMa,IAAN,EAAf,CAFS;AAGfR,EAAAA,OAAO,EAAE,MAHM;AAIfE,EAAAA,UAAU,EAAE,QAJG;AAKfC,EAAAA,cAAc,EAAE,QALD;AAMfN,EAAAA,SAAS,EAAE,MANI;AAOfI,EAAAA,OAAO,EAAE,OAPM;AAQfQ,EAAAA,UAAU,EAAE,CARG;AASfC,EAAAA,SAAS,EAAE,CATI;AAUfC,EAAAA,KAAK,EAAE;AAVQ,CAAjB;;AAaA,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,QAAD,EAAWC,IAAX,EAAoB;AAAA;;AACpC,UAAQD,QAAR;AACE;AACA,SAAK,WAAL;AACE,aAAOC,IAAP,aAAOA,IAAP,uCAAOA,IAAI,CAAEC,MAAb,iDAAO,aAAcC,KAArB;AACF;;AACA,SAAK,oBAAL;AACE,aAAOF,IAAP,aAAOA,IAAP,uBAAOA,IAAI,CAAEE,KAAb;;AACF;AACE,aAAOC,SAAP;AARJ;AAUD,CAXD;;AAaA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AAAA;;AAC7B,MAAMC,OAAO,GAAG,uCAAhB;AACA,MAAQN,QAAR,GAA2CM,OAA3C,CAAQN,QAAR;AAAA,MAAkBC,IAAlB,GAA2CK,OAA3C,CAAkBL,IAAlB;AAAA,MAAwBM,KAAxB,GAA2CD,OAA3C,CAAwBC,KAAxB;AAAA,MAA+BpB,OAA/B,GAA2CmB,OAA3C,CAA+BnB,OAA/B;AAEA,MAAIqB,IAAI,GAAG,mBAAO,IAAP,CAAX;AAEA,wBAAU,YAAM;AACd,QAAIrB,OAAO,IAAIqB,IAAI,CAACC,OAApB,EAA6B;AAC3B,qCAAWD,IAAI,CAACC,OAAhB;AACD;AACF,GAJD,EAIG,CAACtB,OAAD,EAAUc,IAAV,aAAUA,IAAV,wCAAUA,IAAI,CAAEC,MAAhB,kDAAU,cAAcC,KAAxB,EAA+BF,IAA/B,aAA+BA,IAA/B,uBAA+BA,IAAI,CAAEE,KAArC,EAA4CH,QAA5C,EAAsDC,IAAtD,CAJH;;AAMA,MAAI,CAACd,OAAL,EAAc;AACZ,WAAO,IAAP;AACD;;AAED,MAAMuB,WAAW,mCACZH,KADY,GAEXP,QAAQ,KAAK,WAAb,GAA2BpB,cAA3B,GAA4C,EAFjC,CAAjB;;AAOA,MAAM+B,MAAM,GAAGZ,SAAS,CAACC,QAAD,EAAWC,IAAX,CAAxB;AAEA,sBACE;AAAK,IAAA,GAAG,EAAEO,IAAV;AAAgB,IAAA,KAAK,EAAEE;AAAvB,kBACE,gCAAC,uBAAD;AAAe,IAAA,SAAS,EAAC,OAAzB;AAAiC,IAAA,MAAM,EAAEC,MAAzC;AAAiD,IAAA,OAAO,EAAC;AAAzD,IADF,CADF;AAKD,CA9BD;;eAgCeN,gB","sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { usePreview } from 'react-dnd-multi-backend';\nimport { PreviewPrompt } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { color } from '@pie-lib/render-ui';\n\nconst MaskBlankStyle = {\n  border: '1px solid black',\n  color: 'black',\n  minWidth: '90px',\n  minHeight: '32px',\n  height: 'auto',\n  maxWidth: '374px',\n  display: 'flex',\n  padding: '4px',\n  alignItems: 'center',\n  justifyContent: 'center',\n  borderRadius: '16px',\n};\n\nconst ICAStyle = {\n  backgroundColor: color.background(),\n  border: `1px solid ${color.text()}`,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  minHeight: '28px',\n  padding: '0 3px',\n  marginLeft: 2,\n  marginTop: 2,\n  width: 'fit-content',\n};\n\nconst getPrompt = (itemType, item) => {\n  switch (itemType) {\n    // DRAG-IN-THE-BLANK\n    case 'MaskBlank':\n      return item?.choice?.value;\n    // IMAGE-CLOZE-ASSOCIATION\n    case 'react-dnd-response':\n      return item?.value;\n    default:\n      return undefined;\n  }\n};\n\nconst PreviewComponent = () => {\n  const preview = usePreview();\n  const { itemType, item, style, display } = preview;\n\n  let root = useRef(null);\n\n  useEffect(() => {\n    if (display && root.current) {\n      renderMath(root.current);\n    }\n  }, [display, item?.choice?.value, item?.value, itemType, item]);\n\n  if (!display) {\n    return null;\n  }\n\n  const customStyle = {\n    ...style,\n    ...(itemType === 'MaskBlank' ? MaskBlankStyle : {}),\n    // TODO: In the image-cloze-association component, there's a noticeable delay in the image rendering process. This results in a brief display of an empty image placeholder before the actual image appears after a few seconds. This issue also impacts the correct rendering of the preview feature, thereby negatively affecting the user experience. This needs to be addressed promptly.\n    //...(itemType === 'react-dnd-response' ? ICAStyle : {}),\n  };\n\n  const prompt = getPrompt(itemType, item);\n\n  return (\n    <div ref={root} style={customStyle}>\n      <PreviewPrompt className=\"label\" prompt={prompt} tagName=\"span\" />\n    </div>\n  );\n};\n\nexport default PreviewComponent;\n"],"file":"preview-component.js"}
+{"version":3,"sources":["../src/preview-component.jsx"],"names":["styles","maskBlank","border","color","minWidth","minHeight","height","maxWidth","display","padding","alignItems","justifyContent","borderRadius","ica","backgroundColor","background","primary","marginLeft","marginTop","width","categorize","text","matchList","boxSizing","placementOrdering","getPrompt","itemType","item","choice","value","undefined","getCustomStyle","style","baseStyle","PreviewComponent","preview","root","current","customStyle","prompt"],"mappings":"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","sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { usePreview } from 'react-dnd-multi-backend';\nimport { PreviewPrompt } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { color } from '@pie-lib/render-ui';\n\nconst styles = {\n  maskBlank: {\n    border: '1px solid black',\n    color: 'black',\n    minWidth: '90px',\n    minHeight: '32px',\n    height: 'auto',\n    maxWidth: '374px',\n    display: 'flex',\n    padding: '4px',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: '16px',\n  },\n  ica: {\n    backgroundColor: color.background(),\n    border: `1px solid ${color.primary()}`,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minHeight: '28px',\n    padding: '0 3px',\n    marginLeft: 2,\n    marginTop: 2,\n    width: 'fit-content',\n  },\n  categorize: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    padding: '16px',\n    borderRadius: '4px',\n    border: '1px solid',\n  },\n  matchList: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    padding: '10px',\n    boxSizing: 'border-box',\n    border: '1px solid #D1D1D1',\n  },\n  placementOrdering: {\n    padding: '10px',\n    boxSizing: 'border-box',\n    border: '1px solid #D1D1D1',\n    backgroundColor: color.background(),\n  },\n};\n\nconst getPrompt = (itemType, item) => {\n  switch (itemType) {\n    // DRAG-IN-THE-BLANK\n    case 'MaskBlank':\n      return item?.choice?.value;\n    // IMAGE-CLOZE-ASSOCIATION\n    case 'react-dnd-response':\n      return item?.value;\n    // MATCH-LIST\n    case 'Answer':\n      return item?.value;\n    // PLACEMENT-ORDERING\n    case 'Tile':\n      return item?.value;\n    default:\n      return item?.itemType === 'categorize' ? item?.value : undefined;\n  }\n};\n\nconst getCustomStyle = (itemType, item, style) => {\n  const baseStyle = {\n    ...style,\n    ...(itemType === 'MaskBlank' ? styles.maskBlank : {}),\n    ...(item?.itemType === 'categorize' ? styles.categorize : {}),\n    ...(itemType === 'Answer' ? styles.matchList : {}),\n    ...(itemType === 'Tile' ? styles.placementOrdering : {}),\n    ...(itemType === 'react-dnd-response' ? styles.ica : {}),\n  };\n\n  return baseStyle;\n};\n\nconst PreviewComponent = () => {\n  const preview = usePreview();\n  const { itemType, item, style, display } = preview;\n\n  const root = useRef(null);\n\n  useEffect(() => {\n    if (display && root.current) {\n      renderMath(root.current);\n    }\n  }, [display, item?.choice?.value, item?.value, itemType, item]);\n\n  if (!display) {\n    return null;\n  }\n\n  const customStyle = getCustomStyle(itemType, item, style);\n\n  const prompt = getPrompt(itemType, item);\n\n  return (\n    <div ref={root} style={customStyle}>\n      <PreviewPrompt className=\"label\" prompt={prompt} tagName=\"span\" />\n    </div>\n  );\n};\n\nexport default PreviewComponent;\n"],"file":"preview-component.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/drag",
-  "version": "2.2.3-next.0+0d6a88e7",
+  "version": "2.2.3-next.12+c191a778",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -19,5 +19,5 @@
   "scripts": {},
   "author": "",
   "license": "ISC",
-  "gitHead": "0d6a88e73b9db47c4fe07377d5e8dfb8d9dd06a1"
+  "gitHead": "c191a778d6855cacf7e139b1f206e8bab262ce76"
 }

package/src/drag-in-the-blank-dp.jsx

@@ -1,7 +1,6 @@
 import { DropTarget } from 'react-dnd';
 import { DroppablePlaceholder } from '../lib/droppable-placeholder';
-
-const DRAG_TYPE = 'MaskBlank';
+import dragType from './drag-type';
 
 export const spec = {
   canDrop: (props) => {
@@ -12,7 +11,7 @@ export const spec = {
   }),
 };
 
-const WithTarget = DropTarget(DRAG_TYPE, spec, (connect, monitor) => ({
+const WithTarget = DropTarget(dragType.types.db, spec, (connect, monitor) => ({
   connectDropTarget: connect.dropTarget(),
   isOver: monitor.isOver(),
 }))(DroppablePlaceholder);

package/src/drag-type.js

@@ -0,0 +1,7 @@
+export default {
+  types: {
+    ica: 'react-dnd-response',
+    ml: 'Answer',
+    db: 'MaskBlank',
+  },
+};

package/src/ica-dp.jsx

@@ -0,0 +1,23 @@
+import { DropTarget } from 'react-dnd';
+import { DroppablePlaceholder } from './droppable-placeholder';
+import dragType from './drag-type';
+
+export const spec = {
+  canDrop: (props) => {
+    return !props.disabled;
+  },
+  drop: (props, monitor) => {
+    const item = monitor.getItem();
+
+    if (props.onRemoveAnswer) {
+      props.onRemoveAnswer(item);
+    }
+  },
+};
+
+const WithTarget = DropTarget(dragType.types.ica, spec, (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+}))(DroppablePlaceholder);
+
+export default WithTarget;

package/src/index.js

@@ -7,11 +7,13 @@ import swap from './swap';
 import * as uid from './uid-context';
 import MatchDroppablePlaceholder from './match-list-dp';
 import DragDroppablePlaceholder from './drag-in-the-blank-dp';
+import ICADroppablePlaceholder from './ica-dp';
 
 export {
   PlaceHolder,
   MatchDroppablePlaceholder,
   DragDroppablePlaceholder,
+  ICADroppablePlaceholder,
   withDragContext,
   Choice,
   swap,

package/src/match-list-dp.jsx

@@ -1,7 +1,6 @@
 import { DropTarget } from 'react-dnd';
 import { DroppablePlaceholder } from './droppable-placeholder';
-
-const DRAG_TYPE = 'Answer';
+import dragType from './drag-type';
 
 export const spec = {
   canDrop: (props) => {
@@ -16,7 +15,7 @@ export const spec = {
   },
 };
 
-const WithTarget = DropTarget(DRAG_TYPE, spec, (connect, monitor) => ({
+const WithTarget = DropTarget(dragType.types.ml, spec, (connect, monitor) => ({
   connectDropTarget: connect.dropTarget(),
   isOver: monitor.isOver(),
 }))(DroppablePlaceholder);

package/src/preview-component.jsx

@@ -4,31 +4,52 @@ import { PreviewPrompt } from '@pie-lib/render-ui';
 import { renderMath } from '@pie-lib/math-rendering';
 import { color } from '@pie-lib/render-ui';
 
-const MaskBlankStyle = {
-  border: '1px solid black',
-  color: 'black',
-  minWidth: '90px',
-  minHeight: '32px',
-  height: 'auto',
-  maxWidth: '374px',
-  display: 'flex',
-  padding: '4px',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: '16px',
-};
-
-const ICAStyle = {
-  backgroundColor: color.background(),
-  border: `1px solid ${color.text()}`,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  minHeight: '28px',
-  padding: '0 3px',
-  marginLeft: 2,
-  marginTop: 2,
-  width: 'fit-content',
+const styles = {
+  maskBlank: {
+    border: '1px solid black',
+    color: 'black',
+    minWidth: '90px',
+    minHeight: '32px',
+    height: 'auto',
+    maxWidth: '374px',
+    display: 'flex',
+    padding: '4px',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '16px',
+  },
+  ica: {
+    backgroundColor: color.background(),
+    border: `1px solid ${color.primary()}`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: '28px',
+    padding: '0 3px',
+    marginLeft: 2,
+    marginTop: 2,
+    width: 'fit-content',
+  },
+  categorize: {
+    color: color.text(),
+    backgroundColor: color.background(),
+    padding: '16px',
+    borderRadius: '4px',
+    border: '1px solid',
+  },
+  matchList: {
+    color: color.text(),
+    backgroundColor: color.background(),
+    padding: '10px',
+    boxSizing: 'border-box',
+    border: '1px solid #D1D1D1',
+  },
+  placementOrdering: {
+    padding: '10px',
+    boxSizing: 'border-box',
+    border: '1px solid #D1D1D1',
+    backgroundColor: color.background(),
+  },
 };
 
 const getPrompt = (itemType, item) => {
@@ -39,16 +60,35 @@ const getPrompt = (itemType, item) => {
     // IMAGE-CLOZE-ASSOCIATION
     case 'react-dnd-response':
       return item?.value;
+    // MATCH-LIST
+    case 'Answer':
+      return item?.value;
+    // PLACEMENT-ORDERING
+    case 'Tile':
+      return item?.value;
     default:
-      return undefined;
+      return item?.itemType === 'categorize' ? item?.value : undefined;
   }
 };
 
+const getCustomStyle = (itemType, item, style) => {
+  const baseStyle = {
+    ...style,
+    ...(itemType === 'MaskBlank' ? styles.maskBlank : {}),
+    ...(item?.itemType === 'categorize' ? styles.categorize : {}),
+    ...(itemType === 'Answer' ? styles.matchList : {}),
+    ...(itemType === 'Tile' ? styles.placementOrdering : {}),
+    ...(itemType === 'react-dnd-response' ? styles.ica : {}),
+  };
+
+  return baseStyle;
+};
+
 const PreviewComponent = () => {
   const preview = usePreview();
   const { itemType, item, style, display } = preview;
 
-  let root = useRef(null);
+  const root = useRef(null);
 
   useEffect(() => {
     if (display && root.current) {
@@ -60,12 +100,7 @@ const PreviewComponent = () => {
     return null;
   }
 
-  const customStyle = {
-    ...style,
-    ...(itemType === 'MaskBlank' ? MaskBlankStyle : {}),
-    // TODO: In the image-cloze-association component, there's a noticeable delay in the image rendering process. This results in a brief display of an empty image placeholder before the actual image appears after a few seconds. This issue also impacts the correct rendering of the preview feature, thereby negatively affecting the user experience. This needs to be addressed promptly.
-    //...(itemType === 'react-dnd-response' ? ICAStyle : {}),
-  };
+  const customStyle = getCustomStyle(itemType, item, style);
 
   const prompt = getPrompt(itemType, item);