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