@pie-lib/drag 2.2.3-next.1 → 2.2.3
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/CHANGELOG.md +8 -0
- package/lib/preview-component.js +28 -5
- package/lib/preview-component.js.map +1 -1
- package/package.json +2 -2
- package/src/preview-component.jsx +35 -11
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [2.2.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.2...@pie-lib/drag@2.2.3) (2023-07-31)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @pie-lib/drag
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [2.2.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.1...@pie-lib/drag@2.2.2) (2023-07-24)
|
|
7
15
|
|
|
8
16
|
|
package/lib/preview-component.js
CHANGED
|
@@ -59,6 +59,19 @@ var styles = {
|
|
|
59
59
|
padding: '16px',
|
|
60
60
|
borderRadius: '4px',
|
|
61
61
|
border: '1px solid'
|
|
62
|
+
},
|
|
63
|
+
matchList: {
|
|
64
|
+
color: _renderUi.color.text(),
|
|
65
|
+
backgroundColor: _renderUi.color.background(),
|
|
66
|
+
padding: '10px',
|
|
67
|
+
boxSizing: 'border-box',
|
|
68
|
+
border: '1px solid #D1D1D1'
|
|
69
|
+
},
|
|
70
|
+
placementOrdering: {
|
|
71
|
+
padding: '10px',
|
|
72
|
+
boxSizing: 'border-box',
|
|
73
|
+
border: '1px solid #D1D1D1',
|
|
74
|
+
backgroundColor: _renderUi.color.background()
|
|
62
75
|
}
|
|
63
76
|
};
|
|
64
77
|
|
|
@@ -73,13 +86,24 @@ var getPrompt = function getPrompt(itemType, item) {
|
|
|
73
86
|
|
|
74
87
|
case 'react-dnd-response':
|
|
75
88
|
return item === null || item === void 0 ? void 0 : item.value;
|
|
89
|
+
// MATCH-LIST
|
|
90
|
+
|
|
91
|
+
case 'Answer':
|
|
92
|
+
return item === null || item === void 0 ? void 0 : item.value;
|
|
93
|
+
// PLACEMENT-ORDERING
|
|
94
|
+
|
|
95
|
+
case 'Tile':
|
|
96
|
+
return item === null || item === void 0 ? void 0 : item.value;
|
|
76
97
|
|
|
77
98
|
default:
|
|
99
|
+
return (item === null || item === void 0 ? void 0 : item.itemType) === 'categorize' ? item === null || item === void 0 ? void 0 : item.value : undefined;
|
|
78
100
|
}
|
|
101
|
+
};
|
|
79
102
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
103
|
+
var getCustomStyle = function getCustomStyle(itemType, item, style) {
|
|
104
|
+
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 : {});
|
|
105
|
+
|
|
106
|
+
return baseStyle;
|
|
83
107
|
};
|
|
84
108
|
|
|
85
109
|
var PreviewComponent = function PreviewComponent() {
|
|
@@ -101,8 +125,7 @@ var PreviewComponent = function PreviewComponent() {
|
|
|
101
125
|
return null;
|
|
102
126
|
}
|
|
103
127
|
|
|
104
|
-
var customStyle =
|
|
105
|
-
|
|
128
|
+
var customStyle = getCustomStyle(itemType, item, style);
|
|
106
129
|
var prompt = getPrompt(itemType, item);
|
|
107
130
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
108
131
|
ref: root,
|
|
@@ -1 +1 @@
|
|
|
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","
|
|
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","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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-lib/drag",
|
|
3
|
-
"version": "2.2.3
|
|
3
|
+
"version": "2.2.3",
|
|
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": "08f774aadc4b8345e6fa4338a59cfd57938f3676"
|
|
23
23
|
}
|
|
@@ -37,6 +37,19 @@ const styles = {
|
|
|
37
37
|
borderRadius: '4px',
|
|
38
38
|
border: '1px solid',
|
|
39
39
|
},
|
|
40
|
+
matchList: {
|
|
41
|
+
color: color.text(),
|
|
42
|
+
backgroundColor: color.background(),
|
|
43
|
+
padding: '10px',
|
|
44
|
+
boxSizing: 'border-box',
|
|
45
|
+
border: '1px solid #D1D1D1',
|
|
46
|
+
},
|
|
47
|
+
placementOrdering: {
|
|
48
|
+
padding: '10px',
|
|
49
|
+
boxSizing: 'border-box',
|
|
50
|
+
border: '1px solid #D1D1D1',
|
|
51
|
+
backgroundColor: color.background(),
|
|
52
|
+
},
|
|
40
53
|
};
|
|
41
54
|
|
|
42
55
|
const getPrompt = (itemType, item) => {
|
|
@@ -47,19 +60,36 @@ const getPrompt = (itemType, item) => {
|
|
|
47
60
|
// IMAGE-CLOZE-ASSOCIATION
|
|
48
61
|
case 'react-dnd-response':
|
|
49
62
|
return item?.value;
|
|
63
|
+
// MATCH-LIST
|
|
64
|
+
case 'Answer':
|
|
65
|
+
return item?.value;
|
|
66
|
+
// PLACEMENT-ORDERING
|
|
67
|
+
case 'Tile':
|
|
68
|
+
return item?.value;
|
|
50
69
|
default:
|
|
70
|
+
return item?.itemType === 'categorize' ? item?.value : undefined;
|
|
51
71
|
}
|
|
72
|
+
};
|
|
52
73
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
74
|
+
const getCustomStyle = (itemType, item, style) => {
|
|
75
|
+
const baseStyle = {
|
|
76
|
+
...style,
|
|
77
|
+
...(itemType === 'MaskBlank' ? styles.maskBlank : {}),
|
|
78
|
+
...(item?.itemType === 'categorize' ? styles.categorize : {}),
|
|
79
|
+
...(itemType === 'Answer' ? styles.matchList : {}),
|
|
80
|
+
...(itemType === 'Tile' ? styles.placementOrdering : {}),
|
|
81
|
+
// 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.
|
|
82
|
+
//...(itemType === 'react-dnd-response' ? styles.ica : {}),
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
return baseStyle;
|
|
56
86
|
};
|
|
57
87
|
|
|
58
88
|
const PreviewComponent = () => {
|
|
59
89
|
const preview = usePreview();
|
|
60
90
|
const { itemType, item, style, display } = preview;
|
|
61
91
|
|
|
62
|
-
|
|
92
|
+
const root = useRef(null);
|
|
63
93
|
|
|
64
94
|
useEffect(() => {
|
|
65
95
|
if (display && root.current) {
|
|
@@ -71,13 +101,7 @@ const PreviewComponent = () => {
|
|
|
71
101
|
return null;
|
|
72
102
|
}
|
|
73
103
|
|
|
74
|
-
const customStyle =
|
|
75
|
-
...style,
|
|
76
|
-
...(itemType === 'MaskBlank' ? styles.maskBlank : {}),
|
|
77
|
-
...(item?.itemType === 'categorize' ? styles.categorize : {}),
|
|
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.
|
|
79
|
-
//...(itemType === 'react-dnd-response' ? styles.ica : {}),
|
|
80
|
-
};
|
|
104
|
+
const customStyle = getCustomStyle(itemType, item, style);
|
|
81
105
|
|
|
82
106
|
const prompt = getPrompt(itemType, item);
|
|
83
107
|
|