@pie-element/match-list 5.3.4-next.0 → 6.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/main.js CHANGED
@@ -1,189 +1,144 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
- exports.styledMain = exports["default"] = exports.Main = void 0;
9
-
10
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
11
-
12
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
13
-
14
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
15
-
16
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
17
-
18
- var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
19
-
20
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
21
-
7
+ exports.default = exports.Main = void 0;
22
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
23
-
24
9
  var _react = _interopRequireDefault(require("react"));
25
-
26
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
27
-
28
11
  var _drag = require("@pie-lib/drag");
29
-
12
+ var _core = require("@dnd-kit/core");
30
13
  var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
31
-
32
14
  var _renderUi = require("@pie-lib/render-ui");
33
-
34
- var _styles = require("@material-ui/core/styles");
35
-
15
+ var _styles = require("@mui/material/styles");
36
16
  var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
37
-
38
17
  var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
39
-
40
18
  var _findKey = _interopRequireDefault(require("lodash/findKey"));
41
-
42
19
  var _answerArea = _interopRequireDefault(require("./answer-area"));
43
-
44
20
  var _choicesList = _interopRequireDefault(require("./choices-list"));
45
-
46
- function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
47
-
48
- function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
49
-
50
- var Main = /*#__PURE__*/function (_React$Component) {
51
- (0, _inherits2["default"])(Main, _React$Component);
52
-
53
- var _super = _createSuper(Main);
54
-
55
- function Main(props) {
56
- var _this;
57
-
58
- (0, _classCallCheck2["default"])(this, Main);
59
- _this = _super.call(this, props);
60
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleShowCorrect", function () {
61
- _this.setState({
62
- showCorrectAnswer: !_this.state.showCorrectAnswer
21
+ const MainContainer = (0, _styles.styled)('div')({
22
+ display: 'flex',
23
+ flexDirection: 'column',
24
+ justifyContent: 'center',
25
+ color: _renderUi.color.text(),
26
+ backgroundColor: _renderUi.color.background()
27
+ });
28
+ class Main extends _react.default.Component {
29
+ constructor(props) {
30
+ super(props);
31
+ (0, _defineProperty2.default)(this, "onPlaceAnswer", event => {
32
+ const {
33
+ active,
34
+ over
35
+ } = event;
36
+ if (!over || !active) {
37
+ return;
38
+ }
39
+ const activeData = active.data.current;
40
+ const overData = over.data.current;
41
+ if (activeData && overData) {
42
+ const {
43
+ session,
44
+ onSessionChange,
45
+ model
46
+ } = this.props;
47
+ const {
48
+ config: {
49
+ duplicates
50
+ }
51
+ } = model;
52
+ if ((0, _isUndefined.default)(session.value)) {
53
+ session.value = {};
54
+ }
55
+ const answerId = activeData.id;
56
+ const targetPromptId = overData.promptId;
57
+
58
+ // only allow dropping choices (not already placed answers) onto drop zones
59
+ if (activeData.type === 'choice' && overData.type === 'drop-zone' && targetPromptId) {
60
+ // check if this choice is already placed somewhere
61
+ const existingPlacement = (0, _findKey.default)(session.value, val => val === answerId);
62
+ if (existingPlacement && !duplicates) {
63
+ // swap if duplicates not allowed
64
+ session.value = (0, _drag.swap)(session.value, existingPlacement, targetPromptId);
65
+ } else {
66
+ // place answer
67
+ session.value[targetPromptId] = answerId;
68
+ }
69
+ onSessionChange(session);
70
+ }
71
+ }
72
+ });
73
+ (0, _defineProperty2.default)(this, "toggleShowCorrect", () => {
74
+ this.setState({
75
+ showCorrectAnswer: !this.state.showCorrectAnswer
63
76
  });
64
77
  });
65
- _this.instanceId = (0, _uniqueId["default"])();
66
- _this.state = {
78
+ this.instanceId = (0, _uniqueId.default)();
79
+ this.state = {
67
80
  showCorrectAnswer: false
68
81
  };
69
- return _this;
70
82
  }
71
-
72
- (0, _createClass2["default"])(Main, [{
73
- key: "onRemoveAnswer",
74
- value: function onRemoveAnswer(id) {
75
- var _this$props = this.props,
76
- session = _this$props.session,
77
- onSessionChange = _this$props.onSessionChange;
78
- session.value[id] = undefined;
79
- onSessionChange(session);
80
- }
81
- }, {
82
- key: "onPlaceAnswer",
83
- value: function onPlaceAnswer(place, id) {
84
- var _this$props2 = this.props,
85
- session = _this$props2.session,
86
- onSessionChange = _this$props2.onSessionChange,
87
- model = _this$props2.model;
88
- var duplicates = model.config.duplicates;
89
-
90
- if ((0, _isUndefined["default"])(session.value)) {
91
- session.value = {};
92
- }
93
-
94
- var choiceKey = (0, _findKey["default"])(session.value, function (val) {
95
- return val === id;
96
- });
97
-
98
- if (choiceKey && !duplicates) {
99
- session.value = (0, _drag.swap)(session.value, choiceKey, place);
100
- } else {
101
- session.value[place] = id;
102
- }
103
-
104
- onSessionChange(session);
105
- }
106
- }, {
107
- key: "render",
108
- value: function render() {
109
- var _this2 = this;
110
-
111
- var showCorrectAnswer = this.state.showCorrectAnswer;
112
- var _this$props3 = this.props,
113
- classes = _this$props3.classes,
114
- model = _this$props3.model,
115
- session = _this$props3.session;
116
- var config = model.config,
117
- mode = model.mode;
118
- var prompt = config.prompt,
119
- language = config.language;
120
- return /*#__PURE__*/_react["default"].createElement("div", {
121
- className: classes.mainContainer
122
- }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
123
- className: "prompt",
124
- prompt: prompt
125
- }), /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
126
- show: mode === 'evaluate',
127
- toggled: showCorrectAnswer,
128
- onToggle: this.toggleShowCorrect,
129
- language: language
130
- }), /*#__PURE__*/_react["default"].createElement(_answerArea["default"], {
131
- instanceId: this.instanceId,
132
- model: model,
133
- session: session,
134
- onPlaceAnswer: function onPlaceAnswer(place, id) {
135
- return _this2.onPlaceAnswer(place, id);
136
- },
137
- onRemoveAnswer: function onRemoveAnswer(id) {
138
- return _this2.onRemoveAnswer(id);
139
- },
140
- disabled: mode !== 'gather',
141
- showCorrect: showCorrectAnswer
142
- }), /*#__PURE__*/_react["default"].createElement(_choicesList["default"], {
143
- instanceId: this.instanceId,
144
- model: model,
145
- session: session,
146
- disabled: mode !== 'gather',
147
- onRemoveAnswer: function onRemoveAnswer(id) {
148
- return _this2.onRemoveAnswer(id);
149
- }
150
- }), model.correctness && model.feedback && !showCorrectAnswer && /*#__PURE__*/_react["default"].createElement(_renderUi.Feedback, {
151
- correctness: model.correctness.correctness,
152
- feedback: model.feedback
153
- }));
154
- }
155
- }]);
156
- return Main;
157
- }(_react["default"].Component);
158
-
83
+ onRemoveAnswer(id) {
84
+ const {
85
+ session,
86
+ onSessionChange
87
+ } = this.props;
88
+ session.value[id] = undefined;
89
+ onSessionChange(session);
90
+ }
91
+ render() {
92
+ const {
93
+ showCorrectAnswer
94
+ } = this.state;
95
+ const {
96
+ model,
97
+ session
98
+ } = this.props;
99
+ const {
100
+ config,
101
+ mode
102
+ } = model;
103
+ const {
104
+ prompt,
105
+ language
106
+ } = config;
107
+ return /*#__PURE__*/_react.default.createElement(_core.DndContext, {
108
+ onDragEnd: this.onPlaceAnswer
109
+ }, /*#__PURE__*/_react.default.createElement(MainContainer, null, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
110
+ className: "prompt",
111
+ prompt: prompt
112
+ }), /*#__PURE__*/_react.default.createElement(_correctAnswerToggle.default, {
113
+ show: mode === 'evaluate',
114
+ toggled: showCorrectAnswer,
115
+ onToggle: this.toggleShowCorrect,
116
+ language: language
117
+ }), /*#__PURE__*/_react.default.createElement(_answerArea.default, {
118
+ instanceId: this.instanceId,
119
+ model: model,
120
+ session: session,
121
+ onRemoveAnswer: id => this.onRemoveAnswer(id),
122
+ disabled: mode !== 'gather',
123
+ showCorrect: showCorrectAnswer
124
+ }), /*#__PURE__*/_react.default.createElement(_choicesList.default, {
125
+ instanceId: this.instanceId,
126
+ model: model,
127
+ session: session,
128
+ disabled: mode !== 'gather',
129
+ onRemoveAnswer: id => this.onRemoveAnswer(id)
130
+ }), model.correctness && model.feedback && !showCorrectAnswer && /*#__PURE__*/_react.default.createElement(_renderUi.Feedback, {
131
+ correctness: model.correctness.correctness,
132
+ feedback: model.feedback
133
+ })));
134
+ }
135
+ }
159
136
  exports.Main = Main;
