@pie-element/match-list 7.2.0 → 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 +27 -32
- 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 +26 -117
- 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 -147
- package/lib/keyboard-coordinates.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,64 +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
|
-
|
|
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
|
-
|
|
9
|
-
|
|
10
|
-
- move [@pie-lib](https://github.com/pie-lib) deps back to latest, off next prereleases PIE-927 ([a53e012](https://github.com/pie-framework/pie-elements/commit/a53e0127eb4ac95ece54e1e2bd669ae4974f4251))
|
|
11
|
-
- **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)
|
|
12
|
-
|
|
13
|
-
### Features
|
|
14
|
-
|
|
15
|
-
- bump libs PIE-856, PIE-681, PIE-927 ([cb26d7a](https://github.com/pie-framework/pie-elements/commit/cb26d7afa6c99522533c321d5ff8ce3148a66e9e))
|
|
8
|
+
**Note:** Version bump only for package @pie-element/match-list
|
|
16
9
|
|
|
17
|
-
|
|
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)
|
|
18
11
|
|
|
19
12
|
**Note:** Version bump only for package @pie-element/match-list
|
|
20
13
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
### Bug Fixes
|
|
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)
|
|
24
15
|
|
|
25
|
-
|
|
26
|
-
- **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))
|
|
16
|
+
**Note:** Version bump only for package @pie-element/match-list
|
|
27
17
|
|
|
28
|
-
|
|
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)
|
|
29
19
|
|
|
30
20
|
**Note:** Version bump only for package @pie-element/match-list
|
|
31
21
|
|
|
32
|
-
|
|
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)
|
|
33
23
|
|
|
34
|
-
|
|
24
|
+
**Note:** Version bump only for package @pie-element/match-list
|
|
35
25
|
|
|
36
|
-
|
|
37
|
-
- sync libs versions ([48b5be9](https://github.com/pie-framework/pie-elements/commit/48b5be9559eb5b5235ca05f51c5f0161032a7041))
|
|
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)
|
|
38
27
|
|
|
39
|
-
|
|
28
|
+
**Note:** Version bump only for package @pie-element/match-list
|
|
40
29
|
|
|
41
|
-
|
|
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)
|
|
42
31
|
|
|
43
|
-
|
|
32
|
+
**Note:** Version bump only for package @pie-element/match-list
|
|
44
33
|
|
|
45
|
-
|
|
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)
|
|
46
35
|
|
|
47
|
-
|
|
36
|
+
**Note:** Version bump only for package @pie-element/match-list
|
|
48
37
|
|
|
49
|
-
|
|
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)
|
|
50
39
|
|
|
51
|
-
|
|
40
|
+
**Note:** Version bump only for package @pie-element/match-list
|
|
52
41
|
|
|
53
|
-
|
|
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)
|
|
54
43
|
|
|
55
|
-
|
|
44
|
+
**Note:** Version bump only for package @pie-element/match-list
|
|
56
45
|
|
|
57
|
-
|
|
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)
|
|
58
47
|
|
|
59
48
|
**Note:** Version bump only for package @pie-element/match-list
|
|
60
49
|
|
|
61
|
-
|
|
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)
|
|
62
51
|
|
|
63
|
-
|
|
52
|
+
### Bug Fixes
|
|
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))
|
|
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))
|
|
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))
|
|
64
59
|
|
|
65
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)
|
|
66
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,127 +194,63 @@ function DragAndDropAnswer(props) {
|
|
|
218
194
|
isDragging
|
|
219
195
|
} = (0, _core.useDraggable)({
|
|
220
196
|
id: dragId,
|
|
221
|
-
data:
|
|
197
|
+
data: {
|
|
198
|
+
type: type || 'answer',
|
|
199
|
+
id,
|
|
200
|
+
instanceId,
|
|
201
|
+
value: props.title,
|
|
202
|
+
promptId
|
|
203
|
+
},
|
|
222
204
|
disabled: !draggable || disabled
|
|
223
205
|
});
|
|
224
206
|
const droppable = (0, _core.useDroppable)({
|
|
225
207
|
id: dropId,
|
|
226
|
-
data:
|
|
208
|
+
data: dropId ? {
|
|
209
|
+
type: 'drop-zone',
|
|
210
|
+
promptId,
|
|
211
|
+
instanceId
|
|
212
|
+
} : undefined,
|
|
227
213
|
disabled: disabled || !dropId
|
|
228
214
|
});
|
|
229
215
|
const setDropRef = droppable.setNodeRef;
|
|
230
216
|
const isOver = droppable.isOver;
|
|
231
217
|
|
|
232
|
-
// dnd-kit's own isOver only reflects real collision detection during an active drag,
|
|
233
|
-
// so it stays false while an answer is merely click-selected (no drag in progress).
|
|
234
|
-
// Track hovering locally and fold it into the same isOver signal used everywhere
|
|
235
|
-
// below, so hovering a response area while something is selected gets the exact same
|
|
236
|
-
// treatment as hovering it during a real drag — one code path, no duplicated CSS.
|
|
237
|
-
const [isHovered, setIsHovered] = (0, _react.useState)(false);
|
|
238
|
-
const hasSelection = !!selectedAnswer;
|
|
239
|
-
const showsHoverEffect = isOver || hasSelection && isHovered && !disabled;
|
|
240
|
-
const isSelected = !!selectedAnswer && selectedAnswer.type === activeData.type && selectedAnswer.id === activeData.id && selectedAnswer.promptId === activeData.promptId;
|
|
241
|
-
|
|
242
218
|
// compute style: apply transform to the element that actually moves
|
|
243
219
|
const transformStyle = transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined;
|
|
244
220
|
|
|
245
221
|
// If this item is a drop-zone (prompt slot), we render an outer droppable wrapper.
|
|
246
|
-
//
|
|
247
|
-
// ("drop-{promptId}"), so it must stay untransformed — applying the drag transform
|
|
248
|
-
// there would make the slot's own droppable rect chase the dragged item during the
|
|
249
|
-
// drag, corrupting collision/keyboard-navigation results. The transform belongs on
|
|
250
|
-
// the inner draggable node instead.
|
|
222
|
+
// For droppable wrapper we apply style to the outer wrapper
|
|
251
223
|
if (dropId) {
|
|
252
|
-
const handleResponseAreaClick = () => {
|
|
253
|
-
if (disabled) return;
|
|
254
|
-
if (isSelected) {
|
|
255
|
-
// Clicking the already-selected placed answer again deselects it, same as
|
|
256
|
-
// for a choice in the pool.
|
|
257
|
-
onSelectClick?.(activeData);
|
|
258
|
-
} else if (selectedAnswer) {
|
|
259
|
-
// Something else is selected — place it here, same whether this area is
|
|
260
|
-
// currently empty or already occupied.
|
|
261
|
-
onPlacementClick?.(dropZoneData);
|
|
262
|
-
} else if (draggable) {
|
|
263
|
-
// Nothing selected yet, and this response area holds an answer — clicking it
|
|
264
|
-
// selects that answer for moving elsewhere, the same way Tab+Space/Enter does.
|
|
265
|
-
onSelectClick?.(activeData);
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
// Empty response area clicked with nothing selected: nothing to place or select.
|
|
269
|
-
};
|
|
270
|
-
|
|
271
|
-
// An empty response area isn't draggable, so dnd-kit's own attributes (only
|
|
272
|
-
// applied to the inner node, and only when draggable) never make it tabbable —
|
|
273
|
-
// this outer wrapper needs its own focus/activation handling so "select a choice,
|
|
274
|
-
// then Tab to a response area and press Space/Enter" works even when the area is
|
|
275
|
-
// empty. This is independent of, and doesn't change, the existing in-drag
|
|
276
|
-
// Tab-cycling (that's driven by an active dnd-kit drag, not native focus).
|
|
277
|
-
//
|
|
278
|
-
// Only made a native Tab stop when NOT draggable (i.e. empty): when the target is
|
|
279
|
-
// filled, the inner node is already independently tabbable via dnd-kit's own
|
|
280
|
-
// attributes for the existing pick-up-to-move gesture, and adding a second,
|
|
281
|
-
// outer Tab stop for the same visual tile would add an extra stop to the existing
|
|
282
|
-
// Tab order. Placing into an occupied area is still fully reachable by mouse click
|
|
283
|
-
// here, or by the existing keyboard drag flow (Tab+Space/Enter on the choice,
|
|
284
|
-
// Tab-cycle to the occupied target, Space/Enter to swap).
|
|
285
|
-
const isNativeTabStop = !draggable && !disabled;
|
|
286
|
-
const handleResponseAreaKeyDown = e => {
|
|
287
|
-
if (e.code === 'Space' || e.code === 'Enter') {
|
|
288
|
-
e.preventDefault();
|
|
289
|
-
handleResponseAreaClick();
|
|
290
|
-
}
|
|
291
|
-
};
|
|
292
224
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
293
225
|
ref: setDropRef,
|
|
294
|
-
role: "button",
|
|
295
|
-
tabIndex: isNativeTabStop ? 0 : -1,
|
|
296
|
-
onClick: handleResponseAreaClick,
|
|
297
|
-
onKeyDown: isNativeTabStop ? handleResponseAreaKeyDown : undefined,
|
|
298
|
-
onMouseEnter: () => setIsHovered(true),
|
|
299
|
-
onMouseLeave: () => setIsHovered(false),
|
|
300
226
|
style: {
|
|
301
227
|
flex: 1,
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
228
|
+
transform: transformStyle,
|
|
229
|
+
transition,
|
|
230
|
+
opacity: isDragging ? 0.5 : 1,
|
|
231
|
+
backgroundColor: isOver ? 'rgba(0,0,0,0.05)' : 'transparent'
|
|
305
232
|
}
|
|
306
233
|
}, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
|
|
307
234
|
ref: setDragRef
|
|
308
|
-
}, listeners, attributes, {
|
|
309
|
-
style: {
|
|
310
|
-
transform: transformStyle,
|
|
311
|
-
transition
|
|
312
|
-
}
|
|
313
|
-
}), /*#__PURE__*/_react.default.createElement(Answer, (0, _extends2.default)({}, props, {
|
|
235
|
+
}, listeners, attributes), /*#__PURE__*/_react.default.createElement(Answer, (0, _extends2.default)({}, props, {
|
|
314
236
|
isDragging: isDragging,
|
|
315
|
-
|
|
316
|
-
isOver: showsHoverEffect
|
|
237
|
+
isOver: isOver
|
|
317
238
|
}))));
|
|
318
239
|
}
|
|
319
|
-
const handleChoiceClick = e => {
|
|
320
|
-
if (disabled) {
|
|
321
|
-
return;
|
|
322
|
-
}
|
|
323
|
-
e.stopPropagation();
|
|
324
|
-
onSelectClick?.(activeData);
|
|
325
|
-
};
|
|
326
240
|
|
|
327
241
|
// if there is NO dropId (this is a choice / draggable-only), render only draggable node and apply transform to it.
|
|
328
242
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
|
|
329
243
|
ref: setDragRef
|
|
330
244
|
}, listeners, attributes, {
|
|
331
|
-
onClick: handleChoiceClick,
|
|
332
245
|
style: {
|
|
333
246
|
transform: transformStyle,
|
|
334
247
|
transition,
|
|
335
248
|
cursor: disabled ? 'not-allowed' : 'grab',
|
|
336
|
-
opacity: isDragging
|
|
249
|
+
opacity: isDragging ? 0.5 : 1,
|
|
337
250
|
touchAction: draggable && !disabled ? 'none' : 'auto'
|
|
338
251
|
}
|
|
339
252
|
}), /*#__PURE__*/_react.default.createElement(Answer, (0, _extends2.default)({}, props, {
|
|
340
253
|
isDragging: isDragging,
|
|
341
|
-
isSelected: isSelected,
|
|
342
254
|
isOver: false
|
|
343
255
|
})));
|
|
344
256
|
}
|
|
@@ -349,10 +261,7 @@ DragAndDropAnswer.propTypes = {
|
|
|
349
261
|
title: _propTypes.default.string,
|
|
350
262
|
draggable: _propTypes.default.bool,
|
|
351
263
|
disabled: _propTypes.default.bool,
|
|
352
|
-
type: _propTypes.default.string
|
|
353
|
-
selectedAnswer: _propTypes.default.object,
|
|
354
|
-
onSelectClick: _propTypes.default.func,
|
|
355
|
-
onPlacementClick: _propTypes.default.func
|
|
264
|
+
type: _propTypes.default.string
|
|
356
265
|
};
|
|
357
266
|
var _default = exports.default = DragAndDropAnswer;
|
|
358
267
|
//# sourceMappingURL=answer.js.map
|