@pie-lib/drag 2.2.2 → 2.2.3-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/preview-component.js +38 -26
- package/lib/preview-component.js.map +1 -1
- package/package.json +2 -2
- package/src/preview-component.jsx +40 -28
package/lib/preview-component.js
CHANGED
|
@@ -27,30 +27,39 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
27
27
|
|
|
28
28
|
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; }
|
|
29
29
|
|
|
30
|
-
var
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
30
|
+
var styles = {
|
|
31
|
+
maskBlank: {
|
|
32
|
+
border: '1px solid black',
|
|
33
|
+
color: 'black',
|
|
34
|
+
minWidth: '90px',
|
|
35
|
+
minHeight: '32px',
|
|
36
|
+
height: 'auto',
|
|
37
|
+
maxWidth: '374px',
|
|
38
|
+
display: 'flex',
|
|
39
|
+
padding: '4px',
|
|
40
|
+
alignItems: 'center',
|
|
41
|
+
justifyContent: 'center',
|
|
42
|
+
borderRadius: '16px'
|
|
43
|
+
},
|
|
44
|
+
ica: {
|
|
45
|
+
backgroundColor: _renderUi.color.background(),
|
|
46
|
+
border: "1px solid ".concat(_renderUi.color.text()),
|
|
47
|
+
display: 'flex',
|
|
48
|
+
alignItems: 'center',
|
|
49
|
+
justifyContent: 'center',
|
|
50
|
+
minHeight: '28px',
|
|
51
|
+
padding: '0 3px',
|
|
52
|
+
marginLeft: 2,
|
|
53
|
+
marginTop: 2,
|
|
54
|
+
width: 'fit-content'
|
|
55
|
+
},
|
|
56
|
+
categorize: {
|
|
57
|
+
color: _renderUi.color.text(),
|
|
58
|
+
backgroundColor: _renderUi.color.background(),
|
|
59
|
+
padding: '16px',
|
|
60
|
+
borderRadius: '4px',
|
|
61
|
+
border: '1px solid'
|
|
62
|
+
}
|
|
54
63
|
};
|
|
55
64
|
|
|
56
65
|
var getPrompt = function getPrompt(itemType, item) {
|
|
@@ -66,7 +75,10 @@ var getPrompt = function getPrompt(itemType, item) {
|
|
|
66
75
|
return item === null || item === void 0 ? void 0 : item.value;
|
|
67
76
|
|
|
68
77
|
default:
|
|
69
|
-
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
if (itemType && (item === null || item === void 0 ? void 0 : item.itemType) === 'categorize') {
|
|
81
|
+
return item === null || item === void 0 ? void 0 : item.value;
|
|
70
82
|
}
|
|
71
83
|
};
|
|
72
84
|
|
|
@@ -89,7 +101,7 @@ var PreviewComponent = function PreviewComponent() {
|
|
|
89
101
|
return null;
|
|
90
102
|
}
|
|
91
103
|
|
|
92
|
-
var customStyle = _objectSpread(_objectSpread({}, style), itemType === 'MaskBlank' ?
|
|
104
|
+
var customStyle = _objectSpread(_objectSpread(_objectSpread({}, style), itemType === 'MaskBlank' ? styles.maskBlank : {}), (item === null || item === void 0 ? void 0 : item.itemType) === 'categorize' ? styles.categorize : {});
|
|
93
105
|
|
|
94
106
|
var prompt = getPrompt(itemType, item);
|
|
95
107
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/preview-component.jsx"],"names":["
|
|
1
|
+
{"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","getPrompt","itemType","item","choice","value","PreviewComponent","preview","style","root","current","customStyle","prompt"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;AAGA,IAAMA,MAAM,GAAG;AACbC,EAAAA,SAAS,EAAE;AACTC,IAAAA,MAAM,EAAE,iBADC;AAETC,IAAAA,KAAK,EAAE,OAFE;AAGTC,IAAAA,QAAQ,EAAE,MAHD;AAITC,IAAAA,SAAS,EAAE,MAJF;AAKTC,IAAAA,MAAM,EAAE,MALC;AAMTC,IAAAA,QAAQ,EAAE,OAND;AAOTC,IAAAA,OAAO,EAAE,MAPA;AAQTC,IAAAA,OAAO,EAAE,KARA;AASTC,IAAAA,UAAU,EAAE,QATH;AAUTC,IAAAA,cAAc,EAAE,QAVP;AAWTC,IAAAA,YAAY,EAAE;AAXL,GADE;AAcbC,EAAAA,GAAG,EAAE;AACHC,IAAAA,eAAe,EAAEX,gBAAMY,UAAN,EADd;AAEHb,IAAAA,MAAM,sBAAeC,gBAAMa,IAAN,EAAf,CAFH;AAGHR,IAAAA,OAAO,EAAE,MAHN;AAIHE,IAAAA,UAAU,EAAE,QAJT;AAKHC,IAAAA,cAAc,EAAE,QALb;AAMHN,IAAAA,SAAS,EAAE,MANR;AAOHI,IAAAA,OAAO,EAAE,OAPN;AAQHQ,IAAAA,UAAU,EAAE,CART;AASHC,IAAAA,SAAS,EAAE,CATR;AAUHC,IAAAA,KAAK,EAAE;AAVJ,GAdQ;AA0BbC,EAAAA,UAAU,EAAE;AACVjB,IAAAA,KAAK,EAAEA,gBAAMa,IAAN,EADG;AAEVF,IAAAA,eAAe,EAAEX,gBAAMY,UAAN,EAFP;AAGVN,IAAAA,OAAO,EAAE,MAHC;AAIVG,IAAAA,YAAY,EAAE,KAJJ;AAKVV,IAAAA,MAAM,EAAE;AALE;AA1BC,CAAf;;AAmCA,IAAMmB,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;AAPF;;AAUA,MAAIH,QAAQ,IAAI,CAAAC,IAAI,SAAJ,IAAAA,IAAI,WAAJ,YAAAA,IAAI,CAAED,QAAN,MAAmB,YAAnC,EAAiD;AAC/C,WAAOC,IAAP,aAAOA,IAAP,uBAAOA,IAAI,CAAEE,KAAb;AACD;AACF,CAdD;;AAgBA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AAAA;;AAC7B,MAAMC,OAAO,GAAG,uCAAhB;AACA,MAAQL,QAAR,GAA2CK,OAA3C,CAAQL,QAAR;AAAA,MAAkBC,IAAlB,GAA2CI,OAA3C,CAAkBJ,IAAlB;AAAA,MAAwBK,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,EAAUe,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,CAACf,OAAL,EAAc;AACZ,WAAO,IAAP;AACD;;AAED,MAAMuB,WAAW,iDACZH,KADY,GAEXN,QAAQ,KAAK,WAAb,GAA2BtB,MAAM,CAACC,SAAlC,GAA8C,EAFnC,GAGX,CAAAsB,IAAI,SAAJ,IAAAA,IAAI,WAAJ,YAAAA,IAAI,CAAED,QAAN,MAAmB,YAAnB,GAAkCtB,MAAM,CAACoB,UAAzC,GAAsD,EAH3C,CAAjB;;AAQA,MAAMY,MAAM,GAAGX,SAAS,CAACC,QAAD,EAAWC,IAAX,CAAxB;AAEA,sBACE;AAAK,IAAA,GAAG,EAAEM,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,CA/BD;;eAiCeN,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 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};\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 }\n\n if (itemType && item?.itemType === 'categorize') {\n return item?.value;\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' ? styles.maskBlank : {}),\n ...(item?.itemType === 'categorize' ? styles.categorize : {}),\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 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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-lib/drag",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.3-next.1+c88e1fd3",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "src/index.js",
|
|
@@ -19,5 +19,5 @@
|
|
|
19
19
|
"scripts": {},
|
|
20
20
|
"author": "",
|
|
21
21
|
"license": "ISC",
|
|
22
|
-
"gitHead": "
|
|
22
|
+
"gitHead": "c88e1fd376b6f2c4f20c5312dd0d960a5165e48e"
|
|
23
23
|
}
|
|
@@ -4,31 +4,39 @@ import { PreviewPrompt } from '@pie-lib/render-ui';
|
|
|
4
4
|
import { renderMath } from '@pie-lib/math-rendering';
|
|
5
5
|
import { color } from '@pie-lib/render-ui';
|
|
6
6
|
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
7
|
+
const styles = {
|
|
8
|
+
maskBlank: {
|
|
9
|
+
border: '1px solid black',
|
|
10
|
+
color: 'black',
|
|
11
|
+
minWidth: '90px',
|
|
12
|
+
minHeight: '32px',
|
|
13
|
+
height: 'auto',
|
|
14
|
+
maxWidth: '374px',
|
|
15
|
+
display: 'flex',
|
|
16
|
+
padding: '4px',
|
|
17
|
+
alignItems: 'center',
|
|
18
|
+
justifyContent: 'center',
|
|
19
|
+
borderRadius: '16px',
|
|
20
|
+
},
|
|
21
|
+
ica: {
|
|
22
|
+
backgroundColor: color.background(),
|
|
23
|
+
border: `1px solid ${color.text()}`,
|
|
24
|
+
display: 'flex',
|
|
25
|
+
alignItems: 'center',
|
|
26
|
+
justifyContent: 'center',
|
|
27
|
+
minHeight: '28px',
|
|
28
|
+
padding: '0 3px',
|
|
29
|
+
marginLeft: 2,
|
|
30
|
+
marginTop: 2,
|
|
31
|
+
width: 'fit-content',
|
|
32
|
+
},
|
|
33
|
+
categorize: {
|
|
34
|
+
color: color.text(),
|
|
35
|
+
backgroundColor: color.background(),
|
|
36
|
+
padding: '16px',
|
|
37
|
+
borderRadius: '4px',
|
|
38
|
+
border: '1px solid',
|
|
39
|
+
},
|
|
32
40
|
};
|
|
33
41
|
|
|
34
42
|
const getPrompt = (itemType, item) => {
|
|
@@ -40,7 +48,10 @@ const getPrompt = (itemType, item) => {
|
|
|
40
48
|
case 'react-dnd-response':
|
|
41
49
|
return item?.value;
|
|
42
50
|
default:
|
|
43
|
-
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
if (itemType && item?.itemType === 'categorize') {
|
|
54
|
+
return item?.value;
|
|
44
55
|
}
|
|
45
56
|
};
|
|
46
57
|
|
|
@@ -62,9 +73,10 @@ const PreviewComponent = () => {
|
|
|
62
73
|
|
|
63
74
|
const customStyle = {
|
|
64
75
|
...style,
|
|
65
|
-
...(itemType === 'MaskBlank' ?
|
|
76
|
+
...(itemType === 'MaskBlank' ? styles.maskBlank : {}),
|
|
77
|
+
...(item?.itemType === 'categorize' ? styles.categorize : {}),
|
|
66
78
|
// 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.
|
|
67
|
-
//...(itemType === 'react-dnd-response' ?
|
|
79
|
+
//...(itemType === 'react-dnd-response' ? styles.ica : {}),
|
|
68
80
|
};
|
|
69
81
|
|
|
70
82
|
const prompt = getPrompt(itemType, item);
|