160
- (0, _defineProperty2["default"])(Main, "propTypes", {
161
- classes: _propTypes["default"].object,
162
- session: _propTypes["default"].object.isRequired,
163
- onSessionChange: _propTypes["default"].func,
164
- model: _propTypes["default"].object.isRequired,
165
- prompt: _propTypes["default"].string
137
+ (0, _defineProperty2.default)(Main, "propTypes", {
138
+ session: _propTypes.default.object.isRequired,
139
+ onSessionChange: _propTypes.default.func,
140
+ model: _propTypes.default.object.isRequired,
141
+ prompt: _propTypes.default.string
166
142
  });
167
-
168
- var styles = function styles() {
169
- return {
170
- mainContainer: {
171
- display: 'flex',
172
- flexDirection: 'column',
173
- justifyContent: 'center',
174
- color: _renderUi.color.text(),
175
- backgroundColor: _renderUi.color.background()
176
- },
177
- promptList: {
178
- alignItems: 'flex-start'
179
- }
180
- };
181
- };
182
-
183
- var styledMain = (0, _styles.withStyles)(styles)(Main);
184
- exports.styledMain = styledMain;
185
-
186
- var _default = (0, _drag.withDragContext)(styledMain);
187
-
188
- exports["default"] = _default;
143
+ var _default = exports.default = Main;
189
144
  //# sourceMappingURL=main.js.map
package/lib/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/main.jsx"],"names":["Main","props","setState","showCorrectAnswer","state","instanceId","id","session","onSessionChange","value","undefined","place","model","duplicates","config","choiceKey","val","classes","mode","prompt","language","mainContainer","toggleShowCorrect","onPlaceAnswer","onRemoveAnswer","correctness","feedback","React","Component","PropTypes","object","isRequired","func","string","styles","display","flexDirection","justifyContent","color","text","backgroundColor","background","promptList","alignItems","styledMain"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withDragContext, swap } from '@pie-lib/drag';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { color, Feedback, PreviewPrompt } from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport uniqueId from 'lodash/uniqueId';\nimport isUndefined from 'lodash/isUndefined';\nimport findKey from 'lodash/findKey';\nimport AnswerArea from './answer-area';\nimport ChoicesList from './choices-list';\n\nexport class Main extends React.Component {\n static propTypes = {\n classes: PropTypes.object,\n session: PropTypes.object.isRequired,\n onSessionChange: PropTypes.func,\n model: PropTypes.object.isRequired,\n prompt: PropTypes.string,\n };\n\n constructor(props) {\n super(props);\n\n this.instanceId = uniqueId();\n this.state = {\n showCorrectAnswer: false,\n };\n }\n\n onRemoveAnswer(id) {\n const { session, onSessionChange } = this.props;\n\n session.value[id] = undefined;\n\n onSessionChange(session);\n }\n\n onPlaceAnswer(place, id) {\n const { session, onSessionChange, model } = this.props;\n const {\n config: { duplicates },\n } = model;\n\n if (isUndefined(session.value)) {\n session.value = {};\n }\n\n const choiceKey = findKey(session.value, (val) => val === id);\n\n if (choiceKey && !duplicates) {\n session.value = swap(session.value, choiceKey, place);\n } else {\n session.value[place] = id;\n }\n\n onSessionChange(session);\n }\n\n toggleShowCorrect = () => {\n this.setState({ showCorrectAnswer: !this.state.showCorrectAnswer });\n };\n\n render() {\n const { showCorrectAnswer } = this.state;\n const { classes, model, session } = this.props;\n const { config, mode } = model;\n const { prompt, language } = config;\n\n return (\n <div className={classes.mainContainer}>\n <PreviewPrompt className=\"prompt\" prompt={prompt} />\n\n <CorrectAnswerToggle\n show={mode === 'evaluate'}\n toggled={showCorrectAnswer}\n onToggle={this.toggleShowCorrect}\n language={language}\n />\n <AnswerArea\n instanceId={this.instanceId}\n model={model}\n session={session}\n onPlaceAnswer={(place, id) => this.onPlaceAnswer(place, id)}\n onRemoveAnswer={(id) => this.onRemoveAnswer(id)}\n disabled={mode !== 'gather'}\n showCorrect={showCorrectAnswer}\n />\n\n <ChoicesList\n instanceId={this.instanceId}\n model={model}\n session={session}\n disabled={mode !== 'gather'}\n onRemoveAnswer={(id) => this.onRemoveAnswer(id)}\n />\n\n {model.correctness && model.feedback && !showCorrectAnswer && (\n <Feedback correctness={model.correctness.correctness} feedback={model.feedback} />\n )}\n </div>\n );\n }\n}\n\nconst styles = () => ({\n mainContainer: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n color: color.text(),\n backgroundColor: color.background(),\n },\n promptList: {\n alignItems: 'flex-start',\n },\n});\n\nexport const styledMain = withStyles(styles)(Main);\n\nexport default withDragContext(styledMain);\n"],"file":"main.js"}
1
+ {"version":3,"file":"main.js","names":["_react","_interopRequireDefault","require","_propTypes","_drag","_core","_correctAnswerToggle","_renderUi","_styles","_uniqueId","_isUndefined","_findKey","_answerArea","_choicesList","MainContainer","styled","display","flexDirection","justifyContent","color","text","backgroundColor","background","Main","React","Component","constructor","props","_defineProperty2","default","event","active","over","activeData","data","current","overData","session","onSessionChange","model","config","duplicates","isUndefined","value","answerId","id","targetPromptId","promptId","type","existingPlacement","findKey","val","swap","setState","showCorrectAnswer","state","instanceId","uniqueId","onRemoveAnswer","undefined","render","mode","prompt","language","createElement","DndContext","onDragEnd","onPlaceAnswer","PreviewPrompt","className","show","toggled","onToggle","toggleShowCorrect","disabled","showCorrect","correctness","feedback","Feedback","exports","PropTypes","object","isRequired","func","string","_default"],"sources":["../src/main.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { swap } from '@pie-lib/drag';\nimport {\n DndContext,\n} from '@dnd-kit/core';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { color, Feedback, PreviewPrompt } from '@pie-lib/render-ui';\nimport { styled } from '@mui/material/styles';\nimport uniqueId from 'lodash/uniqueId';\nimport isUndefined from 'lodash/isUndefined';\nimport findKey from 'lodash/findKey';\nimport AnswerArea from './answer-area';\nimport ChoicesList from './choices-list';\n\nconst MainContainer = styled('div')({\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n color: color.text(),\n backgroundColor: color.background(),\n});\n\nexport class Main extends React.Component {\n static propTypes = {\n session: PropTypes.object.isRequired,\n onSessionChange: PropTypes.func,\n model: PropTypes.object.isRequired,\n prompt: PropTypes.string,\n };\n\n constructor(props) {\n super(props);\n\n this.instanceId = uniqueId();\n this.state = {\n showCorrectAnswer: false,\n };\n }\n\n onRemoveAnswer(id) {\n const { session, onSessionChange } = this.props;\n\n session.value[id] = undefined;\n\n onSessionChange(session);\n }\n\n onPlaceAnswer = (event) => {\n const { active, over } = event;\n\n if (!over || !active) {\n return;\n }\n\n const activeData = active.data.current;\n const overData = over.data.current;\n\n if (activeData && overData) {\n const { session, onSessionChange, model } = this.props;\n const { config: { duplicates } } = model;\n\n if (isUndefined(session.value)) {\n session.value = {};\n }\n\n const answerId = activeData.id;\n const targetPromptId = overData.promptId;\n\n // only allow dropping choices (not already placed answers) onto drop zones\n if (activeData.type === 'choice' && overData.type === 'drop-zone' && targetPromptId) {\n // check if this choice is already placed somewhere\n const existingPlacement = findKey(session.value, (val) => val === answerId);\n\n if (existingPlacement && !duplicates) {\n // swap if duplicates not allowed\n session.value = swap(session.value, existingPlacement, targetPromptId);\n } else {\n // place answer\n session.value[targetPromptId] = answerId;\n }\n\n onSessionChange(session);\n }\n }\n };\n\n toggleShowCorrect = () => {\n this.setState({ showCorrectAnswer: !this.state.showCorrectAnswer });\n };\n\n render() {\n const { showCorrectAnswer } = this.state;\n const { model, session } = this.props;\n const { config, mode } = model;\n const { prompt, language } = config;\n\n return (\n <DndContext onDragEnd={this.onPlaceAnswer}>\n <MainContainer>\n <PreviewPrompt className=\"prompt\" prompt={prompt} />\n\n <CorrectAnswerToggle\n show={mode === 'evaluate'}\n toggled={showCorrectAnswer}\n onToggle={this.toggleShowCorrect}\n language={language}\n />\n\n <AnswerArea\n instanceId={this.instanceId}\n model={model}\n session={session}\n onRemoveAnswer={(id) => this.onRemoveAnswer(id)}\n disabled={mode !== 'gather'}\n showCorrect={showCorrectAnswer}\n />\n\n <ChoicesList\n instanceId={this.instanceId}\n model={model}\n session={session}\n disabled={mode !== 'gather'}\n onRemoveAnswer={(id) => this.onRemoveAnswer(id)}\n />\n\n {model.correctness && model.feedback && !showCorrectAnswer && (\n <Feedback correctness={model.correctness.correctness} feedback={model.feedback} />\n )}\n </MainContainer>\n </DndContext>\n );\n }\n}\n\nexport default Main;\n"],"mappings":"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","ignoreList":[]}
package/package.json CHANGED
@@ -4,31 +4,32 @@
4
4
  "access": "public"
