@pie-element/inline-dropdown 5.12.0 → 5.12.1-next.1

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.
@@ -1,731 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- 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
-
22
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
23
-
24
- var _react = _interopRequireDefault(require("react"));
25
-
26
- var _reactDom = _interopRequireDefault(require("react-dom"));
27
-
28
- var _propTypes = _interopRequireDefault(require("prop-types"));
29
-
30
- var _editableHtml = require("@pie-lib/pie-toolbox/editable-html");
31
-
32
- var _configUi = require("@pie-lib/pie-toolbox/config-ui");
33
-
34
- var _mathRenderingAccessible = require("@pie-lib/pie-toolbox/math-rendering-accessible");
35
-
36
- var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
37
-
38
- var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
39
-
40
- var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
41
-
42
- var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
43
-
44
- var _reduce = _interopRequireDefault(require("lodash/reduce"));
45
-
46
- var _max = _interopRequireDefault(require("lodash/max"));
47
-
48
- var _styles = require("@material-ui/core/styles");
49
-
50
- var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
51
-
52
- var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
53
-
54
- var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));
55
-
56
- var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/ExpansionPanelSummary"));
57
-
58
- var _ExpansionPanelDetails = _interopRequireDefault(require("@material-ui/core/ExpansionPanelDetails"));
59
-
60
- var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
61
-
62
- var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
63
-
64
- var _inlineDropdownToolbar = _interopRequireDefault(require("./inline-dropdown-toolbar"));
65
-
66
- var _utils = require("./utils");
67
-
68
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
69
-
70
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
71
-
72
- 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); }; }
73
-
74
- 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; } }
75
-
76
- var toggle = _configUi.settings.toggle,
77
- Panel = _configUi.settings.Panel,
78
- dropdown = _configUi.settings.dropdown;
79
-
80
- var styles = function styles(theme) {
81
- return {
82
- promptHolder: {
83
- width: '100%',
84
- paddingTop: theme.spacing.unit * 2,
85
- marginBottom: theme.spacing.unit * 2
86
- },
87
- markup: {
88
- minHeight: '100px',
89
- width: '100%',
90
- '& [data-slate-editor="true"]': {
91
- minHeight: '100px'
92
- }
93
- },
94
- choiceConfiguration: {
95
- paddingTop: theme.spacing.unit * 2,
96
- paddingBottom: theme.spacing.unit * 2
97
- },
98
- text: {
99
- fontSize: theme.typography.fontSize + 2,
100
- marginRight: theme.spacing.unit
101
- },
102
- rationaleLabel: {
103
- display: 'flex',
104
- whiteSpace: 'break-spaces'
105
- },
106
- rationaleChoices: {
107
- marginBottom: theme.spacing.unit * 2.5
108
- },
109
- responseArea: {
110
- paddingBottom: theme.spacing.unit * 2.5
111
- },
112
- panelDetails: {
113
- display: 'block',
114
- paddingTop: 0,
115
- paddingBottom: 0
116
- },
117
- flexContainer: {
118
- display: 'flex',
119
- alignItems: 'center',
120
- marginBottom: theme.spacing.unit
121
- },
122
- tooltip: {
123
- fontSize: theme.typography.fontSize - 2,
124
- whiteSpace: 'pre',
125
- maxWidth: '500px'
126
- },
127
- errorText: {
128
- fontSize: theme.typography.fontSize - 2,
129
- color: theme.palette.error.main,
130
- paddingTop: theme.spacing.unit
131
- }
132
- };
133
- };
134
-
135
- var createElementFromHTML = function createElementFromHTML(htmlString) {
136
- var div = document.createElement('div');
137
- div.innerHTML = (htmlString || '').trim();
138
- return div;
139
- };
140
-
141
- var Main = /*#__PURE__*/function (_React$Component) {
142
- (0, _inherits2["default"])(Main, _React$Component);
143
-
144
- var _super = _createSuper(Main);
145
-
146
- function Main() {
147
- var _this;
148
-
149
- (0, _classCallCheck2["default"])(this, Main);
150
-
151
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
152
- args[_key] = arguments[_key];
153
- }
154
-
155
- _this = _super.call.apply(_super, [this].concat(args));
156
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
157
- warning: {
158
- open: false
159
- }
160
- });
161
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onModelChange", function (newVal) {
162
- _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), newVal));
163
- });
164
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPromptChanged", function (prompt) {
165
- _this.onModelChange({
166
- prompt: prompt
167
- });
168
- });
169
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onRationaleChanged", function (rationale) {
170
- _this.onModelChange({
171
- rationale: rationale
172
- });
173
- });
174
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChoiceRationaleChanged", function (index, choice) {
175
- var model = _this.props.model;
176
- var indexOfChoice = model.choices && model.choices[index] && model.choices[index].findIndex(function (elem) {
177
- return elem.label === choice.label && elem.value === choice.value;
178
- });
179
- model.choices[index] && model.choices[index].splice(indexOfChoice, 1, choice);
180
-
181
- _this.onModelChange(model);
182
- });
183
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onTeacherInstructionsChanged", function (teacherInstructions) {
184
- _this.onModelChange({
185
- teacherInstructions: teacherInstructions
186
- });
187
- });
188
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMarkupChanged", function (slateMarkup) {
189
- _this.onModelChange({
190
- slateMarkup: slateMarkup
191
- });
192
- });
193
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onCheck", function (callback) {
194
- _this.setState({
195
- warning: {
196
- open: true,
197
- text: 'Response areas with under 2 options or with no correct answers will be discarded.',
198
- onClose: function onClose() {
199
- _this.setState({
200
- warning: {
201
- open: false
202
- }
203
- });
204
- },
205
- onConfirm: function onConfirm() {
206
- _this.setState({
207
- warning: {
208
- open: false
209
- }
210
- }, callback);
211
- }
212
- }
213
- });
214
- });
215
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (markup) {
216
- var respAreaChoices = _this.state.respAreaChoices;
217
- var domMarkup = createElementFromHTML(markup);
218
- var allRespAreas = domMarkup.querySelectorAll('[data-type="inline_dropdown"]');
219
- var allChoices = {};
220
- allRespAreas.forEach(function (el) {
221
- allChoices[el.dataset.index] = el.dataset.value || '';
222
- });
223
- var existingRespAreaChoices = (0, _reduce["default"])(respAreaChoices, function (obj, choices, key) {
224
- if (!(0, _isUndefined["default"])(allChoices[key])) {
225
- obj[key] = respAreaChoices[key];
226
- }
227
-
228
- return obj;
229
- }, {});
230
- var newRespAreaChoices = {};
231
- var shouldWarn = false;
232
- allRespAreas.forEach(function (el, index) {
233
- var newChoices = existingRespAreaChoices[el.dataset.index] || [];
234
-
235
- if (newChoices.length < 2 || !newChoices.find(function (c) {
236
- return c.correct;
237
- })) {
238
- el.remove();
239
- shouldWarn = true;
240
- } else {
241
- newRespAreaChoices[index] = existingRespAreaChoices[el.dataset.index] || [];
242
- el.dataset.index = index;
243
- }
244
- });
245
-
246
- if (shouldWarn) {
247
- _this.setState({
248
- warning: {
249
- open: true,
250
- text: 'Response areas with under 2 options or with no correct answers will be discarded.',
251
- onClose: function onClose() {
252
- _this.setState({
253
- warning: {
254
- open: false
255
- }
256
- });
257
- },
258
- onConfirm: function onConfirm() {
259
- _this.setState({
260
- warning: {
261
- open: false
262
- }
263
- }, function () {
264
- return _this.onModelChange({
265
- choices: (0, _cloneDeep["default"])(newRespAreaChoices),
266
- slateMarkup: domMarkup.innerHTML
267
- });
268
- });
269
- }
270
- }
271
- });
272
- } else {
273
- _this.onModelChange({
274
- choices: (0, _cloneDeep["default"])(newRespAreaChoices),
275
- slateMarkup: domMarkup.innerHTML
276
- });
277
- }
278
- });
279
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onAddChoice", function (index, label, choiceIndex) {
280
- var _respAreaChoices$inde;
281
-
282
- var respAreaChoices = _this.state.respAreaChoices;
283
- var maxResponseAreaChoices = _this.props.configuration.maxResponseAreaChoices;
284
-
285
- if (respAreaChoices[index] && respAreaChoices[index].length >= maxResponseAreaChoices) {
286
- _this.setState({
287
- warning: {
288
- open: true,
289
- text: "There are only ".concat(maxResponseAreaChoices, " answers allowed per choice."),
290
- onClose: undefined,
291
- onConfirm: function onConfirm() {
292
- _this.setState({
293
- warning: {
294
- open: false
295
- }
296
- });
297
- }
298
- }
299
- });
300
-
301
- return;
302
- }
303
-
304
- if (!respAreaChoices[index]) {
305
- respAreaChoices[index] = [];
306
- } // check for duplicate answer, but exclude the one that is currently edited
307
-
308
-
309
- if ((respAreaChoices[index] || []).find(function (r, idx) {
310
- return r.label === label && idx !== choiceIndex;
311
- })) {
312
- // show warning for duplicated answers
313
- _this.setState({
314
- warning: {
315
- open: true,
316
- text: 'Duplicate answers are not allowed.',
317
- onClose: undefined,
318
- onConfirm: function onConfirm() {
319
- _this.setState({
320
- warning: {
321
- open: false
322
- }
323
- });
324
- }
325
- }
326
- });
327
-
328
- return;
329
- }
330
-
331
- if (choiceIndex >= 0 && (_respAreaChoices$inde = respAreaChoices[index]) !== null && _respAreaChoices$inde !== void 0 && _respAreaChoices$inde[choiceIndex]) {
332
- // we need to update the choice label with the new value
333
- respAreaChoices[index][choiceIndex].label = label;
334
- } else {
335
- // add a new choice
336
- var value = respAreaChoices[index] && (0, _max["default"])(respAreaChoices[index].map(function (c) {
337
- return parseInt(c.value);
338
- }).filter(function (val) {
339
- return !isNaN(val);
340
- })) || 0;
341
- respAreaChoices[index].push({
342
- label: label,
343
- value: "".concat(value + 1),
344
- correct: false
345
- });
346
- }
347
-
348
- _this.onModelChange({
349
- choices: (0, _cloneDeep["default"])(respAreaChoices)
350
- });
351
- });
352
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onRemoveChoice", function (respIndex, index) {
353
- var respAreaChoices = _this.state.respAreaChoices;
354
- respAreaChoices[respIndex].splice(index, 1);
355
-
356
- _this.onModelChange({
357
- choices: (0, _cloneDeep["default"])(respAreaChoices)
358
- });
359
- });
360
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSelectChoice", function (respIndex, selectedIndex) {
361
- var respAreaChoices = _this.state.respAreaChoices;
362
- respAreaChoices[respIndex] = respAreaChoices[respIndex].map(function (choice, index) {
363
- return _objectSpread(_objectSpread({}, choice), {}, {
364
- correct: index === selectedIndex
365
- });
366
- });
367
-
368
- _this.onModelChange({
369
- choices: (0, _cloneDeep["default"])(respAreaChoices)
370
- });
371
- });
372
- return _this;
373
- }
374
-
375
- (0, _createClass2["default"])(Main, [{
376
- key: "componentDidMount",
377
- value: function componentDidMount() {
378
- var choices = this.props.model.choices;
379
- this.setState({
380
- respAreaChoices: (0, _cloneDeep["default"])(choices)
381
- });
382
- }
383
- }, {
384
- key: "UNSAFE_componentWillReceiveProps",
385
- value: function UNSAFE_componentWillReceiveProps(nProps) {
386
- var newState = {};
387
-
388
- if (!(0, _isEqual["default"])(nProps.model.choices, this.props.model.choices) || !(0, _isEqual["default"])(nProps.model.choices, this.state.respAreaChoices)) {
389
- newState.respAreaChoices = (0, _cloneDeep["default"])(nProps.model.choices);
390
- }
391
-
392
- if (!(0, _isEmpty["default"])(newState)) {
393
- this.setState(newState);
394
- }
395
- }
396
- }, {
397
- key: "componentDidUpdate",
398
- value: function componentDidUpdate() {
399
- //eslint-disable-next-line
400
- var domNode = _reactDom["default"].findDOMNode(this);
401
-
402
- (0, _mathRenderingAccessible.renderMath)(domNode);
403
- }
404
- }, {
405
- key: "render",
406
- value: function render() {
407
- var _this2 = this;
408
-
409
- var warning = this.state.warning;
410
- var _this$props = this.props,
411
- classes = _this$props.classes,
412
- model = _this$props.model,
413
- configuration = _this$props.configuration,
414
- onConfigurationChanged = _this$props.onConfigurationChanged,
415
- imageSupport = _this$props.imageSupport,
416
- uploadSoundSupport = _this$props.uploadSoundSupport;
417
-
418
- var _ref = configuration || {},
419
- _ref$baseInputConfigu = _ref.baseInputConfiguration,
420
- baseInputConfiguration = _ref$baseInputConfigu === void 0 ? {} : _ref$baseInputConfigu,
421
- _ref$choiceRationale = _ref.choiceRationale,
422
- choiceRationale = _ref$choiceRationale === void 0 ? {} : _ref$choiceRationale,
423
- _ref$contentDimension = _ref.contentDimensions,
424
- contentDimensions = _ref$contentDimension === void 0 ? {} : _ref$contentDimension,
425
- _ref$lockChoiceOrder = _ref.lockChoiceOrder,
426
- lockChoiceOrder = _ref$lockChoiceOrder === void 0 ? {} : _ref$lockChoiceOrder,
427
- maxResponseAreas = _ref.maxResponseAreas,
428
- _ref$maxImageWidth = _ref.maxImageWidth,
429
- maxImageWidth = _ref$maxImageWidth === void 0 ? {} : _ref$maxImageWidth,
430
- _ref$maxImageHeight = _ref.maxImageHeight,
431
- maxImageHeight = _ref$maxImageHeight === void 0 ? {} : _ref$maxImageHeight,
432
- _ref$partialScoring = _ref.partialScoring,
433
- partialScoring = _ref$partialScoring === void 0 ? {} : _ref$partialScoring,
434
- _ref$prompt = _ref.prompt,
435
- prompt = _ref$prompt === void 0 ? {} : _ref$prompt,
436
- _ref$rationale = _ref.rationale,
437
- rationale = _ref$rationale === void 0 ? {} : _ref$rationale,
438
- settingsPanelDisabled = _ref.settingsPanelDisabled,
439
- _ref$spellCheck = _ref.spellCheck,
440
- spellCheck = _ref$spellCheck === void 0 ? {} : _ref$spellCheck,
441
- _ref$teacherInstructi = _ref.teacherInstructions,
442
- teacherInstructions = _ref$teacherInstructi === void 0 ? {} : _ref$teacherInstructi,
443
- _ref$template = _ref.template,
444
- template = _ref$template === void 0 ? {} : _ref$template,
445
- _ref$withRubric = _ref.withRubric,
446
- withRubric = _ref$withRubric === void 0 ? {} : _ref$withRubric,
447
- _ref$mathMlOptions = _ref.mathMlOptions,
448
- mathMlOptions = _ref$mathMlOptions === void 0 ? {} : _ref$mathMlOptions,
449
- _ref$language = _ref.language,
450
- language = _ref$language === void 0 ? {} : _ref$language,
451
- _ref$languageChoices = _ref.languageChoices,
452
- languageChoices = _ref$languageChoices === void 0 ? {} : _ref$languageChoices;
453
-
454
- var _ref2 = model || {},
455
- choiceRationaleEnabled = _ref2.choiceRationaleEnabled,
456
- choices = _ref2.choices,
457
- errors = _ref2.errors,
458
- promptEnabled = _ref2.promptEnabled,
459
- rationaleEnabled = _ref2.rationaleEnabled,
460
- spellCheckEnabled = _ref2.spellCheckEnabled,
461
- teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled,
462
- toolbarEditorPosition = _ref2.toolbarEditorPosition;
463
-
464
- var _ref3 = errors || {},
465
- promptError = _ref3.prompt,
466
- rationaleError = _ref3.rationale,
467
- responseAreasError = _ref3.responseAreasError,
468
- responseAreaChoicesError = _ref3.responseAreaChoicesError,
469
- teacherInstructionsError = _ref3.teacherInstructions;
470
-
471
- var defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
472
- var defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
473
-
474
- var renderChoiceRationale = function renderChoiceRationale() {
475
- return (Object.keys(choices) || []).map(function (key, index) {
476
- return /*#__PURE__*/_react["default"].createElement("div", {
477
- key: key,
478
- className: classes.rationaleChoices
479
- }, /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], null, /*#__PURE__*/_react["default"].createElement(_ExpansionPanelSummary["default"], {
480
- expandIcon: /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], null)
481
- }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
482
- className: classes.text
483
- }, "Rationale for response area #".concat(index + 1))), /*#__PURE__*/_react["default"].createElement(_ExpansionPanelDetails["default"], {
484
- className: classes.panelDetails
485
- }, (choices[key] || []).map(function (choice) {
486
- return /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
487
- key: choice.label,
488
- label: /*#__PURE__*/_react["default"].createElement("span", {
489
- className: classes.rationaleLabel,
490
- dangerouslySetInnerHTML: {
491
- __html: "".concat(rationale.label, " for ").concat(choice.label, " (").concat(choice.correct ? 'correct' : 'incorrect', ")")
492
- }
493
- }),
494
- className: classes.promptHolder
495
- }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
496
- className: classes.prompt,
497
- markup: choice.rationale || '',
498
- spellCheck: spellCheckEnabled,
499
- onChange: function onChange(c) {
500
- return _this2.onChoiceRationaleChanged(key, _objectSpread(_objectSpread({}, choice), {}, {
501
- rationale: c
502
- }));
503
- },
504
- imageSupport: imageSupport,
505
- maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
506
- maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
507
- uploadSoundSupport: uploadSoundSupport,
508
- mathMlOptions: mathMlOptions
509
- }));
510
- }))));
511
- });
512
- };
513
-
514
- var toolbarOpts = {
515
- position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
516
- };
517
- var validationMessage = (0, _utils.generateValidationMessage)(configuration);
518
- var panelSettings = {
519
- partialScoring: partialScoring.settings && toggle(partialScoring.label),
520
- lockChoiceOrder: lockChoiceOrder.settings && toggle(lockChoiceOrder.label),
521
- 'language.enabled': language.settings && toggle(language.label, true),
522
- language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options)
523
- };
524
- var panelProperties = {
525
- teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
526
- rationaleEnabled: rationale.settings && toggle(rationale.label),
527
- choiceRationaleEnabled: choiceRationale.settings && toggle(choiceRationale.label),
528
- promptEnabled: prompt.settings && toggle(prompt.label),
529
- spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
530
- rubricEnabled: (withRubric === null || withRubric === void 0 ? void 0 : withRubric.settings) && toggle(withRubric === null || withRubric === void 0 ? void 0 : withRubric.label)
531
- };
532
-
533
- var getPluginProps = function getPluginProps() {
534
- var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
535
- return _objectSpread(_objectSpread({}, baseInputConfiguration), props);
536
- };
537
-
538
- return /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
539
- dimensions: contentDimensions,
540
- hideSettings: settingsPanelDisabled,
541
- settings: /*#__PURE__*/_react["default"].createElement(Panel, {
542
- model: model,
543
- configuration: configuration,
544
- onChangeModel: function onChangeModel(model) {
545
- return _this2.onModelChange(model);
546
- },
547
- onChangeConfiguration: function onChangeConfiguration(configuration) {
548
- return onConfigurationChanged(configuration, true);
549
- },
550
- groups: {
551
- Settings: panelSettings,
552
- Properties: panelProperties
553
- }
554
- })
555
- }, teacherInstructionsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
556
- label: teacherInstructions.label,
557
- className: classes.promptHolder
558
- }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
559
- className: classes.prompt,
560
- markup: model.teacherInstructions || '',
561
- onChange: this.onTeacherInstructionsChanged,
562
- imageSupport: imageSupport,
563
- nonEmpty: false,
564
- error: teacherInstructionsError,
565
- toolbarOpts: toolbarOpts,
566
- pluginProps: getPluginProps(teacherInstructions === null || teacherInstructions === void 0 ? void 0 : teacherInstructions.inputConfiguration),
567
- spellCheck: spellCheckEnabled,
568
- maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
569
- maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight,
570
- uploadSoundSupport: uploadSoundSupport,
571
- languageCharactersProps: [{
572
- language: 'spanish'
573
- }, {
574
- language: 'special'
575
- }],
576
- mathMlOptions: mathMlOptions
577
- }), teacherInstructionsError && /*#__PURE__*/_react["default"].createElement("div", {
578
- className: classes.errorText
579
- }, teacherInstructionsError)), promptEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
580
- label: prompt.label,
581
- className: classes.promptHolder
582
- }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
583
- className: classes.prompt,
584
- markup: model.prompt,
585
- onChange: this.onPromptChanged,
586
- imageSupport: imageSupport,
587
- nonEmpty: false,
588
- disableUnderline: true,
589
- error: promptError,
590
- toolbarOpts: toolbarOpts,
591
- pluginProps: getPluginProps(prompt === null || prompt === void 0 ? void 0 : prompt.inputConfiguration),
592
- spellCheck: spellCheckEnabled,
593
- maxImageWidth: defaultImageMaxWidth,
594
- maxImageHeight: defaultImageMaxHeight,
595
- uploadSoundSupport: uploadSoundSupport,
596
- languageCharactersProps: [{
597
- language: 'spanish'
598
- }, {
599
- language: 'special'
600
- }],
601
- mathMlOptions: mathMlOptions
602
- }), promptError && /*#__PURE__*/_react["default"].createElement("div", {
603
- className: classes.errorText
604
- }, promptError)), /*#__PURE__*/_react["default"].createElement("div", {
605
- className: classes.flexContainer
606
- }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
607
- className: classes.text
608
- }, "Define Template, Choices, and Correct Responses"), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
609
- classes: {
610
- tooltip: classes.tooltip
611
- },
612
- disableFocusListener: true,
613
- disableTouchListener: true,
614
- placement: 'right',
615
- title: validationMessage
616
- }, /*#__PURE__*/_react["default"].createElement(_Info["default"], {
617
- fontSize: 'small',
618
- color: 'primary'
619
- }))), /*#__PURE__*/_react["default"].createElement("div", {
620
- className: classes.responseArea
621
- }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
622
- pluginProps: getPluginProps(template === null || template === void 0 ? void 0 : template.inputConfiguration),
623
- activePlugins: _editableHtml.ALL_PLUGINS,
624
- toolbarOpts: {
625
- position: 'top'
626
- },
627
- responseAreaProps: {
628
- type: 'inline-dropdown',
629
- options: {
630
- duplicates: true
631
- },
632
- maxResponseAreas: maxResponseAreas,
633
- respAreaToolbar: function respAreaToolbar(node, value, onToolbarDone) {
634
- var respAreaChoices = _this2.state.respAreaChoices;
635
- return function () {
636
- return /*#__PURE__*/_react["default"].createElement(_inlineDropdownToolbar["default"], {
637
- onAddChoice: _this2.onAddChoice,
638
- onCheck: _this2.onCheck,
639
- onRemoveChoice: function onRemoveChoice(index) {
640
- return _this2.onRemoveChoice(node.data.get('index'), index);
641
- },
642
- onSelectChoice: function onSelectChoice(index) {
643
- return _this2.onSelectChoice(node.data.get('index'), index);
644
- },
645
- node: node,
646
- value: value,
647
- onToolbarDone: onToolbarDone,
648
- choices: respAreaChoices[node.data.get('index')],
649
- spellCheck: spellCheckEnabled,
650
- uploadSoundSupport: uploadSoundSupport,
651
- mathMlOptions: mathMlOptions
652
- });
653
- };
654
- }
655
- },
656
- spellCheck: spellCheckEnabled,
657
- className: classes.markup,
658
- markup: model.slateMarkup || '',
659
- onChange: this.onChange,
660
- imageSupport: imageSupport,
661
- disableImageAlignmentButtons: true,
662
- disabled: false,
663
- highlightShape: false,
664
- error: responseAreasError,
665
- uploadSoundSupport: uploadSoundSupport,
666
- languageCharactersProps: [{
667
- language: 'spanish'
668
- }, {
669
- language: 'special'
670
- }],
671
- mathMlOptions: mathMlOptions
672
- }), responseAreasError && /*#__PURE__*/_react["default"].createElement("div", {
673
- className: classes.errorText
674
- }, responseAreasError), responseAreaChoicesError && /*#__PURE__*/_react["default"].createElement("div", {
675
- className: classes.errorText
676
- }, responseAreaChoicesError)), choiceRationaleEnabled && renderChoiceRationale(), rationaleEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
677
- label: rationale.label,
678
- className: classes.promptHolder
679
- }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
680
- className: classes.prompt,
681
- markup: model.rationale || '',
682
- onChange: this.onRationaleChanged,
683
- imageSupport: imageSupport,
684
- error: rationaleError,
685
- toolbarOpts: toolbarOpts,
686
- pluginProps: getPluginProps(rationale === null || rationale === void 0 ? void 0 : rationale.inputConfiguration),
687
- spellCheck: spellCheckEnabled,
688
- maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
689
- maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
690
- uploadSoundSupport: uploadSoundSupport,
691
- languageCharactersProps: [{
692
- language: 'spanish'
693
- }, {
694
- language: 'special'
695
- }],
696
- mathMlOptions: mathMlOptions
697
- }), rationaleError && /*#__PURE__*/_react["default"].createElement("div", {
698
- className: classes.errorText
699
- }, rationaleError)), /*#__PURE__*/_react["default"].createElement(_configUi.AlertDialog, {
700
- open: warning.open,
701
- title: "Warning",
702
- text: warning.text,
703
- onClose: warning.onClose,
704
- onConfirm: warning.onConfirm
705
- }));
706
- }
707
- }]);
708
- return Main;
709
- }(_react["default"].Component);
710
-
711
- exports.Main = Main;
712
- (0, _defineProperty2["default"])(Main, "propTypes", {
713
- configuration: _propTypes["default"].object.isRequired,
714
- model: _propTypes["default"].object.isRequired,
715
- disableSidePanel: _propTypes["default"].bool,
716
- onModelChanged: _propTypes["default"].func.isRequired,
717
- onConfigurationChanged: _propTypes["default"].func.isRequired,
718
- classes: _propTypes["default"].object.isRequired,
719
- imageSupport: _propTypes["default"].shape({
720
- add: _propTypes["default"].func.isRequired,
721
- "delete": _propTypes["default"].func.isRequired
722
- }),
723
- uploadSoundSupport: _propTypes["default"].shape({
724
- add: _propTypes["default"].func.isRequired,
725
- "delete": _propTypes["default"].func.isRequired
726
- })
727
- });
728
- var Styled = (0, _styles.withStyles)(styles)(Main);
729
- var _default = Styled;
730
- exports["default"] = _default;
731
- //# sourceMappingURL=main.js.map