@pie-element/image-cloze-association 6.4.1-next.2 → 6.4.1-next.6
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/possible-response.js +11 -10
- package/lib/possible-response.js.map +1 -1
- package/package.json +2 -2
- package/src/possible-response.jsx +23 -17
package/lib/possible-response.js
CHANGED
|
@@ -70,19 +70,16 @@ var PossibleResponse = /*#__PURE__*/function (_React$Component) {
|
|
|
70
70
|
bottom: '3px',
|
|
71
71
|
right: '3px'
|
|
72
72
|
};
|
|
73
|
-
var correctnessClass;
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
correctnessClass = 'baseIncorrect';
|
|
79
|
-
}
|
|
80
|
-
|
|
73
|
+
var correctnessClass = isCorrect === true ? 'baseCorrect' : isCorrect === false ? 'baseIncorrect' : undefined;
|
|
74
|
+
var imgRegex = /<img[^>]+src="([^">]+)"/;
|
|
75
|
+
var containsImage = imgRegex.test(data.value);
|
|
76
|
+
var containerClassNames = (0, _classnames["default"])([classes.base, (_ref2 = {}, (0, _defineProperty2["default"])(_ref2, classes.answerChoiceTransparency, answerChoiceTransparency), (0, _defineProperty2["default"])(_ref2, classes[correctnessClass], !!correctnessClass), (0, _defineProperty2["default"])(_ref2, classes.textAnswerChoiceStyle, !containsImage), _ref2)]);
|
|
77
|
+
var promptClassNames = (0, _classnames["default"])([classes.span, (0, _defineProperty2["default"])({}, classes.hiddenSpan, data.hidden)]);
|
|
81
78
|
return connectDragSource( /*#__PURE__*/_react["default"].createElement("div", {
|
|
82
|
-
className:
|
|
79
|
+
className: containerClassNames,
|
|
83
80
|
style: containerStyle
|
|
84
81
|
}, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
|
|
85
|
-
className:
|
|
82
|
+
className: promptClassNames,
|
|
86
83
|
prompt: data.value,
|
|
87
84
|
tagName: "span"
|
|
88
85
|
}), /*#__PURE__*/_react["default"].createElement(_evaluationIcon["default"], {
|
|
@@ -129,6 +126,10 @@ var styles = function styles() {
|
|
|
129
126
|
pointerEvents: 'none'
|
|
130
127
|
}
|
|
131
128
|
},
|
|
129
|
+
textAnswerChoiceStyle: {
|
|
130
|
+
padding: '0 10px',
|
|
131
|
+
margin: '4px 6px !important'
|
|
132
|
+
},
|
|
132
133
|
answerChoiceTransparency: {
|
|
133
134
|
border: 'none',
|
|
134
135
|
backgroundColor: "".concat(_renderUi.color.transparent()),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/possible-response.jsx"],"names":["PossibleResponse","props","classes","connectDragSource","containerStyle","data","answerChoiceTransparency","isCorrect","evaluationStyle","fontSize","position","bottom","right","correctnessClass","base","span","hiddenSpan","hidden","
|
|
1
|
+
{"version":3,"sources":["../src/possible-response.jsx"],"names":["PossibleResponse","props","classes","connectDragSource","containerStyle","data","answerChoiceTransparency","isCorrect","evaluationStyle","fontSize","position","bottom","right","correctnessClass","undefined","imgRegex","containsImage","test","value","containerClassNames","base","textAnswerChoiceStyle","promptClassNames","span","hiddenSpan","hidden","React","Component","propTypes","canDrag","PropTypes","bool","isRequired","object","func","onDragBegin","onDragEnd","defaultProps","styles","backgroundColor","color","white","border","borderDark","display","alignItems","justifyContent","minHeight","width","pointerEvents","padding","margin","transparent","baseCorrect","correct","baseIncorrect","incorrect","background","visibility","Styled","tileSource","beginDrag","id","containerIndex","endDrag","c","types","response","connect","monitor","dragSource","isDragging"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport { DragSource } from '@pie-lib/pie-toolbox/drag';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\nimport { PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\n\nimport EvaluationIcon from './evaluation-icon';\nimport c from './constants';\n\nexport class PossibleResponse extends React.Component {\n render() {\n const { classes, connectDragSource, containerStyle, data, answerChoiceTransparency } = this.props;\n const { isCorrect } = data || {};\n const evaluationStyle = {\n fontSize: 14,\n position: 'absolute',\n bottom: '3px',\n right: '3px',\n };\n const correctnessClass = isCorrect === true ? 'baseCorrect' : isCorrect === false ? 'baseIncorrect' : undefined;\n\n const imgRegex = /<img[^>]+src=\"([^\">]+)\"/;\n const containsImage = imgRegex.test(data.value);\n\n const containerClassNames = classNames([\n classes.base,\n {\n [classes.answerChoiceTransparency]: answerChoiceTransparency,\n [classes[correctnessClass]]: !!correctnessClass,\n [classes.textAnswerChoiceStyle]: !containsImage,\n },\n ]);\n\n const promptClassNames = classNames([\n classes.span,\n { [classes.hiddenSpan]: data.hidden },\n ]);\n\n return connectDragSource(\n <div className={containerClassNames} style={containerStyle}>\n <PreviewPrompt\n className={promptClassNames}\n prompt={data.value}\n tagName=\"span\"\n />\n <EvaluationIcon isCorrect={data.isCorrect} containerStyle={evaluationStyle} />\n </div>,\n );\n }\n}\n\nPossibleResponse.propTypes = {\n canDrag: PropTypes.bool.isRequired,\n classes: PropTypes.object,\n connectDragSource: PropTypes.func,\n containerStyle: PropTypes.object,\n data: PropTypes.object.isRequired,\n onDragBegin: PropTypes.func.isRequired,\n onDragEnd: PropTypes.func.isRequired,\n answerChoiceTransparency: PropTypes.bool,\n};\n\nPossibleResponse.defaultProps = {\n classes: {},\n connectDragSource: () => {},\n containerStyle: {},\n};\n\nconst styles = () => ({\n base: {\n position: 'relative',\n backgroundColor: color.white(),\n border: `1px solid ${color.borderDark()}`,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minHeight: '28px',\n width: 'fit-content',\n '& span img':{\n // Added for touch devices, for image content.\n // This will prevent the context menu from appearing and not allowing other interactions with the image.\n // If interactions with the image in the token will be requested we should handle only the context Menu.\n pointerEvents: 'none',\n }\n },\n textAnswerChoiceStyle: {\n padding: '0 10px',\n margin: '4px 6px !important',\n },\n answerChoiceTransparency: {\n border: 'none',\n backgroundColor: `${color.transparent()}`,\n\n '&:hover': {\n border: `1px solid ${color.borderDark()}`,\n },\n },\n baseCorrect: {\n border: `2px solid ${color.correct()} !important`,\n },\n baseIncorrect: {\n border: `2px solid ${color.incorrect()} !important`,\n },\n span: {\n backgroundColor: color.background(),\n },\n hiddenSpan: {\n visibility: 'hidden',\n },\n});\n\nconst Styled = withStyles(styles)(PossibleResponse);\n\nconst tileSource = {\n canDrag(props) {\n const { canDrag } = props;\n return canDrag;\n },\n beginDrag(props) {\n const {\n data,\n data: { id, value, containerIndex },\n onDragBegin,\n } = props;\n onDragBegin(data);\n return {\n id,\n value,\n containerIndex,\n };\n },\n endDrag(props) {\n props.onDragEnd();\n },\n};\n\nexport default DragSource(c.types.response, tileSource, (connect, monitor) => ({\n connectDragSource: connect.dragSource(),\n isDragging: monitor.isDragging(),\n}))(Styled);\n"],"file":"possible-response.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-element/image-cloze-association",
|
|
3
|
-
"version": "6.4.1-next.
|
|
3
|
+
"version": "6.4.1-next.6+a1c3fafa3",
|
|
4
4
|
"description": "",
|
|
5
5
|
"repository": "pie-framework/pie-elements",
|
|
6
6
|
"publishConfig": {
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
},
|
|
20
20
|
"author": "pie framework developers",
|
|
21
21
|
"license": "ISC",
|
|
22
|
-
"gitHead": "
|
|
22
|
+
"gitHead": "a1c3fafa34406982dd57cb891f064e6ea78ada04",
|
|
23
23
|
"scripts": {
|
|
24
24
|
"postpublish": "../../scripts/postpublish"
|
|
25
25
|
},
|
|
@@ -19,27 +19,29 @@ export class PossibleResponse extends React.Component {
|
|
|
19
19
|
bottom: '3px',
|
|
20
20
|
right: '3px',
|
|
21
21
|
};
|
|
22
|
-
|
|
22
|
+
const correctnessClass = isCorrect === true ? 'baseCorrect' : isCorrect === false ? 'baseIncorrect' : undefined;
|
|
23
23
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
24
|
+
const imgRegex = /<img[^>]+src="([^">]+)"/;
|
|
25
|
+
const containsImage = imgRegex.test(data.value);
|
|
26
|
+
|
|
27
|
+
const containerClassNames = classNames([
|
|
28
|
+
classes.base,
|
|
29
|
+
{
|
|
30
|
+
[classes.answerChoiceTransparency]: answerChoiceTransparency,
|
|
31
|
+
[classes[correctnessClass]]: !!correctnessClass,
|
|
32
|
+
[classes.textAnswerChoiceStyle]: !containsImage,
|
|
33
|
+
},
|
|
34
|
+
]);
|
|
35
|
+
|
|
36
|
+
const promptClassNames = classNames([
|
|
37
|
+
classes.span,
|
|
38
|
+
{ [classes.hiddenSpan]: data.hidden },
|
|
39
|
+
]);
|
|
29
40
|
|
|
30
41
|
return connectDragSource(
|
|
31
|
-
<div
|
|
32
|
-
className={classNames([
|
|
33
|
-
classes.base,
|
|
34
|
-
{
|
|
35
|
-
[classes.answerChoiceTransparency]: answerChoiceTransparency,
|
|
36
|
-
[classes[correctnessClass]]: !!correctnessClass,
|
|
37
|
-
},
|
|
38
|
-
])}
|
|
39
|
-
style={containerStyle}
|
|
40
|
-
>
|
|
42
|
+
<div className={containerClassNames} style={containerStyle}>
|
|
41
43
|
<PreviewPrompt
|
|
42
|
-
className={
|
|
44
|
+
className={promptClassNames}
|
|
43
45
|
prompt={data.value}
|
|
44
46
|
tagName="span"
|
|
45
47
|
/>
|
|
@@ -83,6 +85,10 @@ const styles = () => ({
|
|
|
83
85
|
pointerEvents: 'none',
|
|
84
86
|
}
|
|
85
87
|
},
|
|
88
|
+
textAnswerChoiceStyle: {
|
|
89
|
+
padding: '0 10px',
|
|
90
|
+
margin: '4px 6px !important',
|
|
91
|
+
},
|
|
86
92
|
answerChoiceTransparency: {
|
|
87
93
|
border: 'none',
|
|
88
94
|
backgroundColor: `${color.transparent()}`,
|