5
5
  },
6
6
  "repository": "pie-framework/pie-elements",
7
- "version": "5.3.4-next.0+bb17c7e0a",
7
+ "version": "6.0.0-beta.0",
8
8
  "description": "",
9
9
  "scripts": {
10
10
  "test": "echo \"Error: no test specified\" && exit 1",
11
11
  "postpublish": "../../scripts/postpublish"
12
12
  },
13
13
  "dependencies": {
14
- "@material-ui/core": "^3.9.2",
15
- "@material-ui/icons": "^3.0.2",
14
+ "@dnd-kit/core": "6.1.0",
15
+ "@emotion/react": "^11.14.0",
16
+ "@emotion/style": "^0.8.0",
17
+ "@mui/icons-material": "^7.3.4",
18
+ "@mui/material": "^7.3.4",
16
19
  "@pie-framework/pie-player-events": "^0.1.0",
17
- "@pie-lib/correct-answer-toggle": "2.25.2",
18
- "@pie-lib/drag": "2.22.2",
19
- "@pie-lib/math-rendering": "3.22.1",
20
- "@pie-lib/render-ui": "4.35.2",
21
- "classnames": "^2.2.5",
20
+ "@pie-lib/correct-answer-toggle": "2.25.4-next.0",
21
+ "@pie-lib/drag": "2.22.4-next.0",
22
+ "@pie-lib/math-rendering": "3.22.3-next.0",
23
+ "@pie-lib/render-ui": "4.35.4-next.0",
22
24
  "debug": "^4.1.1",
23
25
  "lodash": "^4.17.10",
24
26
  "prop-types": "^15.6.1",
25
- "react": "^16.8.1",
26
- "react-dnd": "^14.0.5",
27
- "react-dom": "^16.8.1"
27
+ "react": "18.2.0",
28
+ "react-dom": "18.2.0"
28
29
  },
29
30
  "author": "",
30
31
  "license": "ISC",
31
- "gitHead": "bb17c7e0a54b6b5ff139075cccf1e341cc6f859f",
32
+ "gitHead": "d122562838e319cebb58d61b3eedd952fc9ad960",
32
33
  "main": "lib/index.js",
33
34
  "module": "src/index.js"
34
35
  }