@pie-element/image-cloze-association 5.22.2-next.1 → 5.22.2-next.12
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/configure/package.json +1 -1
- package/controller/package.json +1 -1
- package/lib/image-drop-target.js +105 -39
- package/lib/image-drop-target.js.map +1 -1
- package/lib/possible-response.js +0 -3
- package/lib/possible-response.js.map +1 -1
- package/package.json +3 -3
- package/src/image-drop-target.jsx +71 -44
- package/src/possible-response.jsx +0 -3
package/configure/package.json
CHANGED
package/controller/package.json
CHANGED
package/lib/image-drop-target.js
CHANGED
|
@@ -7,6 +7,18 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports["default"] = void 0;
|
|
9
9
|
|
|
10
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
11
|
+
|
|
12
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
13
|
+
|
|
14
|
+
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
15
|
+
|
|
16
|
+
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
17
|
+
|
|
18
|
+
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
19
|
+
|
|
20
|
+
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
21
|
+
|
|
10
22
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
23
|
|
|
12
24
|
var _react = _interopRequireDefault(require("react"));
|
|
@@ -29,45 +41,97 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
29
41
|
|
|
30
42
|
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; }
|
|
31
43
|
|
|
32
|
-
var
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
return connectDropTarget( /*#__PURE__*/_react["default"].createElement("div", {
|
|
54
|
-
className: containerClasses,
|
|
55
|
-
style: updatedContainerStyle
|
|
56
|
-
}, answers.length || duplicateResponses && answers.length ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
57
|
-
className: classes.answers
|
|
58
|
-
}, (answers || []).map(function (answer) {
|
|
59
|
-
return /*#__PURE__*/_react["default"].createElement(_possibleResponse["default"], {
|
|
60
|
-
canDrag: canDrag,
|
|
61
|
-
key: answer.id,
|
|
62
|
-
data: answer,
|
|
63
|
-
onDragBegin: function onDragBegin() {
|
|
64
|
-
return onDragAnswerBegin(answer);
|
|
65
|
-
},
|
|
66
|
-
onDragEnd: onDragAnswerEnd,
|
|
67
|
-
answerChoiceTransparency: answerChoiceTransparency
|
|
44
|
+
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
|
|
45
|
+
|
|
46
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
47
|
+
|
|
48
|
+
var ImageDropTarget = /*#__PURE__*/function (_React$Component) {
|
|
49
|
+
(0, _inherits2["default"])(ImageDropTarget, _React$Component);
|
|
50
|
+
|
|
51
|
+
var _super = _createSuper(ImageDropTarget);
|
|
52
|
+
|
|
53
|
+
function ImageDropTarget() {
|
|
54
|
+
var _this;
|
|
55
|
+
|
|
56
|
+
(0, _classCallCheck2["default"])(this, ImageDropTarget);
|
|
57
|
+
|
|
58
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
59
|
+
args[_key] = arguments[_key];
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
63
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
|
|
64
|
+
shouldHaveSmallPadding: false
|
|
68
65
|
});
|
|
69
|
-
|
|
70
|
-
}
|
|
66
|
+
return _this;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
(0, _createClass2["default"])(ImageDropTarget, [{
|
|
70
|
+
key: "render",
|
|
71
|
+
value: function render() {
|
|
72
|
+
var _cx,
|
|
73
|
+
_this2 = this;
|
|
74
|
+
|
|
75
|
+
var _this$props = this.props,
|
|
76
|
+
answers = _this$props.answers,
|
|
77
|
+
canDrag = _this$props.canDrag,
|
|
78
|
+
classes = _this$props.classes,
|
|
79
|
+
containerStyle = _this$props.containerStyle,
|
|
80
|
+
draggingElement = _this$props.draggingElement,
|
|
81
|
+
duplicateResponses = _this$props.duplicateResponses,
|
|
82
|
+
onDragAnswerBegin = _this$props.onDragAnswerBegin,
|
|
83
|
+
onDragAnswerEnd = _this$props.onDragAnswerEnd,
|
|
84
|
+
showDashedBorder = _this$props.showDashedBorder,
|
|
85
|
+
responseAreaFill = _this$props.responseAreaFill,
|
|
86
|
+
connectDropTarget = _this$props.connectDropTarget,
|
|
87
|
+
answerChoiceTransparency = _this$props.answerChoiceTransparency;
|
|
88
|
+
var shouldHaveSmallPadding = this.state.shouldHaveSmallPadding;
|
|
89
|
+
var containerClasses = (0, _classnames["default"])(classes.responseContainer, (_cx = {}, (0, _defineProperty2["default"])(_cx, classes.responseContainerDashed, showDashedBorder && !draggingElement.id), (0, _defineProperty2["default"])(_cx, classes.responseContainerActive, draggingElement.id), _cx));
|
|
90
|
+
|
|
91
|
+
var updatedContainerStyle = _objectSpread(_objectSpread({}, containerStyle), responseAreaFill ? {
|
|
92
|
+
backgroundColor: responseAreaFill
|
|
93
|
+
} : {});
|
|
94
|
+
|
|
95
|
+
return connectDropTarget( /*#__PURE__*/_react["default"].createElement("div", {
|
|
96
|
+
className: containerClasses,
|
|
97
|
+
style: updatedContainerStyle,
|
|
98
|
+
ref: function ref(_ref2) {
|
|
99
|
+
_this2.dropContainerHeight = _ref2 === null || _ref2 === void 0 ? void 0 : _ref2.getBoundingClientRect().height; // If answers area is higher than the initial established response zone,
|
|
100
|
+
// then make sure to use a smaller padding.
|
|
101
|
+
// Only reset the state if needed to prevent maximum callstack exceeded
|
|
102
|
+
|
|
103
|
+
if (_this2.dropContainerHeight < _this2.dropContainerResponsesHeight && !shouldHaveSmallPadding) {
|
|
104
|
+
_this2.setState({
|
|
105
|
+
shouldHaveSmallPadding: true
|
|
106
|
+
});
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
}, answers.length || duplicateResponses && answers.length ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
110
|
+
className: classes.answers,
|
|
111
|
+
ref: function ref(_ref) {
|
|
112
|
+
_this2.dropContainerResponsesHeight = _ref === null || _ref === void 0 ? void 0 : _ref.getBoundingClientRect().height;
|
|
113
|
+
}
|
|
114
|
+
}, (answers || []).map(function (answer) {
|
|
115
|
+
return /*#__PURE__*/_react["default"].createElement(_possibleResponse["default"], {
|
|
116
|
+
canDrag: canDrag,
|
|
117
|
+
key: answer.id,
|
|
118
|
+
data: answer,
|
|
119
|
+
onDragBegin: function onDragBegin() {
|
|
120
|
+
return onDragAnswerBegin(answer);
|
|
121
|
+
},
|
|
122
|
+
onDragEnd: onDragAnswerEnd,
|
|
123
|
+
answerChoiceTransparency: answerChoiceTransparency,
|
|
124
|
+
containerStyle: shouldHaveSmallPadding ? {
|
|
125
|
+
padding: '2px'
|
|
126
|
+
} : {
|
|
127
|
+
padding: '6px 10px'
|
|
128
|
+
}
|
|
129
|
+
});
|
|
130
|
+
})) : null));
|
|
131
|
+
}
|
|
132
|
+
}]);
|
|
133
|
+
return ImageDropTarget;
|
|
134
|
+
}(_react["default"].Component);
|
|
71
135
|
|
|
72
136
|
ImageDropTarget.propTypes = {
|
|
73
137
|
answer: _propTypes["default"].object,
|
|
@@ -99,7 +163,9 @@ var styles = function styles() {
|
|
|
99
163
|
width: 'fit-content'
|
|
100
164
|
},
|
|
101
165
|
responseContainer: {
|
|
102
|
-
|
|
166
|
+
padding: '10px',
|
|
167
|
+
position: 'absolute',
|
|
168
|
+
boxSizing: 'border-box'
|
|
103
169
|
},
|
|
104
170
|
responseContainerActive: {
|
|
105
171
|
border: "2px solid ".concat(_renderUi.color.text()),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/image-drop-target.jsx"],"names":["ImageDropTarget","answers","canDrag","classes","containerStyle","draggingElement","duplicateResponses","onDragAnswerBegin","onDragAnswerEnd","showDashedBorder","responseAreaFill","connectDropTarget","answerChoiceTransparency","containerClasses","responseContainer","responseContainerDashed","id","responseContainerActive","updatedContainerStyle","backgroundColor","length","map","answer","propTypes","PropTypes","object","bool","isRequired","func","onDrop","string","defaultProps","styles","display","flexWrap","dragOverContainer","color","background","pointerEvents","width","position","border","text","Styled","tileSource","hover","
|
|
1
|
+
{"version":3,"sources":["../src/image-drop-target.jsx"],"names":["ImageDropTarget","shouldHaveSmallPadding","props","answers","canDrag","classes","containerStyle","draggingElement","duplicateResponses","onDragAnswerBegin","onDragAnswerEnd","showDashedBorder","responseAreaFill","connectDropTarget","answerChoiceTransparency","state","containerClasses","responseContainer","responseContainerDashed","id","responseContainerActive","updatedContainerStyle","backgroundColor","ref","dropContainerHeight","getBoundingClientRect","height","dropContainerResponsesHeight","setState","length","map","answer","padding","React","Component","propTypes","PropTypes","object","bool","isRequired","func","onDrop","string","defaultProps","styles","display","flexWrap","dragOverContainer","color","background","pointerEvents","width","position","boxSizing","border","text","Styled","tileSource","hover","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/pie-toolbox/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\nimport cx from 'classnames';\n\nimport PossibleResponse from './possible-response';\nimport c from './constants';\n\nclass ImageDropTarget extends React.Component {\n state = {\n shouldHaveSmallPadding: false\n };\n\n render() {\n const {\n answers,\n canDrag,\n classes,\n containerStyle,\n draggingElement,\n duplicateResponses,\n onDragAnswerBegin,\n onDragAnswerEnd,\n showDashedBorder,\n responseAreaFill,\n // dnd-related props\n connectDropTarget,\n answerChoiceTransparency\n } = this.props;\n const { shouldHaveSmallPadding } = this.state;\n\n const containerClasses = cx(classes.responseContainer, {\n [classes.responseContainerDashed]: showDashedBorder && !draggingElement.id,\n [classes.responseContainerActive]: draggingElement.id,\n });\n\n const updatedContainerStyle = {\n ...containerStyle,\n ...(responseAreaFill ? { backgroundColor: responseAreaFill } : {})\n };\n\n return connectDropTarget(\n <div\n className={containerClasses}\n style={updatedContainerStyle}\n ref={ref => {\n this.dropContainerHeight = ref?.getBoundingClientRect().height;\n\n // If answers area is higher than the initial established response zone,\n // then make sure to use a smaller padding.\n // Only reset the state if needed to prevent maximum callstack exceeded\n if (this.dropContainerHeight < this.dropContainerResponsesHeight && !shouldHaveSmallPadding) {\n this.setState({ shouldHaveSmallPadding: true });\n }\n }}\n >\n {answers.length || (duplicateResponses && answers.length) ? (\n <div\n className={classes.answers}\n ref={ref => {\n this.dropContainerResponsesHeight = ref?.getBoundingClientRect().height;\n }}\n >\n {(answers || []).map((answer) => (\n <PossibleResponse\n canDrag={canDrag}\n key={answer.id}\n data={answer}\n onDragBegin={() => onDragAnswerBegin(answer)}\n onDragEnd={onDragAnswerEnd}\n answerChoiceTransparency={answerChoiceTransparency}\n containerStyle={shouldHaveSmallPadding ? { padding: '2px'} : { padding: '6px 10px' }}\n />\n ))}\n </div>\n ) : null}\n </div>,\n );\n }\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 responseAreaFill: PropTypes.string,\n answerChoiceTransparency: 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 padding: '10px',\n position: 'absolute',\n boxSizing: 'border-box'\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"}
|
package/lib/possible-response.js
CHANGED
|
@@ -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","value","React","Component","propTypes","canDrag","PropTypes","bool","isRequired","object","func","onDragBegin","onDragEnd","defaultProps","styles","backgroundColor","color","white","border","borderDark","display","alignItems","justifyContent","minHeight","
|
|
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","value","React","Component","propTypes","canDrag","PropTypes","bool","isRequired","object","func","onDragBegin","onDragEnd","defaultProps","styles","backgroundColor","color","white","border","borderDark","display","alignItems","justifyContent","minHeight","width","transparent","baseCorrect","correct","baseIncorrect","incorrect","background","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/pie-toolbox/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\nimport classNames from 'classnames';\nimport { PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\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 let correctnessClass;\n\n switch (isCorrect) {\n case true:\n correctnessClass = 'baseCorrect';\n break;\n case false:\n correctnessClass = 'baseIncorrect';\n break;\n default:\n break;\n }\n\n return connectDragSource(\n <div className={\n classNames([\n classes.base,\n {\n [classes.answerChoiceTransparency]: answerChoiceTransparency,\n [classes[correctnessClass]]: !!correctnessClass,\n }\n ])}\n style={containerStyle}\n >\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 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 },\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 // 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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-element/image-cloze-association",
|
|
3
|
-
"version": "5.22.2-next.
|
|
3
|
+
"version": "5.22.2-next.12+6343d1b00",
|
|
4
4
|
"description": "",
|
|
5
5
|
"repository": "pie-framework/pie-elements",
|
|
6
6
|
"publishConfig": {
|
|
@@ -10,7 +10,7 @@
|
|
|
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/pie-toolbox": "1.
|
|
13
|
+
"@pie-lib/pie-toolbox": "1.29.0",
|
|
14
14
|
"classnames": "^2.2.6",
|
|
15
15
|
"humps": "^2.0.1",
|
|
16
16
|
"prop-types": "^15.6.1",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
},
|
|
20
20
|
"author": "pie framework developers",
|
|
21
21
|
"license": "ISC",
|
|
22
|
-
"gitHead": "
|
|
22
|
+
"gitHead": "6343d1b00c5a4a3d88de70ed13a8aa5c1a43002d",
|
|
23
23
|
"scripts": {
|
|
24
24
|
"postpublish": "../../scripts/postpublish"
|
|
25
25
|
},
|
|
@@ -8,52 +8,77 @@ import cx from 'classnames';
|
|
|
8
8
|
import PossibleResponse from './possible-response';
|
|
9
9
|
import c from './constants';
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
classes,
|
|
15
|
-
containerStyle,
|
|
16
|
-
draggingElement,
|
|
17
|
-
duplicateResponses,
|
|
18
|
-
onDragAnswerBegin,
|
|
19
|
-
onDragAnswerEnd,
|
|
20
|
-
showDashedBorder,
|
|
21
|
-
responseAreaFill,
|
|
22
|
-
// dnd-related props
|
|
23
|
-
connectDropTarget,
|
|
24
|
-
answerChoiceTransparency
|
|
25
|
-
}) => {
|
|
26
|
-
const containerClasses = cx(classes.responseContainer, {
|
|
27
|
-
[classes.responseContainerDashed]: showDashedBorder && !draggingElement.id,
|
|
28
|
-
[classes.responseContainerActive]: draggingElement.id,
|
|
29
|
-
});
|
|
30
|
-
|
|
31
|
-
const updatedContainerStyle = {
|
|
32
|
-
...containerStyle,
|
|
33
|
-
...(responseAreaFill ? { backgroundColor: responseAreaFill } : {})
|
|
11
|
+
class ImageDropTarget extends React.Component {
|
|
12
|
+
state = {
|
|
13
|
+
shouldHaveSmallPadding: false
|
|
34
14
|
};
|
|
35
15
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
16
|
+
render() {
|
|
17
|
+
const {
|
|
18
|
+
answers,
|
|
19
|
+
canDrag,
|
|
20
|
+
classes,
|
|
21
|
+
containerStyle,
|
|
22
|
+
draggingElement,
|
|
23
|
+
duplicateResponses,
|
|
24
|
+
onDragAnswerBegin,
|
|
25
|
+
onDragAnswerEnd,
|
|
26
|
+
showDashedBorder,
|
|
27
|
+
responseAreaFill,
|
|
28
|
+
// dnd-related props
|
|
29
|
+
connectDropTarget,
|
|
30
|
+
answerChoiceTransparency
|
|
31
|
+
} = this.props;
|
|
32
|
+
const { shouldHaveSmallPadding } = this.state;
|
|
33
|
+
|
|
34
|
+
const containerClasses = cx(classes.responseContainer, {
|
|
35
|
+
[classes.responseContainerDashed]: showDashedBorder && !draggingElement.id,
|
|
36
|
+
[classes.responseContainerActive]: draggingElement.id,
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
const updatedContainerStyle = {
|
|
40
|
+
...containerStyle,
|
|
41
|
+
...(responseAreaFill ? { backgroundColor: responseAreaFill } : {})
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
return connectDropTarget(
|
|
45
|
+
<div
|
|
46
|
+
className={containerClasses}
|
|
47
|
+
style={updatedContainerStyle}
|
|
48
|
+
ref={ref => {
|
|
49
|
+
this.dropContainerHeight = ref?.getBoundingClientRect().height;
|
|
50
|
+
|
|
51
|
+
// If answers area is higher than the initial established response zone,
|
|
52
|
+
// then make sure to use a smaller padding.
|
|
53
|
+
// Only reset the state if needed to prevent maximum callstack exceeded
|
|
54
|
+
if (this.dropContainerHeight < this.dropContainerResponsesHeight && !shouldHaveSmallPadding) {
|
|
55
|
+
this.setState({ shouldHaveSmallPadding: true });
|
|
56
|
+
}
|
|
57
|
+
}}
|
|
58
|
+
>
|
|
59
|
+
{answers.length || (duplicateResponses && answers.length) ? (
|
|
60
|
+
<div
|
|
61
|
+
className={classes.answers}
|
|
62
|
+
ref={ref => {
|
|
63
|
+
this.dropContainerResponsesHeight = ref?.getBoundingClientRect().height;
|
|
64
|
+
}}
|
|
65
|
+
>
|
|
66
|
+
{(answers || []).map((answer) => (
|
|
67
|
+
<PossibleResponse
|
|
68
|
+
canDrag={canDrag}
|
|
69
|
+
key={answer.id}
|
|
70
|
+
data={answer}
|
|
71
|
+
onDragBegin={() => onDragAnswerBegin(answer)}
|
|
72
|
+
onDragEnd={onDragAnswerEnd}
|
|
73
|
+
answerChoiceTransparency={answerChoiceTransparency}
|
|
74
|
+
containerStyle={shouldHaveSmallPadding ? { padding: '2px'} : { padding: '6px 10px' }}
|
|
75
|
+
/>
|
|
76
|
+
))}
|
|
77
|
+
</div>
|
|
78
|
+
) : null}
|
|
79
|
+
</div>,
|
|
80
|
+
);
|
|
81
|
+
}
|
|
57
82
|
}
|
|
58
83
|
|
|
59
84
|
ImageDropTarget.propTypes = {
|
|
@@ -86,7 +111,9 @@ const styles = () => ({
|
|
|
86
111
|
width: 'fit-content',
|
|
87
112
|
},
|
|
88
113
|
responseContainer: {
|
|
114
|
+
padding: '10px',
|
|
89
115
|
position: 'absolute',
|
|
116
|
+
boxSizing: 'border-box'
|
|
90
117
|
},
|
|
91
118
|
responseContainerActive: {
|
|
92
119
|
border: `2px solid ${color.text()}`,
|