@pie-element/match-list 7.2.1 → 7.2.2-beta.2
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 +25 -36
- package/controller/CHANGELOG.md +38 -6
- package/controller/package.json +1 -1
- package/lib/answer-area.js +7 -20
- package/lib/answer-area.js.map +1 -1
- package/lib/answer.js +27 -129
- package/lib/answer.js.map +1 -1
- package/lib/arrow.js +3 -8
- package/lib/arrow.js.map +1 -1
- package/lib/choices-list.js +4 -13
- package/lib/choices-list.js.map +1 -1
- package/lib/droppable-placeholder.js +1 -12
- package/lib/droppable-placeholder.js.map +1 -1
- package/lib/main.js +19 -223
- package/lib/main.js.map +1 -1
- package/package.json +5 -5
- package/lib/keyboard-coordinates.js +0 -154
- package/lib/keyboard-coordinates.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,70 +3,59 @@
|
|
|
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
|
-
## [7.2.
|
|
6
|
+
## [7.2.2-beta.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list@7.4.0-beta.7...@pie-element/match-list@7.2.2-beta.2) (2026-08-26)
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
**Note:** Version bump only for package @pie-element/match-list
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
# [7.4.0-beta.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list@7.4.0-beta.6...@pie-element/match-list@7.4.0-beta.7) (2026-08-20)
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
**Note:** Version bump only for package @pie-element/match-list
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
# [7.4.0-beta.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list@7.4.0-beta.5...@pie-element/match-list@7.4.0-beta.6) (2026-08-14)
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
- **theming:** move the grey palette reads onto --pie-\* tokens PIE-856 ([d7d005b](https://github.com/pie-framework/pie-elements/commit/d7d005bf081843335b4b0377852f2ecd075cb62d)), closes [#000000](https://github.com/pie-framework/pie-elements/issues/000000) [#E0E1E6](https://github.com/pie-framework/pie-elements/issues/E0E1E6) [#646464](https://github.com/pie-framework/pie-elements/issues/646464) [#616161](https://github.com/pie-framework/pie-elements/issues/616161) [#E0E1E6](https://github.com/pie-framework/pie-elements/issues/E0E1E6) [#C0C3](https://github.com/pie-framework/pie-elements/issues/C0C3)
|
|
16
|
+
**Note:** Version bump only for package @pie-element/match-list
|
|
18
17
|
|
|
19
|
-
|
|
18
|
+
# [7.4.0-beta.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list@7.4.0-beta.4...@pie-element/match-list@7.4.0-beta.5) (2026-08-11)
|
|
20
19
|
|
|
21
|
-
|
|
20
|
+
**Note:** Version bump only for package @pie-element/match-list
|
|
22
21
|
|
|
23
|
-
|
|
22
|
+
# [7.4.0-beta.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list@7.4.0-beta.3...@pie-element/match-list@7.4.0-beta.4) (2026-08-11)
|
|
24
23
|
|
|
25
24
|
**Note:** Version bump only for package @pie-element/match-list
|
|
26
25
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
### Bug Fixes
|
|
26
|
+
# [7.4.0-beta.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list@7.4.0-beta.2...@pie-element/match-list@7.4.0-beta.3) (2026-08-11)
|
|
30
27
|
|
|
31
|
-
|
|
32
|
-
- **match-list:** improve keyboard drag-and-drop, collision detection and drop-zone visuals PIE-643 ([265b832](https://github.com/pie-framework/pie-elements/commit/265b8329b27b0226ce49ac83f3f3b944c18fc506))
|
|
28
|
+
**Note:** Version bump only for package @pie-element/match-list
|
|
33
29
|
|
|
34
|
-
|
|
30
|
+
# [7.4.0-beta.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list@7.4.0-beta.1...@pie-element/match-list@7.4.0-beta.2) (2026-08-11)
|
|
35
31
|
|
|
36
32
|
**Note:** Version bump only for package @pie-element/match-list
|
|
37
33
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
### Bug Fixes
|
|
34
|
+
# [7.4.0-beta.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list@7.4.0-beta.0...@pie-element/match-list@7.4.0-beta.1) (2026-08-07)
|
|
41
35
|
|
|
42
|
-
|
|
43
|
-
- sync libs versions ([48b5be9](https://github.com/pie-framework/pie-elements/commit/48b5be9559eb5b5235ca05f51c5f0161032a7041))
|
|
36
|
+
**Note:** Version bump only for package @pie-element/match-list
|
|
44
37
|
|
|
45
|
-
|
|
38
|
+
# [7.4.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list@7.3.0-beta.0...@pie-element/match-list@7.4.0-beta.0) (2026-08-07)
|
|
46
39
|
|
|
47
|
-
|
|
40
|
+
**Note:** Version bump only for package @pie-element/match-list
|
|
48
41
|
|
|
49
|
-
|
|
42
|
+
# [7.3.0-beta.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list@7.3.0-beta.0...@pie-element/match-list@7.3.0-beta.1) (2026-08-07)
|
|
50
43
|
|
|
51
|
-
|
|
44
|
+
**Note:** Version bump only for package @pie-element/match-list
|
|
52
45
|
|
|
53
|
-
|
|
46
|
+
# [7.3.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list@7.2.0-beta.0...@pie-element/match-list@7.3.0-beta.0) (2026-08-07)
|
|
54
47
|
|
|
55
|
-
|
|
48
|
+
**Note:** Version bump only for package @pie-element/match-list
|
|
56
49
|
|
|
57
|
-
|
|
50
|
+
# [7.2.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list@7.1.0...@pie-element/match-list@7.2.0-beta.0) (2026-08-07)
|
|
58
51
|
|
|
59
52
|
### Bug Fixes
|
|
60
53
|
|
|
54
|
+
- bump shared modules and libs PIE-661 PIE-664 PIE-683 PIE-666 PIE-656 PIE-657 PIE-658 PIE-659 PIE-670 ([ebd6be4](https://github.com/pie-framework/pie-elements/commit/ebd6be4fd48fca41ad4c4908f606b25334731aed))
|
|
55
|
+
- bump shared modules and libs PIE-695, PIE-697, PIE-699, PIE-680, PIE-714, PIE-665, PIE-656 ([4b76ae7](https://github.com/pie-framework/pie-elements/commit/4b76ae75d1c5ea6d55f7c6fb53f299dfcbda2b1f))
|
|
61
56
|
- bump shared modules and libsPIE-603, PIE-604, PIE-663, PIE-662, PIE-678 ([e61c7a7](https://github.com/pie-framework/pie-elements/commit/e61c7a7d23744586337dfbb17a18ebfc656c202f))
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
**Note:** Version bump only for package @pie-element/match-list
|
|
66
|
-
|
|
67
|
-
## [7.1.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list@7.1.0...@pie-element/match-list@7.1.1) (2026-05-21)
|
|
68
|
-
|
|
69
|
-
**Note:** Version bump only for package @pie-element/match-list
|
|
57
|
+
- handle webcomponent lifecycle on every element that misses it PIE-703 ([9d5923f](https://github.com/pie-framework/pie-elements/commit/9d5923f973f0471e1e8f69ad4309cfc63d980d93))
|
|
58
|
+
- sync libs versions ([48b5be9](https://github.com/pie-framework/pie-elements/commit/48b5be9559eb5b5235ca05f51c5f0161032a7041))
|
|
70
59
|
|
|
71
60
|
# [7.1.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list@7.1.0-next.1...@pie-element/match-list@7.1.0) (2026-05-21)
|
|
72
61
|
|
package/controller/CHANGELOG.md
CHANGED
|
@@ -3,24 +3,56 @@
|
|
|
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.4.0-beta.8](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list-controller@6.4.0-beta.7...@pie-element/match-list-controller@6.4.0-beta.8) (2026-08-26)
|
|
7
7
|
|
|
8
8
|
**Note:** Version bump only for package @pie-element/match-list-controller
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
# [6.4.0-beta.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list-controller@6.4.0-beta.6...@pie-element/match-list-controller@6.4.0-beta.7) (2026-08-20)
|
|
11
11
|
|
|
12
12
|
**Note:** Version bump only for package @pie-element/match-list-controller
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
# [6.4.0-beta.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list-controller@6.4.0-beta.5...@pie-element/match-list-controller@6.4.0-beta.6) (2026-08-14)
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
**Note:** Version bump only for package @pie-element/match-list-controller
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
# [6.4.0-beta.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list-controller@6.4.0-beta.4...@pie-element/match-list-controller@6.4.0-beta.5) (2026-08-11)
|
|
19
|
+
|
|
20
|
+
**Note:** Version bump only for package @pie-element/match-list-controller
|
|
21
|
+
|
|
22
|
+
# [6.4.0-beta.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list-controller@6.4.0-beta.3...@pie-element/match-list-controller@6.4.0-beta.4) (2026-08-11)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @pie-element/match-list-controller
|
|
25
|
+
|
|
26
|
+
# [6.4.0-beta.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list-controller@6.4.0-beta.2...@pie-element/match-list-controller@6.4.0-beta.3) (2026-08-11)
|
|
27
|
+
|
|
28
|
+
**Note:** Version bump only for package @pie-element/match-list-controller
|
|
29
|
+
|
|
30
|
+
# [6.4.0-beta.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list-controller@6.4.0-beta.1...@pie-element/match-list-controller@6.4.0-beta.2) (2026-08-11)
|
|
31
|
+
|
|
32
|
+
**Note:** Version bump only for package @pie-element/match-list-controller
|
|
19
33
|
|
|
20
|
-
|
|
34
|
+
# [6.4.0-beta.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list-controller@6.4.0-beta.0...@pie-element/match-list-controller@6.4.0-beta.1) (2026-08-07)
|
|
21
35
|
|
|
22
36
|
**Note:** Version bump only for package @pie-element/match-list-controller
|
|
23
37
|
|
|
38
|
+
# [6.4.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list-controller@6.3.0-beta.0...@pie-element/match-list-controller@6.4.0-beta.0) (2026-08-07)
|
|
39
|
+
|
|
40
|
+
**Note:** Version bump only for package @pie-element/match-list-controller
|
|
41
|
+
|
|
42
|
+
# [6.3.0-beta.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list-controller@6.3.0-beta.0...@pie-element/match-list-controller@6.3.0-beta.1) (2026-08-07)
|
|
43
|
+
|
|
44
|
+
**Note:** Version bump only for package @pie-element/match-list-controller
|
|
45
|
+
|
|
46
|
+
# [6.3.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list-controller@6.2.0-beta.0...@pie-element/match-list-controller@6.3.0-beta.0) (2026-08-07)
|
|
47
|
+
|
|
48
|
+
**Note:** Version bump only for package @pie-element/match-list-controller
|
|
49
|
+
|
|
50
|
+
# [6.2.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list-controller@6.1.0...@pie-element/match-list-controller@6.2.0-beta.0) (2026-08-07)
|
|
51
|
+
|
|
52
|
+
### Bug Fixes
|
|
53
|
+
|
|
54
|
+
- bump shared modules and libs PIE-695, PIE-697, PIE-699, PIE-680, PIE-714, PIE-665, PIE-656 ([4b76ae7](https://github.com/pie-framework/pie-elements/commit/4b76ae75d1c5ea6d55f7c6fb53f299dfcbda2b1f))
|
|
55
|
+
|
|
24
56
|
# [6.1.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/match-list-controller@6.1.0-next.1...@pie-element/match-list-controller@6.1.0) (2026-05-21)
|
|
25
57
|
|
|
26
58
|
### Bug Fixes
|
package/controller/package.json
CHANGED
package/lib/answer-area.js
CHANGED
|
@@ -12,14 +12,9 @@ var _styles = require("@mui/material/styles");
|
|
|
12
12
|
var _lodashEs = require("lodash-es");
|
|
13
13
|
var _arrow = _interopRequireDefault(require("./arrow"));
|
|
14
14
|
var _answer = _interopRequireDefault(require("./answer"));
|
|
15
|
-
var _renderUi = require("@pie-lib/render-ui");
|
|
16
|
-
// matches the min width of the answer entries (see AnswerContainer in ./answer), so the two columns
|
|
17
|
-
// give the row an intrinsic min width that the horizontal scroll container can overflow.
|
|
18
|
-
const MIN_COLUMN_WIDTH = 200;
|
|
19
15
|
const ArrowEntry = (0, _styles.styled)('div')({
|
|
20
16
|
alignItems: 'normal',
|
|
21
17
|
display: 'flex',
|
|
22
|
-
flexShrink: 0,
|
|
23
18
|
height: 40,
|
|
24
19
|
margin: '10px 20px'
|
|
25
20
|
});
|
|
@@ -34,13 +29,14 @@ const ItemList = (0, _styles.styled)('div')(({
|
|
|
34
29
|
marginTop: theme.spacing(2),
|
|
35
30
|
marginBottom: theme.spacing(2)
|
|
36
31
|
}));
|
|
37
|
-
const PromptEntry = (0, _styles.styled)('div')((
|
|
38
|
-
|
|
32
|
+
const PromptEntry = (0, _styles.styled)('div')(({
|
|
33
|
+
theme
|
|
34
|
+
}) => ({
|
|
35
|
+
border: `1px solid ${theme.palette.grey[400]}`,
|
|
39
36
|
boxSizing: 'border-box',
|
|
40
37
|
flex: 1,
|
|
41
38
|
margin: '10px 0',
|
|
42
39
|
minHeight: 40,
|
|
43
|
-
minWidth: MIN_COLUMN_WIDTH,
|
|
44
40
|
overflow: 'hidden',
|
|
45
41
|
padding: 10,
|
|
46
42
|
textAlign: 'center',
|
|
@@ -123,10 +119,7 @@ class AnswerArea extends _react.default.Component {
|
|
|
123
119
|
const {
|
|
124
120
|
disabled,
|
|
125
121
|
instanceId,
|
|
126
|
-
onRemoveAnswer
|
|
127
|
-
selectedAnswer,
|
|
128
|
-
onChoiceClick,
|
|
129
|
-
onPlacementClick
|
|
122
|
+
onRemoveAnswer
|
|
130
123
|
} = this.props;
|
|
131
124
|
const rows = this.buildRows();
|
|
132
125
|
const correctnessMap = this.getCorrectOrIncorrectMap();
|
|
@@ -155,10 +148,7 @@ class AnswerArea extends _react.default.Component {
|
|
|
155
148
|
id: sessionAnswer.id,
|
|
156
149
|
title: sessionAnswer.title,
|
|
157
150
|
type: 'target',
|
|
158
|
-
onRemoveChoice: () => onRemoveAnswer(id)
|
|
159
|
-
selectedAnswer: selectedAnswer,
|
|
160
|
-
onSelectClick: onChoiceClick,
|
|
161
|
-
onPlacementClick: onPlacementClick
|
|
151
|
+
onRemoveChoice: () => onRemoveAnswer(id)
|
|
162
152
|
}));
|
|
163
153
|
}));
|
|
164
154
|
}
|
|
@@ -172,10 +162,7 @@ exports.AnswerArea = AnswerArea;
|
|
|
172
162
|
onRemoveAnswer: _propTypes.default.func,
|
|
173
163
|
instanceId: _propTypes.default.string.isRequired,
|
|
174
164
|
model: _propTypes.default.object.isRequired,
|
|
175
|
-
prompt: _propTypes.default.string
|
|
176
|
-
selectedAnswer: _propTypes.default.object,
|
|
177
|
-
onChoiceClick: _propTypes.default.func,
|
|
178
|
-
onPlacementClick: _propTypes.default.func
|
|
165
|
+
prompt: _propTypes.default.string
|
|
179
166
|
});
|
|
180
167
|
var _default = exports.default = AnswerArea;
|
|
181
168
|
//# sourceMappingURL=answer-area.js.map
|
package/lib/answer-area.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"answer-area.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_lodashEs","_arrow","_answer","_renderUi","MIN_COLUMN_WIDTH","ArrowEntry","styled","alignItems","display","flexShrink","height","margin","ItemList","theme","flex","flexDirection","justifyContent","marginTop","spacing","marginBottom","PromptEntry","border","color","boxSizing","minHeight","minWidth","overflow","padding","textAlign","width","wordBreak","Row","AnswerArea","React","Component","constructor","args","_defineProperty2","default","promptId","model","session","showCorrect","props","config","answerId","prompts","find","p","id","relatedAnswer","value","answer","answers","sessionValue","reduce","obj","prompt","undefined","mode","correctPromptMap","isUndefined","val","key","map","sessionAnswer","getAnswerFromSession","render","disabled","instanceId","onRemoveAnswer","selectedAnswer","onChoiceClick","onPlacementClick","rows","buildRows","correctnessMap","getCorrectOrIncorrectMap","createElement","title","index","dangerouslySetInnerHTML","__html","direction","className","correct","draggable","isEmpty","type","onRemoveChoice","onSelectClick","exports","PropTypes","object","isRequired","bool","onSessionChange","func","string","_default"],"sources":["../src/answer-area.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport { isEmpty, isUndefined, reduce } from 'lodash-es';\n\nimport Arrow from './arrow';\nimport DragAndDropAnswer from './answer';\nimport { color } from '@pie-lib/render-ui';\n\n// matches the min width of the answer entries (see AnswerContainer in ./answer), so the two columns\n// give the row an intrinsic min width that the horizontal scroll container can overflow.\nconst MIN_COLUMN_WIDTH = 200;\n\nconst ArrowEntry = styled('div')({\n alignItems: 'normal',\n display: 'flex',\n flexShrink: 0,\n height: 40,\n margin: '10px 20px',\n});\n\nconst ItemList = styled('div')(({ theme }) => ({\n alignItems: 'flex-start',\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n justifyContent: 'space-between',\n marginTop: theme.spacing(2),\n marginBottom: theme.spacing(2),\n}));\n\nconst PromptEntry = styled('div')(() => ({\n border: `1px solid ${color.border()}`,\n boxSizing: 'border-box',\n flex: 1,\n margin: '10px 0',\n minHeight: 40,\n minWidth: MIN_COLUMN_WIDTH,\n overflow: 'hidden',\n padding: 10,\n textAlign: 'center',\n width: '100%',\n wordBreak: 'break-word',\n}));\n\nconst Row = styled('div')({\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'space-between',\n width: '100%',\n});\n\nexport class AnswerArea extends React.Component {\n static propTypes = {\n session: PropTypes.object.isRequired,\n showCorrect: PropTypes.bool.isRequired,\n disabled: PropTypes.bool.isRequired,\n onSessionChange: PropTypes.func,\n onRemoveAnswer: PropTypes.func,\n instanceId: PropTypes.string.isRequired,\n model: PropTypes.object.isRequired,\n prompt: PropTypes.string,\n selectedAnswer: PropTypes.object,\n onChoiceClick: PropTypes.func,\n onPlacementClick: PropTypes.func,\n };\n\n getAnswerFromSession = (promptId) => {\n const { model, session, showCorrect } = this.props;\n const { config } = model;\n const answerId = showCorrect\n ? config.prompts.find((p) => p.id === promptId).relatedAnswer\n : session.value && session.value[promptId];\n const answer = config.answers.find((answer) => answer.id === answerId);\n\n return answer || {};\n };\n\n getCorrectOrIncorrectMap = () => {\n const { model, session, showCorrect } = this.props;\n const { config } = model;\n const sessionValue =\n session.value ||\n config.prompts.reduce((obj, prompt) => {\n obj[prompt.id] = undefined;\n return obj;\n }, {});\n\n if (model.mode !== 'evaluate') {\n return {};\n }\n\n if (showCorrect) {\n return config.prompts.reduce((obj, prompt) => {\n obj[prompt.id] = true;\n\n return obj;\n }, {});\n }\n\n const correctPromptMap = config.prompts.reduce((obj, prompt) => {\n if (!isUndefined(prompt.relatedAnswer)) {\n obj[prompt.id] = prompt.relatedAnswer;\n }\n\n return obj;\n }, {});\n\n return reduce(\n sessionValue,\n (obj, val, key) => {\n obj[key] = correctPromptMap[key] === sessionValue[key];\n\n return obj;\n },\n {},\n );\n };\n\n buildRows = () => {\n const { model } = this.props;\n const { config } = model;\n const prompts = config.prompts || [];\n\n return prompts.map((prompt) => {\n const sessionAnswer = this.getAnswerFromSession(prompt.id);\n\n return {\n ...prompt,\n sessionAnswer,\n };\n });\n };\n\n render() {\n const { disabled, instanceId, onRemoveAnswer, selectedAnswer, onChoiceClick, onPlacementClick } = this.props;\n const rows = this.buildRows();\n const correctnessMap = this.getCorrectOrIncorrectMap();\n\n return (\n <ItemList>\n {rows.map(({ sessionAnswer, title, id }, index) => {\n return (\n <Row key={index}>\n <PromptEntry dangerouslySetInnerHTML={{ __html: title }} />\n\n <ArrowEntry>\n <Arrow direction=\"left\" />\n <Arrow />\n </ArrowEntry>\n\n <DragAndDropAnswer\n key={index}\n className=\"answer\"\n index={index}\n promptId={id}\n correct={correctnessMap[id]}\n draggable={!isEmpty(sessionAnswer)}\n disabled={disabled}\n instanceId={instanceId}\n id={sessionAnswer.id}\n title={sessionAnswer.title}\n type={'target'}\n onRemoveChoice={() => onRemoveAnswer(id)}\n selectedAnswer={selectedAnswer}\n onSelectClick={onChoiceClick}\n onPlacementClick={onPlacementClick}\n />\n </Row>\n );\n })}\n </ItemList>\n );\n }\n}\n\nexport default AnswerArea;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"answer-area.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_lodashEs","_arrow","_answer","ArrowEntry","styled","alignItems","display","height","margin","ItemList","theme","flex","flexDirection","justifyContent","marginTop","spacing","marginBottom","PromptEntry","border","palette","grey","boxSizing","minHeight","overflow","padding","textAlign","width","wordBreak","Row","AnswerArea","React","Component","constructor","args","_defineProperty2","default","promptId","model","session","showCorrect","props","config","answerId","prompts","find","p","id","relatedAnswer","value","answer","answers","sessionValue","reduce","obj","prompt","undefined","mode","correctPromptMap","isUndefined","val","key","map","sessionAnswer","getAnswerFromSession","render","disabled","instanceId","onRemoveAnswer","rows","buildRows","correctnessMap","getCorrectOrIncorrectMap","createElement","title","index","dangerouslySetInnerHTML","__html","direction","className","correct","draggable","isEmpty","type","onRemoveChoice","exports","PropTypes","object","isRequired","bool","onSessionChange","func","string","_default"],"sources":["../src/answer-area.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport { isEmpty, isUndefined, reduce } from 'lodash-es';\n\nimport Arrow from './arrow';\nimport DragAndDropAnswer from './answer';\n\nconst ArrowEntry = styled('div')({\n alignItems: 'normal',\n display: 'flex',\n height: 40,\n margin: '10px 20px',\n});\n\nconst ItemList = styled('div')(({ theme }) => ({\n alignItems: 'flex-start',\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n justifyContent: 'space-between',\n marginTop: theme.spacing(2),\n marginBottom: theme.spacing(2),\n}));\n\nconst PromptEntry = styled('div')(({ theme }) => ({\n border: `1px solid ${theme.palette.grey[400]}`,\n boxSizing: 'border-box',\n flex: 1,\n margin: '10px 0',\n minHeight: 40,\n overflow: 'hidden',\n padding: 10,\n textAlign: 'center',\n width: '100%',\n wordBreak: 'break-word',\n}));\n\nconst Row = styled('div')({\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'space-between',\n width: '100%',\n});\n\nexport class AnswerArea extends React.Component {\n static propTypes = {\n session: PropTypes.object.isRequired,\n showCorrect: PropTypes.bool.isRequired,\n disabled: PropTypes.bool.isRequired,\n onSessionChange: PropTypes.func,\n onRemoveAnswer: PropTypes.func,\n instanceId: PropTypes.string.isRequired,\n model: PropTypes.object.isRequired,\n prompt: PropTypes.string,\n };\n\n getAnswerFromSession = (promptId) => {\n const { model, session, showCorrect } = this.props;\n const { config } = model;\n const answerId = showCorrect\n ? config.prompts.find((p) => p.id === promptId).relatedAnswer\n : session.value && session.value[promptId];\n const answer = config.answers.find((answer) => answer.id === answerId);\n\n return answer || {};\n };\n\n getCorrectOrIncorrectMap = () => {\n const { model, session, showCorrect } = this.props;\n const { config } = model;\n const sessionValue =\n session.value ||\n config.prompts.reduce((obj, prompt) => {\n obj[prompt.id] = undefined;\n return obj;\n }, {});\n\n if (model.mode !== 'evaluate') {\n return {};\n }\n\n if (showCorrect) {\n return config.prompts.reduce((obj, prompt) => {\n obj[prompt.id] = true;\n\n return obj;\n }, {});\n }\n\n const correctPromptMap = config.prompts.reduce((obj, prompt) => {\n if (!isUndefined(prompt.relatedAnswer)) {\n obj[prompt.id] = prompt.relatedAnswer;\n }\n\n return obj;\n }, {});\n\n return reduce(\n sessionValue,\n (obj, val, key) => {\n obj[key] = correctPromptMap[key] === sessionValue[key];\n\n return obj;\n },\n {},\n );\n };\n\n buildRows = () => {\n const { model } = this.props;\n const { config } = model;\n const prompts = config.prompts || [];\n\n return prompts.map((prompt) => {\n const sessionAnswer = this.getAnswerFromSession(prompt.id);\n\n return {\n ...prompt,\n sessionAnswer,\n };\n });\n };\n\n render() {\n const { disabled, instanceId, onRemoveAnswer } = this.props;\n const rows = this.buildRows();\n const correctnessMap = this.getCorrectOrIncorrectMap();\n\n return (\n <ItemList>\n {rows.map(({ sessionAnswer, title, id }, index) => {\n return (\n <Row key={index}>\n <PromptEntry dangerouslySetInnerHTML={{ __html: title }} />\n\n <ArrowEntry>\n <Arrow direction=\"left\" />\n <Arrow />\n </ArrowEntry>\n\n <DragAndDropAnswer\n key={index}\n className=\"answer\"\n index={index}\n promptId={id}\n correct={correctnessMap[id]}\n draggable={!isEmpty(sessionAnswer)}\n disabled={disabled}\n instanceId={instanceId}\n id={sessionAnswer.id}\n title={sessionAnswer.title}\n type={'target'}\n onRemoveChoice={() => onRemoveAnswer(id)}\n />\n </Row>\n );\n })}\n </ItemList>\n );\n }\n}\n\nexport default AnswerArea;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/answer.js
CHANGED
|
@@ -9,13 +9,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
9
9
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
10
|
var _core = require("@dnd-kit/core");
|
|
11
11
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
12
|
-
var _react =
|
|
12
|
+
var _react = _interopRequireDefault(require("react"));
|
|
13
13
|
var _debug = _interopRequireDefault(require("debug"));
|
|
14
14
|
var _styles = require("@mui/material/styles");
|
|
15
15
|
var _drag = require("@pie-lib/drag");
|
|
16
16
|
var _lodashEs = require("lodash-es");
|
|
17
17
|
var _renderUi = require("@pie-lib/render-ui");
|
|
18
|
-
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
19
18
|
const log = (0, _debug.default)('pie-elements:match-title:answer');
|
|
20
19
|
const HolderNumber = (0, _styles.styled)('div')(({
|
|
21
20
|
theme
|
|
@@ -49,15 +48,15 @@ Holder.propTypes = {
|
|
|
49
48
|
type: _propTypes.default.string
|
|
50
49
|
};
|
|
51
50
|
const AnswerContentContainer = (0, _styles.styled)('div')(({
|
|
51
|
+
theme,
|
|
52
52
|
isDragging,
|
|
53
|
-
isSelected,
|
|
54
53
|
isOver,
|
|
55
54
|
disabled,
|
|
56
55
|
outcome
|
|
57
56
|
}) => ({
|
|
58
57
|
color: _renderUi.color.text(),
|
|
59
58
|
backgroundColor: _renderUi.color.white(),
|
|
60
|
-
border: `1px solid ${outcome === 'correct' ? _renderUi.color.correct() : outcome === 'incorrect' ? _renderUi.color.incorrect() :
|
|
59
|
+
border: `1px solid ${outcome === 'correct' ? _renderUi.color.correct() : outcome === 'incorrect' ? _renderUi.color.incorrect() : theme.palette.grey[400]}`,
|
|
61
60
|
cursor: disabled ? 'not-allowed' : 'pointer',
|
|
62
61
|
width: '100%',
|
|
63
62
|
padding: '10px',
|
|
@@ -65,13 +64,12 @@ const AnswerContentContainer = (0, _styles.styled)('div')(({
|
|
|
65
64
|
overflow: 'hidden',
|
|
66
65
|
transition: 'opacity 200ms linear',
|
|
67
66
|
wordBreak: 'break-word',
|
|
68
|
-
opacity:
|
|
67
|
+
opacity: isDragging && !disabled ? 0.5 : isOver && !disabled ? 0.2 : 1,
|
|
69
68
|
touchAction: 'none'
|
|
70
69
|
}));
|
|
71
70
|
const AnswerContent = props => {
|
|
72
71
|
const {
|
|
73
72
|
isDragging,
|
|
74
|
-
isSelected,
|
|
75
73
|
isOver,
|
|
76
74
|
title,
|
|
77
75
|
disabled,
|
|
@@ -90,7 +88,6 @@ const AnswerContent = props => {
|
|
|
90
88
|
} else {
|
|
91
89
|
return /*#__PURE__*/_react.default.createElement(AnswerContentContainer, {
|
|
92
90
|
isDragging: isDragging,
|
|
93
|
-
isSelected: isSelected,
|
|
94
91
|
isOver: isOver,
|
|
95
92
|
disabled: disabled,
|
|
96
93
|
outcome: outcome,
|
|
@@ -142,7 +139,6 @@ class Answer extends _react.default.Component {
|
|
|
142
139
|
id,
|
|
143
140
|
title,
|
|
144
141
|
isDragging = false,
|
|
145
|
-
isSelected = false,
|
|
146
142
|
className,
|
|
147
143
|
disabled,
|
|
148
144
|
isOver = false,
|
|
@@ -160,7 +156,6 @@ class Answer extends _react.default.Component {
|
|
|
160
156
|
isOver: isOver,
|
|
161
157
|
empty: (0, _lodashEs.isEmpty)(title),
|
|
162
158
|
isDragging: isDragging,
|
|
163
|
-
isSelected: isSelected,
|
|
164
159
|
disabled: disabled,
|
|
165
160
|
type: type
|
|
166
161
|
}));
|
|
@@ -170,7 +165,6 @@ exports.Answer = Answer;
|
|
|
170
165
|
(0, _defineProperty2.default)(Answer, "propTypes", {
|
|
171
166
|
className: _propTypes.default.string,
|
|
172
167
|
isDragging: _propTypes.default.bool,
|
|
173
|
-
isSelected: _propTypes.default.bool,
|
|
174
168
|
id: _propTypes.default.any,
|
|
175
169
|
title: _propTypes.default.string,
|
|
176
170
|
isOver: _propTypes.default.bool,
|
|
@@ -186,29 +180,11 @@ function DragAndDropAnswer(props) {
|
|
|
186
180
|
promptId,
|
|
187
181
|
draggable = true,
|
|
188
182
|
disabled = false,
|
|
189
|
-
type
|
|
190
|
-
selectedAnswer,
|
|
191
|
-
onSelectClick,
|
|
192
|
-
onPlacementClick
|
|
183
|
+
type
|
|
193
184
|
} = props;
|
|
194
185
|
const dragId = `${type || 'answer'}-${id}`;
|
|
195
186
|
// droppable only if promptId exists
|
|
196
187
|
const dropId = promptId !== undefined && promptId !== null ? `drop-${promptId}` : undefined;
|
|
197
|
-
|
|
198
|
-
// Built once and reused for both dnd-kit's own data and the click handlers below, so
|
|
199
|
-
// a click carries exactly the same shape dnd-kit's onDragStart/onDragEnd would.
|
|
200
|
-
const activeData = {
|
|
201
|
-
type: type || 'answer',
|
|
202
|
-
id,
|
|
203
|
-
instanceId,
|
|
204
|
-
value: props.title,
|
|
205
|
-
promptId
|
|
206
|
-
};
|
|
207
|
-
const dropZoneData = dropId ? {
|
|
208
|
-
type: 'drop-zone',
|
|
209
|
-
promptId,
|
|
210
|
-
instanceId
|
|
211
|
-
} : undefined;
|
|
212
188
|
const {
|
|
213
189
|
attributes,
|
|
214
190
|
listeners,
|
|
@@ -218,138 +194,63 @@ function DragAndDropAnswer(props) {
|
|
|
218
194
|
isDragging
|
|
219
195
|
} = (0, _core.useDraggable)({
|
|
220
196
|
id: dragId,
|
|
221
|
-
data:
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
// reachable/interactive, leaving the outer wrapper (for an empty drop-zone) or
|
|
230
|
-
// nothing (for a disabled choice) as the sole stop.
|
|
231
|
-
attributes: {
|
|
232
|
-
tabIndex: draggable && !disabled ? 0 : -1
|
|
233
|
-
}
|
|
197
|
+
data: {
|
|
198
|
+
type: type || 'answer',
|
|
199
|
+
id,
|
|
200
|
+
instanceId,
|
|
201
|
+
value: props.title,
|
|
202
|
+
promptId
|
|
203
|
+
},
|
|
204
|
+
disabled: !draggable || disabled
|
|
234
205
|
});
|
|
235
206
|
const droppable = (0, _core.useDroppable)({
|
|
236
207
|
id: dropId,
|
|
237
|
-
data:
|
|
208
|
+
data: dropId ? {
|
|
209
|
+
type: 'drop-zone',
|
|
210
|
+
promptId,
|
|
211
|
+
instanceId
|
|
212
|
+
} : undefined,
|
|
238
213
|
disabled: disabled || !dropId
|
|
239
214
|
});
|
|
240
215
|
const setDropRef = droppable.setNodeRef;
|
|
241
216
|
const isOver = droppable.isOver;
|
|
242
217
|
|
|
243
|
-
// dnd-kit's own isOver only reflects real collision detection during an active drag,
|
|
244
|
-
// so it stays false while an answer is merely click-selected (no drag in progress).
|
|
245
|
-
// Track hovering locally and fold it into the same isOver signal used everywhere
|
|
246
|
-
// below, so hovering a response area while something is selected gets the exact same
|
|
247
|
-
// treatment as hovering it during a real drag — one code path, no duplicated CSS.
|
|
248
|
-
const [isHovered, setIsHovered] = (0, _react.useState)(false);
|
|
249
|
-
const hasSelection = !!selectedAnswer;
|
|
250
|
-
const showsHoverEffect = isOver || hasSelection && isHovered && !disabled;
|
|
251
|
-
const isSelected = !!selectedAnswer && selectedAnswer.type === activeData.type && selectedAnswer.id === activeData.id && selectedAnswer.promptId === activeData.promptId;
|
|
252
|
-
|
|
253
218
|
// compute style: apply transform to the element that actually moves
|
|
254
219
|
const transformStyle = transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined;
|
|
255
220
|
|
|
256
221
|
// If this item is a drop-zone (prompt slot), we render an outer droppable wrapper.
|
|
257
|
-
//
|
|
258
|
-
// ("drop-{promptId}"), so it must stay untransformed — applying the drag transform
|
|
259
|
-
// there would make the slot's own droppable rect chase the dragged item during the
|
|
260
|
-
// drag, corrupting collision/keyboard-navigation results. The transform belongs on
|
|
261
|
-
// the inner draggable node instead.
|
|
222
|
+
// For droppable wrapper we apply style to the outer wrapper
|
|
262
223
|
if (dropId) {
|
|
263
|
-
const handleResponseAreaClick = () => {
|
|
264
|
-
if (disabled) return;
|
|
265
|
-
if (isSelected) {
|
|
266
|
-
// Clicking the already-selected placed answer again deselects it, same as
|
|
267
|
-
// for a choice in the pool.
|
|
268
|
-
onSelectClick?.(activeData);
|
|
269
|
-
} else if (selectedAnswer) {
|
|
270
|
-
// Something else is selected — place it here, same whether this area is
|
|
271
|
-
// currently empty or already occupied.
|
|
272
|
-
onPlacementClick?.(dropZoneData);
|
|
273
|
-
} else if (draggable) {
|
|
274
|
-
// Nothing selected yet, and this response area holds an answer — clicking it
|
|
275
|
-
// selects that answer for moving elsewhere, the same way Tab+Space/Enter does.
|
|
276
|
-
onSelectClick?.(activeData);
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
// Empty response area clicked with nothing selected: nothing to place or select.
|
|
280
|
-
};
|
|
281
|
-
|
|
282
|
-
// An empty response area isn't draggable, so dnd-kit's own attributes (only
|
|
283
|
-
// applied to the inner node, and only when draggable) never make it tabbable —
|
|
284
|
-
// this outer wrapper needs its own focus/activation handling so "select a choice,
|
|
285
|
-
// then Tab to a response area and press Space/Enter" works even when the area is
|
|
286
|
-
// empty. This is independent of, and doesn't change, the existing in-drag
|
|
287
|
-
// Tab-cycling (that's driven by an active dnd-kit drag, not native focus).
|
|
288
|
-
//
|
|
289
|
-
// Only made a native Tab stop when NOT draggable (i.e. empty): when the target is
|
|
290
|
-
// filled, the inner node is already independently tabbable via dnd-kit's own
|
|
291
|
-
// attributes for the existing pick-up-to-move gesture, and adding a second,
|
|
292
|
-
// outer Tab stop for the same visual tile would add an extra stop to the existing
|
|
293
|
-
// Tab order. Placing into an occupied area is still fully reachable by mouse click
|
|
294
|
-
// here, or by the existing keyboard drag flow (Tab+Space/Enter on the choice,
|
|
295
|
-
// Tab-cycle to the occupied target, Space/Enter to swap).
|
|
296
|
-
const isNativeTabStop = !draggable && !disabled;
|
|
297
|
-
const handleResponseAreaKeyDown = e => {
|
|
298
|
-
if (e.code === 'Space' || e.code === 'Enter') {
|
|
299
|
-
e.preventDefault();
|
|
300
|
-
handleResponseAreaClick();
|
|
301
|
-
}
|
|
302
|
-
};
|
|
303
224
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
304
225
|
ref: setDropRef,
|
|
305
|
-
role: "button",
|
|
306
|
-
tabIndex: isNativeTabStop ? 0 : -1,
|
|
307
|
-
onClick: handleResponseAreaClick,
|
|
308
|
-
onKeyDown: isNativeTabStop ? handleResponseAreaKeyDown : undefined,
|
|
309
|
-
onMouseEnter: () => setIsHovered(true),
|
|
310
|
-
onMouseLeave: () => setIsHovered(false),
|
|
311
226
|
style: {
|
|
312
227
|
flex: 1,
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
228
|
+
transform: transformStyle,
|
|
229
|
+
transition,
|
|
230
|
+
opacity: isDragging ? 0.5 : 1,
|
|
231
|
+
backgroundColor: isOver ? 'rgba(0,0,0,0.05)' : 'transparent'
|
|
316
232
|
}
|
|
317
233
|
}, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
|
|
318
234
|
ref: setDragRef
|
|
319
|
-
}, listeners, attributes, {
|
|
320
|
-
style: {
|
|
321
|
-
transform: transformStyle,
|
|
322
|
-
transition
|
|
323
|
-
}
|
|
324
|
-
}), /*#__PURE__*/_react.default.createElement(Answer, (0, _extends2.default)({}, props, {
|
|
235
|
+
}, listeners, attributes), /*#__PURE__*/_react.default.createElement(Answer, (0, _extends2.default)({}, props, {
|
|
325
236
|
isDragging: isDragging,
|
|
326
|
-
|
|
327
|
-
isOver: showsHoverEffect
|
|
237
|
+
isOver: isOver
|
|
328
238
|
}))));
|
|
329
239
|
}
|
|
330
|
-
const handleChoiceClick = e => {
|
|
331
|
-
if (disabled) {
|
|
332
|
-
return;
|
|
333
|
-
}
|
|
334
|
-
e.stopPropagation();
|
|
335
|
-
onSelectClick?.(activeData);
|
|
336
|
-
};
|
|
337
240
|
|
|
338
241
|
// if there is NO dropId (this is a choice / draggable-only), render only draggable node and apply transform to it.
|
|
339
242
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
|
|
340
243
|
ref: setDragRef
|
|
341
244
|
}, listeners, attributes, {
|
|
342
|
-
onClick: handleChoiceClick,
|
|
343
245
|
style: {
|
|
344
246
|
transform: transformStyle,
|
|
345
247
|
transition,
|
|
346
248
|
cursor: disabled ? 'not-allowed' : 'grab',
|
|
347
|
-
opacity: isDragging
|
|
249
|
+
opacity: isDragging ? 0.5 : 1,
|
|
348
250
|
touchAction: draggable && !disabled ? 'none' : 'auto'
|
|
349
251
|
}
|
|
350
252
|
}), /*#__PURE__*/_react.default.createElement(Answer, (0, _extends2.default)({}, props, {
|
|
351
253
|
isDragging: isDragging,
|
|
352
|
-
isSelected: isSelected,
|
|
353
254
|
isOver: false
|
|
354
255
|
})));
|
|
355
256
|
}
|
|
@@ -360,10 +261,7 @@ DragAndDropAnswer.propTypes = {
|
|
|
360
261
|
title: _propTypes.default.string,
|
|
361
262
|
draggable: _propTypes.default.bool,
|
|
362
263
|
disabled: _propTypes.default.bool,
|
|
363
|
-
type: _propTypes.default.string
|
|
364
|
-
selectedAnswer: _propTypes.default.object,
|
|
365
|
-
onSelectClick: _propTypes.default.func,
|
|
366
|
-
onPlacementClick: _propTypes.default.func
|
|
264
|
+
type: _propTypes.default.string
|
|
367
265
|
};
|
|
368
266
|
var _default = exports.default = DragAndDropAnswer;
|
|
369
267
|
//# sourceMappingURL=answer.js.map
|