@pie-element/image-cloze-association 6.5.2-next.23 → 6.5.2-next.4

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.
Files changed (6) hide show
  1. package/lib/image-drop-target.js +2 -3
  2. package/lib/image-drop-target.js.map +1 -1
  3. package/package.json +2 -2
  4. package/src/image-drop-target.jsx +3 -4
  5. package/src/__tests__/__snapshots__/index.test.js.snap +0 -163
  6. package/src/__tests__/index.test.js +0 -82
package/lib/image-drop-target.js CHANGED
@@ -89,12 +89,11 @@ 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 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));
92
+ var containerClasses = (0, _classnames["default"])(classes.responseContainer, isOver && classes.isOver, (_cx = {}, (0, _defineProperty2["default"])(_cx, classes.responseContainerDashed, showDashedBorder && !draggingElement.id), (0, _defineProperty2["default"])(_cx, classes.responseContainerActive, !!draggingElement.id), _cx));
94
93
 
95
94
  var updatedContainerStyle = _objectSpread(_objectSpread({
96
95
  padding: maxResponsePerZone === 1 ? '0' : responseContainerPadding
97
- }, containerStyle), responseAreaFill && !isDraggingElement && {
96
+ }, containerStyle), responseAreaFill && {
98
97
  backgroundColor: responseAreaFill
99
98
  });
100
99
 
package/lib/image-drop-target.js.map CHANGED
@@ -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","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"}
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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pie-element/image-cloze-association",
3
- "version": "6.5.2-next.23+61d1667c0",
3
+ "version": "6.5.2-next.4+dba7b2f5e",
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": "61d1667c0fef5739f3ff88828f52468f8bdcf7e2",
22
+ "gitHead": "dba7b2f5e68bd1d212e03ad1e4e574c55f58b150",
23
23
  "scripts": {
24
24
  "postpublish": "../../scripts/postpublish"
25
25
  },
package/src/image-drop-target.jsx CHANGED
@@ -33,17 +33,16 @@ class ImageDropTarget extends React.Component {
33
33
  isOver,
34
34
  } = this.props;
35
35
  const { shouldHaveSmallPadding } = this.state;
36
- const isDraggingElement = !!draggingElement.id;
37
36
 
38
37
  const containerClasses = cx(classes.responseContainer, isOver && classes.isOver, {
39
- [classes.responseContainerDashed]: showDashedBorder && !isDraggingElement,
40
- [classes.responseContainerActive]: isDraggingElement,
38
+ [classes.responseContainerDashed]: showDashedBorder && !draggingElement.id,
39
+ [classes.responseContainerActive]: !!draggingElement.id,
41
40
  });
42
41
 
43
42
  const updatedContainerStyle = {
44
43
  padding: maxResponsePerZone === 1 ? '0' : responseContainerPadding,
45
44
  ...containerStyle,
46
- ...(responseAreaFill && !isDraggingElement && { backgroundColor: responseAreaFill })
45
+ ...(responseAreaFill && { backgroundColor: responseAreaFill })
47
46
  };
48
47
 
49
48
  return connectDropTarget(
package/src/__tests__/__snapshots__/index.test.js.snap DELETED
@@ -1,163 +0,0 @@
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
- `;
package/src/__tests__/index.test.js DELETED
@@ -1,82 +0,0 @@
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
- });