@pie-element/image-cloze-association 6.5.2-next.7 → 6.6.0
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 +17 -0
- package/configure/CHANGELOG.md +11 -0
- package/configure/package.json +2 -2
- package/controller/CHANGELOG.md +11 -0
- package/controller/package.json +2 -2
- package/lib/image-drop-target.js +3 -2
- package/lib/image-drop-target.js.map +1 -1
- package/package.json +3 -3
- package/src/__tests__/__snapshots__/index.test.js.snap +163 -0
- package/src/__tests__/index.test.js +82 -0
- package/src/image-drop-target.jsx +4 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,23 @@
|
|
|
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
|
+
# [6.6.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@6.5.1...@pie-element/image-cloze-association@6.6.0) (2025-01-06)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* update pie-lib/pie-toolbox PD-4555, PD-4660, PD-4426, PD-4607, PD-4394, PD-4521 ([e4928b4](https://github.com/pie-framework/pie-elements/commit/e4928b4f9ac268a892b382045f76ae4eac6b458e))
|
|
12
|
+
* **image-cloze-association:** fix drag color when responseAreaFill exists PD-4554 ([2a788ba](https://github.com/pie-framework/pie-elements/commit/2a788bac0e7a683ff5fdc529beeb85cadb7cc301))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Features
|
|
16
|
+
|
|
17
|
+
* add tests for session changed operation PD-4665 ([0a2d562](https://github.com/pie-framework/pie-elements/commit/0a2d562da49116a15baa47d0cbf7942eaddbf065))
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
6
23
|
## [6.5.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@6.5.0...@pie-element/image-cloze-association@6.5.1) (2024-12-20)
|
|
7
24
|
|
|
8
25
|
|
package/configure/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
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
|
+
## [6.1.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@6.1.6...@pie-element/image-cloze-association-configure@6.1.7) (2025-01-06)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* update pie-lib/pie-toolbox PD-4555, PD-4660, PD-4426, PD-4607, PD-4394, PD-4521 ([e4928b4](https://github.com/pie-framework/pie-elements/commit/e4928b4f9ac268a892b382045f76ae4eac6b458e))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [6.1.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@6.1.5...@pie-element/image-cloze-association-configure@6.1.6) (2024-12-20)
|
|
7
18
|
|
|
8
19
|
|
package/configure/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-element/image-cloze-association-configure",
|
|
3
3
|
"private": true,
|
|
4
|
-
"version": "6.1.
|
|
4
|
+
"version": "6.1.7",
|
|
5
5
|
"description": "",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "src/index.js",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"dependencies": {
|
|
10
10
|
"@material-ui/core": "^3.9.2",
|
|
11
11
|
"@pie-framework/pie-configure-events": "^1.3.0",
|
|
12
|
-
"@pie-lib/pie-toolbox": "2.
|
|
12
|
+
"@pie-lib/pie-toolbox": "2.6.0",
|
|
13
13
|
"debug": "^3.1.0",
|
|
14
14
|
"prop-types": "^15.7.2",
|
|
15
15
|
"react": "^16.8.6",
|
package/controller/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
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
|
+
## [5.0.14](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@5.0.13...@pie-element/image-cloze-association-controller@5.0.14) (2025-01-06)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* update pie-lib/pie-toolbox PD-4555, PD-4660, PD-4426, PD-4607, PD-4394, PD-4521 ([e4928b4](https://github.com/pie-framework/pie-elements/commit/e4928b4f9ac268a892b382045f76ae4eac6b458e))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [5.0.13](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@5.0.12...@pie-element/image-cloze-association-controller@5.0.13) (2024-12-20)
|
|
7
18
|
|
|
8
19
|
|
package/controller/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-element/image-cloze-association-controller",
|
|
3
3
|
"private": true,
|
|
4
|
-
"version": "5.0.
|
|
4
|
+
"version": "5.0.14",
|
|
5
5
|
"description": "",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"main": "lib/index.js",
|
|
12
12
|
"module": "src/index.js",
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"@pie-lib/pie-toolbox": "2.
|
|
14
|
+
"@pie-lib/pie-toolbox": "2.6.0",
|
|
15
15
|
"debug": "^4.1.1",
|
|
16
16
|
"humps": "^2.0.1",
|
|
17
17
|
"lodash": "^4.17.15"
|
package/lib/image-drop-target.js
CHANGED
|
@@ -89,11 +89,12 @@ var ImageDropTarget = /*#__PURE__*/function (_React$Component) {
|
|
|
89
89
|
maxResponsePerZone = _this$props.maxResponsePerZone,
|
|
90
90
|
isOver = _this$props.isOver;
|
|
91
91
|
var shouldHaveSmallPadding = this.state.shouldHaveSmallPadding;
|
|
92
|
-
var
|
|
92
|
+
var isDraggingElement = !!draggingElement.id;
|
|
93
|
+
var containerClasses = (0, _classnames["default"])(classes.responseContainer, isOver && classes.isOver, (_cx = {}, (0, _defineProperty2["default"])(_cx, classes.responseContainerDashed, showDashedBorder && !isDraggingElement), (0, _defineProperty2["default"])(_cx, classes.responseContainerActive, isDraggingElement), _cx));
|
|
93
94
|
|
|
94
95
|
var updatedContainerStyle = _objectSpread(_objectSpread({
|
|
95
96
|
padding: maxResponsePerZone === 1 ? '0' : responseContainerPadding
|
|
96
|
-
}, containerStyle), responseAreaFill && {
|
|
97
|
+
}, containerStyle), responseAreaFill && !isDraggingElement && {
|
|
97
98
|
backgroundColor: responseAreaFill
|
|
98
99
|
});
|
|
99
100
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/image-drop-target.jsx"],"names":["ImageDropTarget","shouldHaveSmallPadding","props","answers","canDrag","classes","containerStyle","draggingElement","onDragAnswerBegin","onDragAnswerEnd","showDashedBorder","responseAreaFill","responseContainerPadding","imageDropTargetPadding","connectDropTarget","answerChoiceTransparency","maxResponsePerZone","isOver","state","containerClasses","responseContainer","responseContainerDashed","id","responseContainerActive","updatedContainerStyle","padding","backgroundColor","ref","dropContainerHeight","getBoundingClientRect","height","dropContainerResponsesHeight","setState","length","map","answer","React","Component","propTypes","PropTypes","object","array","bool","isRequired","func","onDrop","string","number","defaultProps","styles","display","flexWrap","dragOverContainer","color","background","pointerEvents","width","position","boxSizing","border","text","Styled","tileSource","hover","monitor","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 onDragAnswerBegin,\n onDragAnswerEnd,\n showDashedBorder,\n responseAreaFill,\n responseContainerPadding,\n imageDropTargetPadding,\n // dnd-related props\n connectDropTarget,\n answerChoiceTransparency,\n maxResponsePerZone,\n isOver,\n } = this.props;\n const { shouldHaveSmallPadding } = this.state;\n\n const containerClasses = cx(classes.responseContainer, isOver && classes.isOver, {\n [classes.responseContainerDashed]: showDashedBorder && !draggingElement.id,\n [classes.responseContainerActive]: !!draggingElement.id,\n });\n\n const updatedContainerStyle = {\n padding: maxResponsePerZone === 1 ? '0' : responseContainerPadding,\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 ? (\n <div\n className={classes.answers}\n ref={ref => {\n this.dropContainerResponsesHeight = ref?.getBoundingClientRect().height;\n }}\n >\n {answers.map((answer) => (\n <PossibleResponse\n key={answer.id}\n data={answer}\n canDrag={canDrag}\n onDragBegin={() => onDragAnswerBegin(answer)}\n onDragEnd={onDragAnswerEnd}\n answerChoiceTransparency={answerChoiceTransparency}\n containerStyle={{\n padding: imageDropTargetPadding\n ? imageDropTargetPadding\n : shouldHaveSmallPadding\n ? '2px'\n : '6px 10px',\n }}\n />\n ))}\n </div>\n ) : null}\n </div>,\n );\n }\n}\n\nImageDropTarget.propTypes = {\n answer: PropTypes.object,\n answers: PropTypes.array,\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 connectDropTarget: PropTypes.func.isRequired,\n showDashedBorder: PropTypes.bool,\n responseAreaFill: PropTypes.string,\n answerChoiceTransparency: PropTypes.bool,\n isOver: PropTypes.bool,\n responseContainerPadding: PropTypes.string,\n imageDropTargetPadding: PropTypes.string,\n maxResponsePerZone: PropTypes.number,\n};\n\nImageDropTarget.defaultProps = {\n answer: {},\n classes: {},\n responseContainerPadding: '10px',\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 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 isOver: {\n border: '1px solid rgb(158, 158, 158)',\n backgroundColor: 'rgb(224, 224, 224)',\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"}
|
|
1
|
+
{"version":3,"sources":["../src/image-drop-target.jsx"],"names":["ImageDropTarget","shouldHaveSmallPadding","props","answers","canDrag","classes","containerStyle","draggingElement","onDragAnswerBegin","onDragAnswerEnd","showDashedBorder","responseAreaFill","responseContainerPadding","imageDropTargetPadding","connectDropTarget","answerChoiceTransparency","maxResponsePerZone","isOver","state","isDraggingElement","id","containerClasses","responseContainer","responseContainerDashed","responseContainerActive","updatedContainerStyle","padding","backgroundColor","ref","dropContainerHeight","getBoundingClientRect","height","dropContainerResponsesHeight","setState","length","map","answer","React","Component","propTypes","PropTypes","object","array","bool","isRequired","func","onDrop","string","number","defaultProps","styles","display","flexWrap","dragOverContainer","color","background","pointerEvents","width","position","boxSizing","border","text","Styled","tileSource","hover","monitor","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 onDragAnswerBegin,\n onDragAnswerEnd,\n showDashedBorder,\n responseAreaFill,\n responseContainerPadding,\n imageDropTargetPadding,\n // dnd-related props\n connectDropTarget,\n answerChoiceTransparency,\n maxResponsePerZone,\n isOver,\n } = this.props;\n const { shouldHaveSmallPadding } = this.state;\n const isDraggingElement = !!draggingElement.id;\n\n const containerClasses = cx(classes.responseContainer, isOver && classes.isOver, {\n [classes.responseContainerDashed]: showDashedBorder && !isDraggingElement,\n [classes.responseContainerActive]: isDraggingElement,\n });\n\n const updatedContainerStyle = {\n padding: maxResponsePerZone === 1 ? '0' : responseContainerPadding,\n ...containerStyle,\n ...(responseAreaFill && !isDraggingElement && { 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 ? (\n <div\n className={classes.answers}\n ref={ref => {\n this.dropContainerResponsesHeight = ref?.getBoundingClientRect().height;\n }}\n >\n {answers.map((answer) => (\n <PossibleResponse\n key={answer.id}\n data={answer}\n canDrag={canDrag}\n onDragBegin={() => onDragAnswerBegin(answer)}\n onDragEnd={onDragAnswerEnd}\n answerChoiceTransparency={answerChoiceTransparency}\n containerStyle={{\n padding: imageDropTargetPadding\n ? imageDropTargetPadding\n : shouldHaveSmallPadding\n ? '2px'\n : '6px 10px',\n }}\n />\n ))}\n </div>\n ) : null}\n </div>,\n );\n }\n}\n\nImageDropTarget.propTypes = {\n answer: PropTypes.object,\n answers: PropTypes.array,\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 connectDropTarget: PropTypes.func.isRequired,\n showDashedBorder: PropTypes.bool,\n responseAreaFill: PropTypes.string,\n answerChoiceTransparency: PropTypes.bool,\n isOver: PropTypes.bool,\n responseContainerPadding: PropTypes.string,\n imageDropTargetPadding: PropTypes.string,\n maxResponsePerZone: PropTypes.number,\n};\n\nImageDropTarget.defaultProps = {\n answer: {},\n classes: {},\n responseContainerPadding: '10px',\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 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 isOver: {\n border: '1px solid rgb(158, 158, 158)',\n backgroundColor: 'rgb(224, 224, 224)',\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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-element/image-cloze-association",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.6.0",
|
|
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": "2.
|
|
13
|
+
"@pie-lib/pie-toolbox": "2.6.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": "67c7ce92d1e5e2e3bba47606b7004e094caba59e",
|
|
23
23
|
"scripts": {
|
|
24
24
|
"postpublish": "../../scripts/postpublish"
|
|
25
25
|
},
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`image-cloze-association renders snapshot 1`] = `
|
|
4
|
+
<WithStyles(UiLayout)>
|
|
5
|
+
<WithStyles(PreviewPrompt)
|
|
6
|
+
className="prompt"
|
|
7
|
+
/>
|
|
8
|
+
<WithStyles(PreviewPrompt) />
|
|
9
|
+
<WithStyles(CorrectAnswerToggle)
|
|
10
|
+
onToggle={[Function]}
|
|
11
|
+
show={false}
|
|
12
|
+
toggled={false}
|
|
13
|
+
/>
|
|
14
|
+
<WithStyles(InteractiveSection)
|
|
15
|
+
uiStyle={Object {}}
|
|
16
|
+
>
|
|
17
|
+
<WithStyles(ImageContainer)
|
|
18
|
+
answers={Array []}
|
|
19
|
+
canDrag={true}
|
|
20
|
+
draggingElement={
|
|
21
|
+
Object {
|
|
22
|
+
"id": "",
|
|
23
|
+
"value": "",
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
maxResponsePerZone={1}
|
|
27
|
+
onAnswerSelect={[Function]}
|
|
28
|
+
onDragAnswerBegin={[Function]}
|
|
29
|
+
onDragAnswerEnd={[Function]}
|
|
30
|
+
responseContainers={Array []}
|
|
31
|
+
/>
|
|
32
|
+
<WithStyles(PossibleResponses)
|
|
33
|
+
canDrag={true}
|
|
34
|
+
customStyle={
|
|
35
|
+
Object {
|
|
36
|
+
"minWidth": "fit-content",
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
data={Array []}
|
|
40
|
+
isVertical={false}
|
|
41
|
+
onAnswerRemove={[Function]}
|
|
42
|
+
onDragBegin={[Function]}
|
|
43
|
+
onDragEnd={[Function]}
|
|
44
|
+
/>
|
|
45
|
+
</WithStyles(InteractiveSection)>
|
|
46
|
+
</WithStyles(UiLayout)>
|
|
47
|
+
`;
|
|
48
|
+
|
|
49
|
+
exports[`image-cloze-association renders snapshot with rationale 1`] = `
|
|
50
|
+
<WithStyles(UiLayout)>
|
|
51
|
+
<WithStyles(PreviewPrompt)
|
|
52
|
+
className="prompt"
|
|
53
|
+
/>
|
|
54
|
+
<WithStyles(PreviewPrompt) />
|
|
55
|
+
<WithStyles(CorrectAnswerToggle)
|
|
56
|
+
onToggle={[Function]}
|
|
57
|
+
show={false}
|
|
58
|
+
toggled={false}
|
|
59
|
+
/>
|
|
60
|
+
<WithStyles(InteractiveSection)
|
|
61
|
+
uiStyle={Object {}}
|
|
62
|
+
>
|
|
63
|
+
<WithStyles(ImageContainer)
|
|
64
|
+
answers={Array []}
|
|
65
|
+
canDrag={true}
|
|
66
|
+
draggingElement={
|
|
67
|
+
Object {
|
|
68
|
+
"id": "",
|
|
69
|
+
"value": "",
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
maxResponsePerZone={1}
|
|
73
|
+
onAnswerSelect={[Function]}
|
|
74
|
+
onDragAnswerBegin={[Function]}
|
|
75
|
+
onDragAnswerEnd={[Function]}
|
|
76
|
+
responseContainers={Array []}
|
|
77
|
+
/>
|
|
78
|
+
<WithStyles(PossibleResponses)
|
|
79
|
+
canDrag={true}
|
|
80
|
+
customStyle={
|
|
81
|
+
Object {
|
|
82
|
+
"minWidth": "fit-content",
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
data={Array []}
|
|
86
|
+
isVertical={false}
|
|
87
|
+
onAnswerRemove={[Function]}
|
|
88
|
+
onDragBegin={[Function]}
|
|
89
|
+
onDragEnd={[Function]}
|
|
90
|
+
/>
|
|
91
|
+
</WithStyles(InteractiveSection)>
|
|
92
|
+
<WithStyles(Collapsible)
|
|
93
|
+
labels={
|
|
94
|
+
Object {
|
|
95
|
+
"hidden": "Show Rationale",
|
|
96
|
+
"visible": "Hide Rationale",
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
>
|
|
100
|
+
<WithStyles(PreviewPrompt)
|
|
101
|
+
prompt="This is rationale"
|
|
102
|
+
/>
|
|
103
|
+
</WithStyles(Collapsible)>
|
|
104
|
+
</WithStyles(UiLayout)>
|
|
105
|
+
`;
|
|
106
|
+
|
|
107
|
+
exports[`image-cloze-association renders snapshot with teacherInstructions 1`] = `
|
|
108
|
+
<WithStyles(UiLayout)>
|
|
109
|
+
<WithStyles(Collapsible)
|
|
110
|
+
labels={
|
|
111
|
+
Object {
|
|
112
|
+
"hidden": "Show Teacher Instructions",
|
|
113
|
+
"visible": "Hide Teacher Instructions",
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
>
|
|
117
|
+
<WithStyles(PreviewPrompt)
|
|
118
|
+
prompt="These are teacher instructions"
|
|
119
|
+
/>
|
|
120
|
+
</WithStyles(Collapsible)>
|
|
121
|
+
<WithStyles(PreviewPrompt)
|
|
122
|
+
className="prompt"
|
|
123
|
+
/>
|
|
124
|
+
<WithStyles(PreviewPrompt) />
|
|
125
|
+
<WithStyles(CorrectAnswerToggle)
|
|
126
|
+
onToggle={[Function]}
|
|
127
|
+
show={false}
|
|
128
|
+
toggled={false}
|
|
129
|
+
/>
|
|
130
|
+
<WithStyles(InteractiveSection)
|
|
131
|
+
uiStyle={Object {}}
|
|
132
|
+
>
|
|
133
|
+
<WithStyles(ImageContainer)
|
|
134
|
+
answers={Array []}
|
|
135
|
+
canDrag={true}
|
|
136
|
+
draggingElement={
|
|
137
|
+
Object {
|
|
138
|
+
"id": "",
|
|
139
|
+
"value": "",
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
maxResponsePerZone={1}
|
|
143
|
+
onAnswerSelect={[Function]}
|
|
144
|
+
onDragAnswerBegin={[Function]}
|
|
145
|
+
onDragAnswerEnd={[Function]}
|
|
146
|
+
responseContainers={Array []}
|
|
147
|
+
/>
|
|
148
|
+
<WithStyles(PossibleResponses)
|
|
149
|
+
canDrag={true}
|
|
150
|
+
customStyle={
|
|
151
|
+
Object {
|
|
152
|
+
"minWidth": "fit-content",
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
data={Array []}
|
|
156
|
+
isVertical={false}
|
|
157
|
+
onAnswerRemove={[Function]}
|
|
158
|
+
onDragBegin={[Function]}
|
|
159
|
+
onDragEnd={[Function]}
|
|
160
|
+
/>
|
|
161
|
+
</WithStyles(InteractiveSection)>
|
|
162
|
+
</WithStyles(UiLayout)>
|
|
163
|
+
`;
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { shallow } from 'enzyme';
|
|
3
|
+
import { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';
|
|
4
|
+
import ImageClozeAssociation from '../index';
|
|
5
|
+
import { ImageClozeAssociationComponent } from '../root';
|
|
6
|
+
|
|
7
|
+
jest.mock('@pie-lib/pie-toolbox/math-rendering-accessible', () => ({ renderMath: jest.fn() }));
|
|
8
|
+
|
|
9
|
+
describe('image-cloze-association', () => {
|
|
10
|
+
describe('renders', () => {
|
|
11
|
+
let wrapper = (props) => {
|
|
12
|
+
let defaultProps = {
|
|
13
|
+
model: { ...props },
|
|
14
|
+
session: {},
|
|
15
|
+
classes: {},
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
return shallow(<ImageClozeAssociationComponent {...defaultProps} />);
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
it('snapshot', () => {
|
|
22
|
+
const w = wrapper();
|
|
23
|
+
expect(w).toMatchSnapshot();
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
it('snapshot with rationale', () => {
|
|
27
|
+
const w = wrapper({ rationale: 'This is rationale' });
|
|
28
|
+
expect(w).toMatchSnapshot();
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
it('snapshot with teacherInstructions', () => {
|
|
32
|
+
const w = wrapper({ teacherInstructions: 'These are teacher instructions' });
|
|
33
|
+
expect(w).toMatchSnapshot();
|
|
34
|
+
});
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
describe('events', () => {
|
|
38
|
+
describe('model', () => {
|
|
39
|
+
it('dispatches model set event', () => {
|
|
40
|
+
const el = new ImageClozeAssociation();
|
|
41
|
+
el.tagName = 'ica-el';
|
|
42
|
+
el.model = {};
|
|
43
|
+
expect(el.dispatchEvent).toBeCalledWith(new ModelSetEvent('ica-el', false, true));
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
describe('updateAnswer', () => {
|
|
48
|
+
it('dispatches session changed event - add answer', () => {
|
|
49
|
+
const el = new ImageClozeAssociation();
|
|
50
|
+
el.tagName = 'ica-el';
|
|
51
|
+
el.session = { answers: [] };
|
|
52
|
+
el.updateAnswer([{ id: '1', containerIndex: 0, value: '' }]);
|
|
53
|
+
expect(el.dispatchEvent).toBeCalledWith(new SessionChangedEvent('ica-el', true));
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
it('dispatches session changed event - remove answer', () => {
|
|
57
|
+
const el = new ImageClozeAssociation();
|
|
58
|
+
el.tagName = 'ica-el';
|
|
59
|
+
el.session = { answers: [{ id: '1', containerIndex: 0, value: '' }] };
|
|
60
|
+
el.updateAnswer([]);
|
|
61
|
+
expect(el.dispatchEvent).toBeCalledWith(new SessionChangedEvent('ica-el', false));
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
it('dispatches session changed event - add/remove answer', () => {
|
|
65
|
+
const el = new ImageClozeAssociation();
|
|
66
|
+
el.tagName = 'ica-el';
|
|
67
|
+
el.session = { answers: [{ id: '1', containerIndex: 0, value: '' }] };
|
|
68
|
+
el.updateAnswer([
|
|
69
|
+
{ id: '1', containerIndex: 0, value: '' },
|
|
70
|
+
{ id: '2', containerIndex: 1, value: '' },
|
|
71
|
+
]);
|
|
72
|
+
expect(el.dispatchEvent).toBeCalledWith(new SessionChangedEvent('ica-el', true));
|
|
73
|
+
|
|
74
|
+
el.updateAnswer([{ id: '2', containerIndex: 1, value: '' }]);
|
|
75
|
+
expect(el.dispatchEvent).toBeCalledWith(new SessionChangedEvent('ica-el', true));
|
|
76
|
+
|
|
77
|
+
el.updateAnswer([]);
|
|
78
|
+
expect(el.dispatchEvent).toBeCalledWith(new SessionChangedEvent('ica-el', false));
|
|
79
|
+
});
|
|
80
|
+
});
|
|
81
|
+
});
|
|
82
|
+
});
|
|
@@ -33,16 +33,17 @@ class ImageDropTarget extends React.Component {
|
|
|
33
33
|
isOver,
|
|
34
34
|
} = this.props;
|
|
35
35
|
const { shouldHaveSmallPadding } = this.state;
|
|
36
|
+
const isDraggingElement = !!draggingElement.id;
|
|
36
37
|
|
|
37
38
|
const containerClasses = cx(classes.responseContainer, isOver && classes.isOver, {
|
|
38
|
-
[classes.responseContainerDashed]: showDashedBorder && !
|
|
39
|
-
[classes.responseContainerActive]:
|
|
39
|
+
[classes.responseContainerDashed]: showDashedBorder && !isDraggingElement,
|
|
40
|
+
[classes.responseContainerActive]: isDraggingElement,
|
|
40
41
|
});
|
|
41
42
|
|
|
42
43
|
const updatedContainerStyle = {
|
|
43
44
|
padding: maxResponsePerZone === 1 ? '0' : responseContainerPadding,
|
|
44
45
|
...containerStyle,
|
|
45
|
-
...(responseAreaFill && { backgroundColor: responseAreaFill })
|
|
46
|
+
...(responseAreaFill && !isDraggingElement && { backgroundColor: responseAreaFill })
|
|
46
47
|
};
|
|
47
48
|
|
|
48
49
|
return connectDropTarget(
|