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

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.text()),
+    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({}, 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 : {});
+
+  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","text","marginLeft","marginTop","width","categorize","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.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  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    // 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' ? 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.5+4343aa3e",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -19,5 +19,5 @@
   "scripts": {},
   "author": "",
   "license": "ISC",
-  "gitHead": "0d6a88e73b9db47c4fe07377d5e8dfb8d9dd06a1"
+  "gitHead": "4343aa3e2c9dd8fc83c467eea4d7742663a5ce65"
 }

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.text()}`,
+    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,36 @@ 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 : {}),
+    // 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' ? 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 +101,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);