@pie-element/image-cloze-association 4.14.3-next.9 → 4.14.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 CHANGED
@@ -3,6 +3,21 @@
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
+ ## [4.14.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@4.14.2...@pie-element/image-cloze-association@4.14.3) (2023-08-15)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * update pie-libs PD-3049, PD-2916, PD-2059 ([0e800b5](https://github.com/pie-framework/pie-elements/commit/0e800b54b852304d222a292400362e0870f0cc9a))
12
+ * updated pie-lib to fix PD-2802 ([eab79f7](https://github.com/pie-framework/pie-elements/commit/eab79f70ad4488207a5b9b401679eb096feba247))
13
+ * updated pie-lib to fix PD-2802, PD-3050, PD-3051 ([34b4dd7](https://github.com/pie-framework/pie-elements/commit/34b4dd7ba18f4c18589975921cc9d127926f8294))
14
+ * updated pie-libs Pd-1163 ([300c1db](https://github.com/pie-framework/pie-elements/commit/300c1db1658ce85ca58f3cc2981b604aefbf9f01))
15
+ * **image-cloze-association:** Introduce droppablePlaceholder to enhance user interaction on touch devices PD-3050 ([37c2ee1](https://github.com/pie-framework/pie-elements/commit/37c2ee14e073239adce76990e6096de7d18a73e8))
16
+
17
+
18
+
19
+
20
+
6
21
  ## [4.14.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@4.14.1...@pie-element/image-cloze-association@4.14.2) (2023-07-24)
7
22
 
8
23
 
@@ -3,6 +3,19 @@
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
+ ## [4.9.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@4.9.2...@pie-element/image-cloze-association-configure@4.9.3) (2023-08-15)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * update pie-libs PD-3049, PD-2916, PD-2059 ([0e800b5](https://github.com/pie-framework/pie-elements/commit/0e800b54b852304d222a292400362e0870f0cc9a))
12
+ * updated pie-lib to fix PD-2802, PD-3050, PD-3051 ([34b4dd7](https://github.com/pie-framework/pie-elements/commit/34b4dd7ba18f4c18589975921cc9d127926f8294))
13
+ * updated pie-libs Pd-1163 ([300c1db](https://github.com/pie-framework/pie-elements/commit/300c1db1658ce85ca58f3cc2981b604aefbf9f01))
14
+
15
+
16
+
17
+
18
+
6
19
  ## [4.9.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@4.9.1...@pie-element/image-cloze-association-configure@4.9.2) (2023-07-24)
7
20
 
8
21
 
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pie-element/image-cloze-association-configure",
3
3
  "private": true,
4
- "version": "4.9.2",
4
+ "version": "4.9.3",
5
5
  "description": "",
6
6
  "main": "lib/index.js",
7
7
  "module": "src/index.js",
@@ -9,8 +9,8 @@
9
9
  "dependencies": {
10
10
  "@material-ui/core": "^3.9.2",
11
11
  "@pie-framework/pie-configure-events": "^1.3.0",
12
- "@pie-lib/config-ui": "^11.8.6",
13
- "@pie-lib/editable-html": "^9.7.3",
12
+ "@pie-lib/config-ui": "^11.9.2",
13
+ "@pie-lib/editable-html": "^9.7.6",
14
14
  "debug": "^3.1.0",
15
15
  "prop-types": "^15.7.2",
16
16
  "react": "^16.8.6",
@@ -31,18 +31,11 @@ var ImageDropTarget = function ImageDropTarget(_ref) {
31
31
  onDragAnswerBegin = _ref.onDragAnswerBegin,
32
32
  onDragAnswerEnd = _ref.onDragAnswerEnd,
33
33
  showDashedBorder = _ref.showDashedBorder,
34
- connectDropTarget = _ref.connectDropTarget,
35
- isOverCurrent = _ref.isOverCurrent;
34
+ connectDropTarget = _ref.connectDropTarget;
36
35
  return connectDropTarget( /*#__PURE__*/_react["default"].createElement("div", {
37
36
  className: "\n ".concat(classes.responseContainer, "\n ").concat(showDashedBorder && !draggingElement.id ? classes.responseContainerDashed : '', "\n ").concat(draggingElement.id ? classes.responseContainerActive : '', "\n "),
38
37
  style: containerStyle
39
- }, isOverCurrent && !duplicateResponses ? /*#__PURE__*/_react["default"].createElement("div", {
40
- className: classes.dragOverContainer
41
- }, /*#__PURE__*/_react["default"].createElement("span", {
42
- dangerouslySetInnerHTML: {
43
- __html: draggingElement.value
44
- }
45
- })) : null, !isOverCurrent && answers.length || duplicateResponses && answers.length ? /*#__PURE__*/_react["default"].createElement("div", {
38
+ }, answers.length || duplicateResponses && answers.length ? /*#__PURE__*/_react["default"].createElement("div", {
46
39
  className: classes.answers
47
40
  }, answers.map(function (answer) {
48
41
  return /*#__PURE__*/_react["default"].createElement(_possibleResponse["default"], {
@@ -116,9 +109,8 @@ var tileSource = {
116
109
  var _default = (0, _drag.DropTarget)(_constants["default"].types.response, tileSource, function (connect, monitor) {
117
110
  return {
118
111
  connectDropTarget: connect.dropTarget(),
119
- isOverCurrent: monitor.isOver({
120
- shallow: true
121
- })
112
+ isOver: monitor.isOver(),
113
+ dragItem: monitor.getItem()
122
114
  };
123
115
  })(Styled);
124
116
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/image-drop-target.jsx"],"names":["ImageDropTarget","answers","canDrag","classes","containerStyle","draggingElement","duplicateResponses","onDragAnswerBegin","onDragAnswerEnd","showDashedBorder","connectDropTarget","isOverCurrent","responseContainer","id","responseContainerDashed","responseContainerActive","dragOverContainer","__html","value","length","map","answer","isCorrect","undefined","borderWidth","propTypes","PropTypes","object","bool","isRequired","func","onDrop","defaultProps","styles","display","flexWrap","backgroundColor","color","background","pointerEvents","width","position","border","text","Styled","tileSource","hover","props","monitor","isOver","shallow","drop","item","getItem","c","types","response","connect","dropTarget"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DropTarget } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\n\nimport PossibleResponse from './possible-response';\nimport c from './constants';\n\nconst ImageDropTarget = ({\n answers,\n canDrag,\n classes,\n containerStyle,\n draggingElement,\n duplicateResponses,\n onDragAnswerBegin,\n onDragAnswerEnd,\n showDashedBorder,\n // dnd-related props\n connectDropTarget,\n isOverCurrent,\n}) =>\n connectDropTarget(\n <div\n className={`\n ${classes.responseContainer}\n ${showDashedBorder && !draggingElement.id ? classes.responseContainerDashed : ''}\n ${draggingElement.id ? classes.responseContainerActive : ''}\n `}\n style={containerStyle}\n >\n {/* HOVER */}\n {isOverCurrent && !duplicateResponses ? (\n <div className={classes.dragOverContainer}>\n <span dangerouslySetInnerHTML={{ __html: draggingElement.value }} />\n </div>\n ) : null}\n\n {/* EXISTING ANSWERS */}\n {(!isOverCurrent && answers.length) || (duplicateResponses && answers.length) ? (\n <div className={classes.answers}>\n {answers.map((answer) => (\n <PossibleResponse\n canDrag={canDrag}\n containerStyle={answer.isCorrect === undefined ? { borderWidth: 0 } : {}}\n key={answer.id}\n data={answer}\n onDragBegin={() => onDragAnswerBegin(answer)}\n onDragEnd={onDragAnswerEnd}\n />\n ))}\n </div>\n ) : null}\n </div>,\n );\n\nImageDropTarget.propTypes = {\n answer: PropTypes.object,\n canDrag: PropTypes.bool.isRequired,\n classes: PropTypes.object,\n containerStyle: PropTypes.object.isRequired,\n draggingElement: PropTypes.object.isRequired,\n onDragAnswerBegin: PropTypes.func.isRequired,\n onDragAnswerEnd: PropTypes.func.isRequired,\n onDrop: PropTypes.func.isRequired,\n showDashedBorder: PropTypes.bool,\n};\n\nImageDropTarget.defaultProps = {\n answer: {},\n classes: {},\n};\n\nconst styles = () => ({\n answers: {\n display: 'flex',\n flexWrap: 'wrap',\n },\n dragOverContainer: {\n backgroundColor: color.background(),\n pointerEvents: 'none',\n width: 'fit-content',\n },\n responseContainer: {\n position: 'absolute',\n },\n responseContainerActive: {\n border: `2px solid ${color.text()}`,\n backgroundColor: 'rgba(230, 242, 252, .8)',\n },\n responseContainerDashed: {\n border: `2px dashed ${color.text()}`,\n },\n});\n\nconst Styled = withStyles(styles)(ImageDropTarget);\n\nconst tileSource = {\n hover(props, monitor) {\n monitor.isOver({ shallow: true });\n },\n drop(props, monitor) {\n const item = monitor.getItem();\n props.onDrop(item);\n },\n};\n\nexport default DropTarget(c.types.response, tileSource, (connect, monitor) => ({\n connectDropTarget: connect.dropTarget(),\n isOverCurrent: monitor.isOver({ shallow: true }),\n}))(Styled);\n"],"file":"image-drop-target.js"}
1
+ {"version":3,"sources":["../src/image-drop-target.jsx"],"names":["ImageDropTarget","answers","canDrag","classes","containerStyle","draggingElement","duplicateResponses","onDragAnswerBegin","onDragAnswerEnd","showDashedBorder","connectDropTarget","responseContainer","id","responseContainerDashed","responseContainerActive","length","map","answer","isCorrect","undefined","borderWidth","propTypes","PropTypes","object","bool","isRequired","func","onDrop","defaultProps","styles","display","flexWrap","dragOverContainer","backgroundColor","color","background","pointerEvents","width","position","border","text","Styled","tileSource","hover","props","monitor","isOver","shallow","drop","item","getItem","c","types","response","connect","dropTarget","dragItem"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DropTarget } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\n\nimport PossibleResponse from './possible-response';\nimport c from './constants';\n\nconst ImageDropTarget = ({\n answers,\n canDrag,\n classes,\n containerStyle,\n draggingElement,\n duplicateResponses,\n onDragAnswerBegin,\n onDragAnswerEnd,\n showDashedBorder,\n // dnd-related props\n connectDropTarget,\n}) =>\n connectDropTarget(\n <div\n className={`\n ${classes.responseContainer}\n ${showDashedBorder && !draggingElement.id ? classes.responseContainerDashed : ''}\n ${draggingElement.id ? classes.responseContainerActive : ''}\n `}\n style={containerStyle}\n >\n {answers.length || (duplicateResponses && answers.length) ? (\n <div className={classes.answers}>\n {answers.map((answer) => (\n <PossibleResponse\n canDrag={canDrag}\n containerStyle={answer.isCorrect === undefined ? { borderWidth: 0 } : {}}\n key={answer.id}\n data={answer}\n onDragBegin={() => onDragAnswerBegin(answer)}\n onDragEnd={onDragAnswerEnd}\n />\n ))}\n </div>\n ) : null}\n </div>,\n );\n\nImageDropTarget.propTypes = {\n answer: PropTypes.object,\n canDrag: PropTypes.bool.isRequired,\n classes: PropTypes.object,\n containerStyle: PropTypes.object.isRequired,\n draggingElement: PropTypes.object.isRequired,\n onDragAnswerBegin: PropTypes.func.isRequired,\n onDragAnswerEnd: PropTypes.func.isRequired,\n onDrop: PropTypes.func.isRequired,\n showDashedBorder: PropTypes.bool,\n};\n\nImageDropTarget.defaultProps = {\n answer: {},\n classes: {},\n};\n\nconst styles = () => ({\n answers: {\n display: 'flex',\n flexWrap: 'wrap',\n },\n dragOverContainer: {\n backgroundColor: color.background(),\n pointerEvents: 'none',\n width: 'fit-content',\n },\n responseContainer: {\n position: 'absolute',\n },\n responseContainerActive: {\n border: `2px solid ${color.text()}`,\n backgroundColor: 'rgba(230, 242, 252, .8)',\n },\n responseContainerDashed: {\n border: `2px dashed ${color.text()}`,\n },\n});\n\nconst Styled = withStyles(styles)(ImageDropTarget);\n\nconst tileSource = {\n hover(props, monitor) {\n monitor.isOver({ shallow: true });\n },\n drop(props, monitor) {\n const item = monitor.getItem();\n props.onDrop(item);\n },\n};\n\nexport default DropTarget(c.types.response, tileSource, (connect, monitor) => ({\n connectDropTarget: connect.dropTarget(),\n isOver: monitor.isOver(),\n dragItem: monitor.getItem(),\n}))(Styled);\n"],"file":"image-drop-target.js"}
@@ -99,11 +99,10 @@ var PossibleResponse = /*#__PURE__*/function (_React$Component) {
99
99
  return connectDragSource( /*#__PURE__*/_react["default"].createElement("div", {
100
100
  className: "".concat(classes.base, " ").concat(additionalClass),
101
101
  style: containerStyle
102
- }, /*#__PURE__*/_react["default"].createElement("span", {
102
+ }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
103
103
  className: (0, _classnames["default"])([classes.span, (0, _defineProperty2["default"])({}, classes.hiddenSpan, data.hidden)]),
104
- dangerouslySetInnerHTML: {
105
- __html: data.value
106
- }
104
+ prompt: data.value,
105
+ tagName: "span"
107
106
  }), /*#__PURE__*/_react["default"].createElement(_evaluationIcon["default"], {
108
107
  isCorrect: data.isCorrect,
109
108
  containerStyle: evaluationStyle
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/possible-response.jsx"],"names":["PossibleResponse","props","classes","isCorrect","data","styleProp","undefined","connectDragSource","containerStyle","additionalClass","getClassname","evaluationStyle","fontSize","position","bottom","right","base","span","hiddenSpan","hidden","__html","value","React","Component","propTypes","canDrag","PropTypes","bool","isRequired","object","func","onDragBegin","onDragEnd","defaultProps","styles","backgroundColor","color","background","border","primary","display","alignItems","justifyContent","minHeight","padding","marginLeft","marginTop","width","baseCorrect","correct","baseIncorrect","incorrect","pointerEvents","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 { DragSource } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\nimport classNames from 'classnames';\n\nimport EvaluationIcon from './evaluation-icon';\nimport c from './constants';\n\nexport class PossibleResponse extends React.Component {\n getClassname = () => {\n const {\n classes,\n data: { isCorrect },\n } = this.props;\n let styleProp;\n\n switch (isCorrect) {\n case undefined:\n styleProp = null;\n break;\n case true:\n styleProp = 'baseCorrect';\n break;\n default:\n styleProp = 'baseIncorrect';\n break;\n }\n return styleProp ? classes[styleProp] : '';\n };\n\n render() {\n const { classes, connectDragSource, containerStyle, data } = this.props;\n const additionalClass = this.getClassname();\n const evaluationStyle = {\n fontSize: 14,\n position: 'absolute',\n bottom: '3px',\n right: '3px',\n };\n\n return connectDragSource(\n <div className={`${classes.base} ${additionalClass}`} style={containerStyle}>\n <span\n className={classNames([classes.span, { [classes.hiddenSpan]: data.hidden }])}\n dangerouslySetInnerHTML={{ __html: data.value }}\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};\n\nPossibleResponse.defaultProps = {\n classes: {},\n connectDragSource: () => {},\n containerStyle: {},\n};\n\nconst styles = () => ({\n base: {\n position: 'relative',\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 baseCorrect: {\n border: `2px solid ${color.correct()}`,\n },\n baseIncorrect: {\n border: `2px solid ${color.incorrect()}`,\n },\n span: {\n backgroundColor: color.background(),\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 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"}
1
+ {"version":3,"sources":["../src/possible-response.jsx"],"names":["PossibleResponse","props","classes","isCorrect","data","styleProp","undefined","connectDragSource","containerStyle","additionalClass","getClassname","evaluationStyle","fontSize","position","bottom","right","base","span","hiddenSpan","hidden","value","React","Component","propTypes","canDrag","PropTypes","bool","isRequired","object","func","onDragBegin","onDragEnd","defaultProps","styles","backgroundColor","color","background","border","primary","display","alignItems","justifyContent","minHeight","padding","marginLeft","marginTop","width","baseCorrect","correct","baseIncorrect","incorrect","pointerEvents","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 { DragSource } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\nimport classNames from 'classnames';\nimport { PreviewPrompt } from '@pie-lib/render-ui';\nimport EvaluationIcon from './evaluation-icon';\nimport c from './constants';\n\nexport class PossibleResponse extends React.Component {\n getClassname = () => {\n const {\n classes,\n data: { isCorrect },\n } = this.props;\n let styleProp;\n\n switch (isCorrect) {\n case undefined:\n styleProp = null;\n break;\n case true:\n styleProp = 'baseCorrect';\n break;\n default:\n styleProp = 'baseIncorrect';\n break;\n }\n return styleProp ? classes[styleProp] : '';\n };\n\n render() {\n const { classes, connectDragSource, containerStyle, data } = this.props;\n const additionalClass = this.getClassname();\n const evaluationStyle = {\n fontSize: 14,\n position: 'absolute',\n bottom: '3px',\n right: '3px',\n };\n\n return connectDragSource(\n <div className={`${classes.base} ${additionalClass}`} style={containerStyle}>\n <PreviewPrompt className={classNames([classes.span, { [classes.hiddenSpan]: data.hidden }])} prompt={data.value} tagName=\"span\" />\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};\n\nPossibleResponse.defaultProps = {\n classes: {},\n connectDragSource: () => {},\n containerStyle: {},\n};\n\nconst styles = () => ({\n base: {\n position: 'relative',\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 baseCorrect: {\n border: `2px solid ${color.correct()}`,\n },\n baseIncorrect: {\n border: `2px solid ${color.incorrect()}`,\n },\n span: {\n backgroundColor: color.background(),\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 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"}
@@ -11,26 +11,26 @@ var _react = _interopRequireDefault(require("react"));
11
11
 
12
12
  var _propTypes = _interopRequireDefault(require("prop-types"));
13
13
 
14
- var _drag = require("@pie-lib/drag");
15
-
16
14
  var _core = require("@material-ui/core");
17
15
 
18
16
  var _renderUi = require("@pie-lib/render-ui");
19
17
 
20
- var _possibleResponse = _interopRequireDefault(require("./possible-response"));
18
+ var _drag = require("@pie-lib/drag");
21
19
 
22
- var _constants = _interopRequireDefault(require("./constants"));
20
+ var _possibleResponse = _interopRequireDefault(require("./possible-response"));
23
21
 
24
22
  var PossibleResponses = function PossibleResponses(_ref) {
25
23
  var canDrag = _ref.canDrag,
26
24
  classes = _ref.classes,
27
- connectDropTarget = _ref.connectDropTarget,
28
25
  data = _ref.data,
29
- isOverCurrent = _ref.isOverCurrent,
26
+ onAnswerRemove = _ref.onAnswerRemove,
30
27
  onDragBegin = _ref.onDragBegin,
31
28
  onDragEnd = _ref.onDragEnd;
32
- return connectDropTarget( /*#__PURE__*/_react["default"].createElement("div", {
33
- className: "".concat(classes.base, " ").concat(isOverCurrent ? classes.active : '')
29
+ return /*#__PURE__*/_react["default"].createElement("div", {
30
+ className: classes.base
31
+ }, /*#__PURE__*/_react["default"].createElement(_drag.ICADroppablePlaceholder, {
32
+ disabled: !canDrag,
33
+ onRemoveAnswer: onAnswerRemove
34
34
  }, data.map(function (item) {
35
35
  return /*#__PURE__*/_react["default"].createElement(_possibleResponse["default"], {
36
36
  canDrag: canDrag,
@@ -56,40 +56,14 @@ PossibleResponses.defaultProps = {
56
56
 
57
57
  var styles = function styles(theme) {
58
58
  return {
59
- active: {
60
- border: "1px solid ".concat(_renderUi.color.primary())
61
- },
62
59
  base: {
63
60
  backgroundColor: _renderUi.color.background(),
64
- display: 'flex',
65
- flexWrap: 'wrap',
66
- justifyContent: 'center',
67
61
  padding: theme.spacing.unit * 2
68
62
  }
69
63
  };
70
64
  };
71
65
 
72
- var Styled = (0, _core.withStyles)(styles)(PossibleResponses);
73
- var tileSource = {
74
- hover: function hover(props, monitor) {
75
- monitor.isOver({
76
- shallow: true
77
- });
78
- },
79
- drop: function drop(props, monitor) {
80
- var item = monitor.getItem();
81
- props.onAnswerRemove(item);
82
- }
83
- };
84
-
85
- var _default = (0, _drag.DropTarget)(_constants["default"].types.response, tileSource, function (connect, monitor) {
86
- return {
87
- connectDropTarget: connect.dropTarget(),
88
- isOverCurrent: monitor.isOver({
89
- shallow: true
90
- })
91
- };
92
- })(Styled);
66
+ var _default = (0, _core.withStyles)(styles)(PossibleResponses);
93
67
 
94
68
  exports["default"] = _default;
95
69
  //# sourceMappingURL=possible-responses.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/possible-responses.jsx"],"names":["PossibleResponses","canDrag","classes","connectDropTarget","data","isOverCurrent","onDragBegin","onDragEnd","base","active","map","item","id","propTypes","PropTypes","bool","isRequired","object","array","onAnswerRemove","func","defaultProps","styles","theme","border","color","primary","backgroundColor","background","display","flexWrap","justifyContent","padding","spacing","unit","Styled","tileSource","hover","props","monitor","isOver","shallow","drop","getItem","c","types","response","connect","dropTarget"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DropTarget } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core';\nimport { color } from '@pie-lib/render-ui';\n\nimport PossibleResponse from './possible-response';\nimport c from './constants';\n\nconst PossibleResponses = ({ canDrag, classes, connectDropTarget, data, isOverCurrent, onDragBegin, onDragEnd }) =>\n connectDropTarget(\n <div className={`${classes.base} ${isOverCurrent ? classes.active : ''}`}>\n {data.map((item) => (\n <PossibleResponse canDrag={canDrag} key={item.id} data={item} onDragBegin={onDragBegin} onDragEnd={onDragEnd} />\n ))}\n </div>,\n );\n\nPossibleResponses.propTypes = {\n canDrag: PropTypes.bool.isRequired,\n classes: PropTypes.object,\n data: PropTypes.array.isRequired,\n onAnswerRemove: PropTypes.func.isRequired,\n onDragBegin: PropTypes.func.isRequired,\n onDragEnd: PropTypes.func.isRequired,\n};\n\nPossibleResponses.defaultProps = {\n classes: {},\n};\n\nconst styles = (theme) => ({\n active: {\n border: `1px solid ${color.primary()}`,\n },\n base: {\n backgroundColor: color.background(),\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'center',\n padding: theme.spacing.unit * 2,\n },\n});\n\nconst Styled = withStyles(styles)(PossibleResponses);\n\nconst tileSource = {\n hover(props, monitor) {\n monitor.isOver({ shallow: true });\n },\n drop(props, monitor) {\n const item = monitor.getItem();\n props.onAnswerRemove(item);\n },\n};\n\nexport default DropTarget(c.types.response, tileSource, (connect, monitor) => ({\n connectDropTarget: connect.dropTarget(),\n isOverCurrent: monitor.isOver({ shallow: true }),\n}))(Styled);\n"],"file":"possible-responses.js"}
1
+ {"version":3,"sources":["../src/possible-responses.jsx"],"names":["PossibleResponses","canDrag","classes","data","onAnswerRemove","onDragBegin","onDragEnd","base","map","item","id","propTypes","PropTypes","bool","isRequired","object","array","func","defaultProps","styles","theme","backgroundColor","color","background","padding","spacing","unit"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAEA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,OAAZ,QAAYA,OAAZ;AAAA,MAAqBC,IAArB,QAAqBA,IAArB;AAAA,MAA2BC,cAA3B,QAA2BA,cAA3B;AAAA,MAA2CC,WAA3C,QAA2CA,WAA3C;AAAA,MAAwDC,SAAxD,QAAwDA,SAAxD;AAAA,sBACxB;AAAK,IAAA,SAAS,EAAEJ,OAAO,CAACK;AAAxB,kBACE,gCAAC,6BAAD;AAAyB,IAAA,QAAQ,EAAE,CAACN,OAApC;AAA6C,IAAA,cAAc,EAAEG;AAA7D,KACGD,IAAI,CAACK,GAAL,CAAS,UAACC,IAAD;AAAA,wBACR,gCAAC,4BAAD;AAAkB,MAAA,OAAO,EAAER,OAA3B;AAAoC,MAAA,GAAG,EAAEQ,IAAI,CAACC,EAA9C;AAAkD,MAAA,IAAI,EAAED,IAAxD;AAA8D,MAAA,WAAW,EAAEJ,WAA3E;AAAwF,MAAA,SAAS,EAAEC;AAAnG,MADQ;AAAA,GAAT,CADH,CADF,CADwB;AAAA,CAA1B;;AAUAN,iBAAiB,CAACW,SAAlB,GAA8B;AAC5BV,EAAAA,OAAO,EAAEW,sBAAUC,IAAV,CAAeC,UADI;AAE5BZ,EAAAA,OAAO,EAAEU,sBAAUG,MAFS;AAG5BZ,EAAAA,IAAI,EAAES,sBAAUI,KAAV,CAAgBF,UAHM;AAI5BV,EAAAA,cAAc,EAAEQ,sBAAUK,IAAV,CAAeH,UAJH;AAK5BT,EAAAA,WAAW,EAAEO,sBAAUK,IAAV,CAAeH,UALA;AAM5BR,EAAAA,SAAS,EAAEM,sBAAUK,IAAV,CAAeH;AANE,CAA9B;AASAd,iBAAiB,CAACkB,YAAlB,GAAiC;AAC/BhB,EAAAA,OAAO,EAAE;AADsB,CAAjC;;AAIA,IAAMiB,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBb,IAAAA,IAAI,EAAE;AACJc,MAAAA,eAAe,EAAEC,gBAAMC,UAAN,EADb;AAEJC,MAAAA,OAAO,EAAEJ,KAAK,CAACK,OAAN,CAAcC,IAAd,GAAqB;AAF1B;AADmB,GAAZ;AAAA,CAAf;;eAOe,sBAAWP,MAAX,EAAmBnB,iBAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\nimport { color } from '@pie-lib/render-ui';\nimport { ICADroppablePlaceholder } from '@pie-lib/drag';\n\nimport PossibleResponse from './possible-response';\n\nconst PossibleResponses = ({ canDrag, classes, data, onAnswerRemove, onDragBegin, onDragEnd }) => (\n <div className={classes.base}>\n <ICADroppablePlaceholder disabled={!canDrag} onRemoveAnswer={onAnswerRemove}>\n {data.map((item) => (\n <PossibleResponse canDrag={canDrag} key={item.id} data={item} onDragBegin={onDragBegin} onDragEnd={onDragEnd} />\n ))}\n </ICADroppablePlaceholder>\n </div>\n);\n\nPossibleResponses.propTypes = {\n canDrag: PropTypes.bool.isRequired,\n classes: PropTypes.object,\n data: PropTypes.array.isRequired,\n onAnswerRemove: PropTypes.func.isRequired,\n onDragBegin: PropTypes.func.isRequired,\n onDragEnd: PropTypes.func.isRequired,\n};\n\nPossibleResponses.defaultProps = {\n classes: {},\n};\n\nconst styles = (theme) => ({\n base: {\n backgroundColor: color.background(),\n padding: theme.spacing.unit * 2,\n },\n});\n\nexport default withStyles(styles)(PossibleResponses);\n"],"file":"possible-responses.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pie-element/image-cloze-association",
3
- "version": "4.14.3-next.9+dcee1f0b6",
3
+ "version": "4.14.3",
4
4
  "description": "",
5
5
  "repository": "pie-framework/pie-elements",
6
6
  "publishConfig": {
@@ -10,11 +10,11 @@
10
10
  "@material-ui/core": "^3.9.3",
11
11
  "@material-ui/icons": "^3.0.1",
12
12
  "@pie-framework/pie-player-events": "^0.1.0",
13
- "@pie-lib/correct-answer-toggle": "^2.3.79",
14
- "@pie-lib/drag": "^2.2.2",
13
+ "@pie-lib/correct-answer-toggle": "^2.5.1",
14
+ "@pie-lib/drag": "^2.2.4",
15
15
  "@pie-lib/math-rendering": "^2.5.17",
16
- "@pie-lib/render-ui": "^4.14.29",
17
- "@pie-lib/translator": "^2.1.1",
16
+ "@pie-lib/render-ui": "^4.15.0",
17
+ "@pie-lib/translator": "^2.2.0",
18
18
  "classnames": "^2.2.6",
19
19
  "prop-types": "^15.6.1",
20
20
  "react": "^16.8.1",
@@ -22,7 +22,7 @@
22
22
  },
23
23
  "author": "pie framework developers",
24
24
  "license": "ISC",
25
- "gitHead": "dcee1f0b6df57d63e74fd7b088ad69afa4792ae7",
25
+ "gitHead": "14de4db4499935eaf177fd2958d00f72117e7232",
26
26
  "scripts": {
27
27
  "postpublish": "../../scripts/postpublish"
28
28
  },
@@ -19,7 +19,6 @@ const ImageDropTarget = ({
19
19
  showDashedBorder,
20
20
  // dnd-related props
21
21
  connectDropTarget,
22
- isOverCurrent,
23
22
  }) =>
24
23
  connectDropTarget(
25
24
  <div
@@ -30,15 +29,7 @@ const ImageDropTarget = ({
30
29
  `}
31
30
  style={containerStyle}
32
31
  >
33
- {/* HOVER */}
34
- {isOverCurrent && !duplicateResponses ? (
35
- <div className={classes.dragOverContainer}>
36
- <span dangerouslySetInnerHTML={{ __html: draggingElement.value }} />
37
- </div>
38
- ) : null}
39
-
40
- {/* EXISTING ANSWERS */}
41
- {(!isOverCurrent && answers.length) || (duplicateResponses && answers.length) ? (
32
+ {answers.length || (duplicateResponses && answers.length) ? (
42
33
  <div className={classes.answers}>
43
34
  {answers.map((answer) => (
44
35
  <PossibleResponse
@@ -108,5 +99,6 @@ const tileSource = {
108
99
 
109
100
  export default DropTarget(c.types.response, tileSource, (connect, monitor) => ({
110
101
  connectDropTarget: connect.dropTarget(),
111
- isOverCurrent: monitor.isOver({ shallow: true }),
102
+ isOver: monitor.isOver(),
103
+ dragItem: monitor.getItem(),
112
104
  }))(Styled);
@@ -4,7 +4,7 @@ import { DragSource } from '@pie-lib/drag';
4
4
  import { withStyles } from '@material-ui/core/styles';
5
5
  import { color } from '@pie-lib/render-ui';
6
6
  import classNames from 'classnames';
7
-
7
+ import { PreviewPrompt } from '@pie-lib/render-ui';
8
8
  import EvaluationIcon from './evaluation-icon';
9
9
  import c from './constants';
10
10
 
@@ -42,10 +42,7 @@ export class PossibleResponse extends React.Component {
42
42
 
43
43
  return connectDragSource(
44
44
  <div className={`${classes.base} ${additionalClass}`} style={containerStyle}>
45
- <span
46
- className={classNames([classes.span, { [classes.hiddenSpan]: data.hidden }])}
47
- dangerouslySetInnerHTML={{ __html: data.value }}
48
- />
45
+ <PreviewPrompt className={classNames([classes.span, { [classes.hiddenSpan]: data.hidden }])} prompt={data.value} tagName="span" />
49
46
  <EvaluationIcon isCorrect={data.isCorrect} containerStyle={evaluationStyle} />
50
47
  </div>,
51
48
  );
@@ -1,20 +1,20 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
- import { DropTarget } from '@pie-lib/drag';
4
3
  import { withStyles } from '@material-ui/core';
5
4
  import { color } from '@pie-lib/render-ui';
5
+ import { ICADroppablePlaceholder } from '@pie-lib/drag';
6
6
 
7
7
  import PossibleResponse from './possible-response';
8
- import c from './constants';
9
8
 
10
- const PossibleResponses = ({ canDrag, classes, connectDropTarget, data, isOverCurrent, onDragBegin, onDragEnd }) =>
11
- connectDropTarget(
12
- <div className={`${classes.base} ${isOverCurrent ? classes.active : ''}`}>
9
+ const PossibleResponses = ({ canDrag, classes, data, onAnswerRemove, onDragBegin, onDragEnd }) => (
10
+ <div className={classes.base}>
11
+ <ICADroppablePlaceholder disabled={!canDrag} onRemoveAnswer={onAnswerRemove}>
13
12
  {data.map((item) => (
14
13
  <PossibleResponse canDrag={canDrag} key={item.id} data={item} onDragBegin={onDragBegin} onDragEnd={onDragEnd} />
15
14
  ))}
16
- </div>,
17
- );
15
+ </ICADroppablePlaceholder>
16
+ </div>
17
+ );
18
18
 
19
19
  PossibleResponses.propTypes = {
20
20
  canDrag: PropTypes.bool.isRequired,
@@ -30,31 +30,10 @@ PossibleResponses.defaultProps = {
30
30
  };
31
31
 
32
32
  const styles = (theme) => ({
33
- active: {
34
- border: `1px solid ${color.primary()}`,
35
- },
36
33
  base: {
37
34
  backgroundColor: color.background(),
38
- display: 'flex',
39
- flexWrap: 'wrap',
40
- justifyContent: 'center',
41
35
  padding: theme.spacing.unit * 2,
42
36
  },
43
37
  });
44
38
 
45
- const Styled = withStyles(styles)(PossibleResponses);
46
-
47
- const tileSource = {
48
- hover(props, monitor) {
49
- monitor.isOver({ shallow: true });
50
- },
51
- drop(props, monitor) {
52
- const item = monitor.getItem();
53
- props.onAnswerRemove(item);
54
- },
55
- };
56
-
57
- export default DropTarget(c.types.response, tileSource, (connect, monitor) => ({
58
- connectDropTarget: connect.dropTarget(),
59
- isOverCurrent: monitor.isOver({ shallow: true }),
60
- }))(Styled);
39
+ export default withStyles(styles)(PossibleResponses);