@pie-element/ebsr 9.2.0-next.1 → 9.2.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/module/print.js DELETED
@@ -1,2299 +0,0 @@
1
- import {_dll_prop_types, _dll_react_dom, _dll_react, _dll_material_ui__core_styles, _dll_pie_lib__pie_toolbox_render_ui, _dll_material_ui__core, _dll_classnames, _dll_pie_lib__pie_toolbox_correct_answer_toggle, _dll_lodash, _dll_debug, _dll_pie_lib__pie_toolbox_math_rendering} from "../../../@pie-lib/pie-toolbox-module@1.3.3/module/index.js";
2
- function getDefaultExportFromCjs(x) {
3
- return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
4
- }
5
- function getAugmentedNamespace(n) {
6
- if (n.__esModule) return n;
7
- var a = Object.defineProperty({}, '__esModule', {
8
- value: true
9
- });
10
- Object.keys(n).forEach(function (k) {
11
- var d = Object.getOwnPropertyDescriptor(n, k);
12
- Object.defineProperty(a, k, d.get ? d : {
13
- enumerable: true,
14
- get: function () {
15
- return n[k];
16
- }
17
- });
18
- });
19
- return a;
20
- }
21
- var CSSTransition = {
22
- exports: {}
23
- };
24
- var addClass = {
25
- exports: {}
26
- };
27
- var interopRequireDefault = {
28
- exports: {}
29
- };
30
- (function (module) {
31
- function _interopRequireDefault(obj) {
32
- return obj && obj.__esModule ? obj : {
33
- "default": obj
34
- };
35
- }
36
- (module.exports = _interopRequireDefault, module.exports.__esModule = true, module.exports["default"] = module.exports);
37
- })(interopRequireDefault);
38
- getDefaultExportFromCjs(interopRequireDefault.exports);
39
- var hasClass = {
40
- exports: {}
41
- };
42
- (function (module, exports) {
43
- exports.__esModule = true;
44
- exports.default = hasClass;
45
- function hasClass(element, className) {
46
- if (element.classList) return !!className && element.classList.contains(className); else return (" " + (element.className.baseVal || element.className) + " ").indexOf(" " + className + " ") !== -1;
47
- }
48
- module.exports = exports["default"];
49
- })(hasClass, hasClass.exports);
50
- getDefaultExportFromCjs(hasClass.exports);
51
- (function (module, exports) {
52
- var _interopRequireDefault = interopRequireDefault.exports;
53
- exports.__esModule = true;
54
- exports.default = addClass;
55
- var _hasClass = _interopRequireDefault(hasClass.exports);
56
- function addClass(element, className) {
57
- if (element.classList) element.classList.add(className); else if (!(0, _hasClass.default)(element, className)) if (typeof element.className === 'string') element.className = element.className + ' ' + className; else element.setAttribute('class', (element.className && element.className.baseVal || '') + ' ' + className);
58
- }
59
- module.exports = exports["default"];
60
- })(addClass, addClass.exports);
61
- getDefaultExportFromCjs(addClass.exports);
62
- function replaceClassName(origClass, classToRemove) {
63
- return origClass.replace(new RegExp('(^|\\s)' + classToRemove + '(?:\\s|$)', 'g'), '$1').replace(/\s+/g, ' ').replace(/^\s*|\s*$/g, '');
64
- }
65
- var removeClass = function removeClass(element, className) {
66
- if (element.classList) element.classList.remove(className); else if (typeof element.className === 'string') element.className = replaceClassName(element.className, className); else element.setAttribute('class', replaceClassName(element.className && element.className.baseVal || '', className));
67
- };
68
- var Transition$1 = {};
69
- function componentWillMount() {
70
- var state = this.constructor.getDerivedStateFromProps(this.props, this.state);
71
- if (state !== null && state !== undefined) {
72
- this.setState(state);
73
- }
74
- }
75
- function componentWillReceiveProps(nextProps) {
76
- function updater(prevState) {
77
- var state = this.constructor.getDerivedStateFromProps(nextProps, prevState);
78
- return state !== null && state !== undefined ? state : null;
79
- }
80
- this.setState(updater.bind(this));
81
- }
82
- function componentWillUpdate(nextProps, nextState) {
83
- try {
84
- var prevProps = this.props;
85
- var prevState = this.state;
86
- this.props = nextProps;
87
- this.state = nextState;
88
- this.__reactInternalSnapshotFlag = true;
89
- this.__reactInternalSnapshot = this.getSnapshotBeforeUpdate(prevProps, prevState);
90
- } finally {
91
- this.props = prevProps;
92
- this.state = prevState;
93
- }
94
- }
95
- componentWillMount.__suppressDeprecationWarning = true;
96
- componentWillReceiveProps.__suppressDeprecationWarning = true;
97
- componentWillUpdate.__suppressDeprecationWarning = true;
98
- function polyfill(Component) {
99
- var prototype = Component.prototype;
100
- if (!prototype || !prototype.isReactComponent) {
101
- throw new Error('Can only polyfill class components');
102
- }
103
- if (typeof Component.getDerivedStateFromProps !== 'function' && typeof prototype.getSnapshotBeforeUpdate !== 'function') {
104
- return Component;
105
- }
106
- var foundWillMountName = null;
107
- var foundWillReceivePropsName = null;
108
- var foundWillUpdateName = null;
109
- if (typeof prototype.componentWillMount === 'function') {
110
- foundWillMountName = 'componentWillMount';
111
- } else if (typeof prototype.UNSAFE_componentWillMount === 'function') {
112
- foundWillMountName = 'UNSAFE_componentWillMount';
113
- }
114
- if (typeof prototype.componentWillReceiveProps === 'function') {
115
- foundWillReceivePropsName = 'componentWillReceiveProps';
116
- } else if (typeof prototype.UNSAFE_componentWillReceiveProps === 'function') {
117
- foundWillReceivePropsName = 'UNSAFE_componentWillReceiveProps';
118
- }
119
- if (typeof prototype.componentWillUpdate === 'function') {
120
- foundWillUpdateName = 'componentWillUpdate';
121
- } else if (typeof prototype.UNSAFE_componentWillUpdate === 'function') {
122
- foundWillUpdateName = 'UNSAFE_componentWillUpdate';
123
- }
124
- if (foundWillMountName !== null || foundWillReceivePropsName !== null || foundWillUpdateName !== null) {
125
- var componentName = Component.displayName || Component.name;
126
- var newApiName = typeof Component.getDerivedStateFromProps === 'function' ? 'getDerivedStateFromProps()' : 'getSnapshotBeforeUpdate()';
127
- throw Error('Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' + componentName + ' uses ' + newApiName + ' but also contains the following legacy lifecycles:' + (foundWillMountName !== null ? '\n ' + foundWillMountName : '') + (foundWillReceivePropsName !== null ? '\n ' + foundWillReceivePropsName : '') + (foundWillUpdateName !== null ? '\n ' + foundWillUpdateName : '') + '\n\nThe above lifecycles should be removed. Learn more about this warning here:\n' + 'https://fb.me/react-async-component-lifecycle-hooks');
128
- }
129
- if (typeof Component.getDerivedStateFromProps === 'function') {
130
- prototype.componentWillMount = componentWillMount;
131
- prototype.componentWillReceiveProps = componentWillReceiveProps;
132
- }
133
- if (typeof prototype.getSnapshotBeforeUpdate === 'function') {
134
- if (typeof prototype.componentDidUpdate !== 'function') {
135
- throw new Error('Cannot polyfill getSnapshotBeforeUpdate() for components that do not define componentDidUpdate() on the prototype');
136
- }
137
- prototype.componentWillUpdate = componentWillUpdate;
138
- var componentDidUpdate = prototype.componentDidUpdate;
139
- prototype.componentDidUpdate = function componentDidUpdatePolyfill(prevProps, prevState, maybeSnapshot) {
140
- var snapshot = this.__reactInternalSnapshotFlag ? this.__reactInternalSnapshot : maybeSnapshot;
141
- componentDidUpdate.call(this, prevProps, prevState, snapshot);
142
- };
143
- }
144
- return Component;
145
- }
146
- var reactLifecyclesCompat_es = Object.freeze({
147
- __proto__: null,
148
- polyfill: polyfill
149
- });
150
- var require$$2$2 = getAugmentedNamespace(reactLifecyclesCompat_es);
151
- var PropTypes$6 = {};
152
- const require$$0$5 = _dll_prop_types;
153
- PropTypes$6.__esModule = true;
154
- PropTypes$6.classNamesShape = PropTypes$6.timeoutsShape = void 0;
155
- var _propTypes = _interopRequireDefault$2(require$$0$5);
156
- function _interopRequireDefault$2(obj) {
157
- return obj && obj.__esModule ? obj : {
158
- default: obj
159
- };
160
- }
161
- var timeoutsShape = _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
162
- enter: _propTypes.default.number,
163
- exit: _propTypes.default.number,
164
- appear: _propTypes.default.number
165
- }).isRequired]);
166
- PropTypes$6.timeoutsShape = timeoutsShape;
167
- var classNamesShape = _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({
168
- enter: _propTypes.default.string,
169
- exit: _propTypes.default.string,
170
- active: _propTypes.default.string
171
- }), _propTypes.default.shape({
172
- enter: _propTypes.default.string,
173
- enterDone: _propTypes.default.string,
174
- enterActive: _propTypes.default.string,
175
- exit: _propTypes.default.string,
176
- exitDone: _propTypes.default.string,
177
- exitActive: _propTypes.default.string
178
- })]);
179
- PropTypes$6.classNamesShape = classNamesShape;
180
- const require$$0$4 = _dll_prop_types;
181
- const require$$1$2 = _dll_react;
182
- const require$$2$1 = _dll_react_dom;
183
- Transition$1.__esModule = true;
184
- Transition$1.default = Transition$1.EXITING = Transition$1.ENTERED = Transition$1.ENTERING = Transition$1.EXITED = Transition$1.UNMOUNTED = void 0;
185
- var PropTypes$5 = _interopRequireWildcard(require$$0$4);
186
- var _react$1 = _interopRequireDefault$1(require$$1$2);
187
- var _reactDom = _interopRequireDefault$1(require$$2$1);
188
- var _reactLifecyclesCompat = require$$2$2;
189
- var _PropTypes = PropTypes$6;
190
- function _interopRequireDefault$1(obj) {
191
- return obj && obj.__esModule ? obj : {
192
- default: obj
193
- };
194
- }
195
- function _interopRequireWildcard(obj) {
196
- if (obj && obj.__esModule) {
197
- return obj;
198
- } else {
199
- var newObj = {};
200
- if (obj != null) {
201
- for (var key in obj) {
202
- if (Object.prototype.hasOwnProperty.call(obj, key)) {
203
- var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
204
- if (desc.get || desc.set) {
205
- Object.defineProperty(newObj, key, desc);
206
- } else {
207
- newObj[key] = obj[key];
208
- }
209
- }
210
- }
211
- }
212
- newObj.default = obj;
213
- return newObj;
214
- }
215
- }
216
- function _objectWithoutPropertiesLoose(source, excluded) {
217
- if (source == null) return {};
218
- var target = {};
219
- var sourceKeys = Object.keys(source);
220
- var key, i;
221
- for (i = 0; i < sourceKeys.length; i++) {
222
- key = sourceKeys[i];
223
- if (excluded.indexOf(key) >= 0) continue;
224
- target[key] = source[key];
225
- }
226
- return target;
227
- }
228
- function _inheritsLoose(subClass, superClass) {
229
- subClass.prototype = Object.create(superClass.prototype);
230
- subClass.prototype.constructor = subClass;
231
- subClass.__proto__ = superClass;
232
- }
233
- var UNMOUNTED = 'unmounted';
234
- Transition$1.UNMOUNTED = UNMOUNTED;
235
- var EXITED = 'exited';
236
- Transition$1.EXITED = EXITED;
237
- var ENTERING = 'entering';
238
- Transition$1.ENTERING = ENTERING;
239
- var ENTERED = 'entered';
240
- Transition$1.ENTERED = ENTERED;
241
- var EXITING = 'exiting';
242
- Transition$1.EXITING = EXITING;
243
- var Transition = (function (_React$Component) {
244
- _inheritsLoose(Transition, _React$Component);
245
- function Transition(props, context) {
246
- var _this;
247
- _this = _React$Component.call(this, props, context) || this;
248
- var parentGroup = context.transitionGroup;
249
- var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;
250
- var initialStatus;
251
- _this.appearStatus = null;
252
- if (props.in) {
253
- if (appear) {
254
- initialStatus = EXITED;
255
- _this.appearStatus = ENTERING;
256
- } else {
257
- initialStatus = ENTERED;
258
- }
259
- } else {
260
- if (props.unmountOnExit || props.mountOnEnter) {
261
- initialStatus = UNMOUNTED;
262
- } else {
263
- initialStatus = EXITED;
264
- }
265
- }
266
- _this.state = {
267
- status: initialStatus
268
- };
269
- _this.nextCallback = null;
270
- return _this;
271
- }
272
- var _proto = Transition.prototype;
273
- _proto.getChildContext = function getChildContext() {
274
- return {
275
- transitionGroup: null
276
- };
277
- };
278
- Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {
279
- var nextIn = _ref.in;
280
- if (nextIn && prevState.status === UNMOUNTED) {
281
- return {
282
- status: EXITED
283
- };
284
- }
285
- return null;
286
- };
287
- _proto.componentDidMount = function componentDidMount() {
288
- this.updateStatus(true, this.appearStatus);
289
- };
290
- _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
291
- var nextStatus = null;
292
- if (prevProps !== this.props) {
293
- var status = this.state.status;
294
- if (this.props.in) {
295
- if (status !== ENTERING && status !== ENTERED) {
296
- nextStatus = ENTERING;
297
- }
298
- } else {
299
- if (status === ENTERING || status === ENTERED) {
300
- nextStatus = EXITING;
301
- }
302
- }
303
- }
304
- this.updateStatus(false, nextStatus);
305
- };
306
- _proto.componentWillUnmount = function componentWillUnmount() {
307
- this.cancelNextCallback();
308
- };
309
- _proto.getTimeouts = function getTimeouts() {
310
- var timeout = this.props.timeout;
311
- var exit, enter, appear;
312
- exit = enter = appear = timeout;
313
- if (timeout != null && typeof timeout !== 'number') {
314
- exit = timeout.exit;
315
- enter = timeout.enter;
316
- appear = timeout.appear !== undefined ? timeout.appear : enter;
317
- }
318
- return {
319
- exit: exit,
320
- enter: enter,
321
- appear: appear
322
- };
323
- };
324
- _proto.updateStatus = function updateStatus(mounting, nextStatus) {
325
- if (mounting === void 0) {
326
- mounting = false;
327
- }
328
- if (nextStatus !== null) {
329
- this.cancelNextCallback();
330
- var node = _reactDom.default.findDOMNode(this);
331
- if (nextStatus === ENTERING) {
332
- this.performEnter(node, mounting);
333
- } else {
334
- this.performExit(node);
335
- }
336
- } else if (this.props.unmountOnExit && this.state.status === EXITED) {
337
- this.setState({
338
- status: UNMOUNTED
339
- });
340
- }
341
- };
342
- _proto.performEnter = function performEnter(node, mounting) {
343
- var _this2 = this;
344
- var enter = this.props.enter;
345
- var appearing = this.context.transitionGroup ? this.context.transitionGroup.isMounting : mounting;
346
- var timeouts = this.getTimeouts();
347
- var enterTimeout = appearing ? timeouts.appear : timeouts.enter;
348
- if (!mounting && !enter) {
349
- this.safeSetState({
350
- status: ENTERED
351
- }, function () {
352
- _this2.props.onEntered(node);
353
- });
354
- return;
355
- }
356
- this.props.onEnter(node, appearing);
357
- this.safeSetState({
358
- status: ENTERING
359
- }, function () {
360
- _this2.props.onEntering(node, appearing);
361
- _this2.onTransitionEnd(node, enterTimeout, function () {
362
- _this2.safeSetState({
363
- status: ENTERED
364
- }, function () {
365
- _this2.props.onEntered(node, appearing);
366
- });
367
- });
368
- });
369
- };
370
- _proto.performExit = function performExit(node) {
371
- var _this3 = this;
372
- var exit = this.props.exit;
373
- var timeouts = this.getTimeouts();
374
- if (!exit) {
375
- this.safeSetState({
376
- status: EXITED
377
- }, function () {
378
- _this3.props.onExited(node);
379
- });
380
- return;
381
- }
382
- this.props.onExit(node);
383
- this.safeSetState({
384
- status: EXITING
385
- }, function () {
386
- _this3.props.onExiting(node);
387
- _this3.onTransitionEnd(node, timeouts.exit, function () {
388
- _this3.safeSetState({
389
- status: EXITED
390
- }, function () {
391
- _this3.props.onExited(node);
392
- });
393
- });
394
- });
395
- };
396
- _proto.cancelNextCallback = function cancelNextCallback() {
397
- if (this.nextCallback !== null) {
398
- this.nextCallback.cancel();
399
- this.nextCallback = null;
400
- }
401
- };
402
- _proto.safeSetState = function safeSetState(nextState, callback) {
403
- callback = this.setNextCallback(callback);
404
- this.setState(nextState, callback);
405
- };
406
- _proto.setNextCallback = function setNextCallback(callback) {
407
- var _this4 = this;
408
- var active = true;
409
- this.nextCallback = function (event) {
410
- if (active) {
411
- active = false;
412
- _this4.nextCallback = null;
413
- callback(event);
414
- }
415
- };
416
- this.nextCallback.cancel = function () {
417
- active = false;
418
- };
419
- return this.nextCallback;
420
- };
421
- _proto.onTransitionEnd = function onTransitionEnd(node, timeout, handler) {
422
- this.setNextCallback(handler);
423
- var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;
424
- if (!node || doesNotHaveTimeoutOrListener) {
425
- setTimeout(this.nextCallback, 0);
426
- return;
427
- }
428
- if (this.props.addEndListener) {
429
- this.props.addEndListener(node, this.nextCallback);
430
- }
431
- if (timeout != null) {
432
- setTimeout(this.nextCallback, timeout);
433
- }
434
- };
435
- _proto.render = function render() {
436
- var status = this.state.status;
437
- if (status === UNMOUNTED) {
438
- return null;
439
- }
440
- var _this$props = this.props, children = _this$props.children, childProps = _objectWithoutPropertiesLoose(_this$props, ["children"]);
441
- delete childProps.in;
442
- delete childProps.mountOnEnter;
443
- delete childProps.unmountOnExit;
444
- delete childProps.appear;
445
- delete childProps.enter;
446
- delete childProps.exit;
447
- delete childProps.timeout;
448
- delete childProps.addEndListener;
449
- delete childProps.onEnter;
450
- delete childProps.onEntering;
451
- delete childProps.onEntered;
452
- delete childProps.onExit;
453
- delete childProps.onExiting;
454
- delete childProps.onExited;
455
- if (typeof children === 'function') {
456
- return children(status, childProps);
457
- }
458
- var child = _react$1.default.Children.only(children);
459
- return _react$1.default.cloneElement(child, childProps);
460
- };
461
- return Transition;
462
- })(_react$1.default.Component);
463
- Transition.contextTypes = {
464
- transitionGroup: PropTypes$5.object
465
- };
466
- Transition.childContextTypes = {
467
- transitionGroup: function transitionGroup() {}
468
- };
469
- Transition.propTypes = {
470
- children: PropTypes$5.oneOfType([PropTypes$5.func.isRequired, PropTypes$5.element.isRequired]).isRequired,
471
- in: PropTypes$5.bool,
472
- mountOnEnter: PropTypes$5.bool,
473
- unmountOnExit: PropTypes$5.bool,
474
- appear: PropTypes$5.bool,
475
- enter: PropTypes$5.bool,
476
- exit: PropTypes$5.bool,
477
- timeout: function timeout(props) {
478
- var pt = _PropTypes.timeoutsShape;
479
- if (!props.addEndListener) pt = pt.isRequired;
480
- for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
481
- args[_key - 1] = arguments[_key];
482
- }
483
- return pt.apply(void 0, [props].concat(args));
484
- },
485
- addEndListener: PropTypes$5.func,
486
- onEnter: PropTypes$5.func,
487
- onEntering: PropTypes$5.func,
488
- onEntered: PropTypes$5.func,
489
- onExit: PropTypes$5.func,
490
- onExiting: PropTypes$5.func,
491
- onExited: PropTypes$5.func
492
- };
493
- function noop() {}
494
- Transition.defaultProps = {
495
- in: false,
496
- mountOnEnter: false,
497
- unmountOnExit: false,
498
- appear: false,
499
- enter: true,
500
- exit: true,
501
- onEnter: noop,
502
- onEntering: noop,
503
- onEntered: noop,
504
- onExit: noop,
505
- onExiting: noop,
506
- onExited: noop
507
- };
508
- Transition.UNMOUNTED = 0;
509
- Transition.EXITED = 1;
510
- Transition.ENTERING = 2;
511
- Transition.ENTERED = 3;
512
- Transition.EXITING = 4;
513
- var _default = (0, _reactLifecyclesCompat.polyfill)(Transition);
514
- Transition$1.default = _default;
515
- const require$$0$3 = _dll_prop_types;
516
- const require$$3 = _dll_react;
517
- (function (module, exports) {
518
- exports.__esModule = true;
519
- exports.default = void 0;
520
- var PropTypes = _interopRequireWildcard(require$$0$3);
521
- var _addClass = _interopRequireDefault(addClass.exports);
522
- var _removeClass = _interopRequireDefault(removeClass);
523
- var _react = _interopRequireDefault(require$$3);
524
- var _Transition = _interopRequireDefault(Transition$1);
525
- var _PropTypes = PropTypes$6;
526
- function _interopRequireDefault(obj) {
527
- return obj && obj.__esModule ? obj : {
528
- default: obj
529
- };
530
- }
531
- function _interopRequireWildcard(obj) {
532
- if (obj && obj.__esModule) {
533
- return obj;
534
- } else {
535
- var newObj = {};
536
- if (obj != null) {
537
- for (var key in obj) {
538
- if (Object.prototype.hasOwnProperty.call(obj, key)) {
539
- var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
540
- if (desc.get || desc.set) {
541
- Object.defineProperty(newObj, key, desc);
542
- } else {
543
- newObj[key] = obj[key];
544
- }
545
- }
546
- }
547
- }
548
- newObj.default = obj;
549
- return newObj;
550
- }
551
- }
552
- function _extends() {
553
- _extends = Object.assign || (function (target) {
554
- for (var i = 1; i < arguments.length; i++) {
555
- var source = arguments[i];
556
- for (var key in source) {
557
- if (Object.prototype.hasOwnProperty.call(source, key)) {
558
- target[key] = source[key];
559
- }
560
- }
561
- }
562
- return target;
563
- });
564
- return _extends.apply(this, arguments);
565
- }
566
- function _inheritsLoose(subClass, superClass) {
567
- subClass.prototype = Object.create(superClass.prototype);
568
- subClass.prototype.constructor = subClass;
569
- subClass.__proto__ = superClass;
570
- }
571
- var addClass$1 = function addClass(node, classes) {
572
- return node && classes && classes.split(' ').forEach(function (c) {
573
- return (0, _addClass.default)(node, c);
574
- });
575
- };
576
- var removeClass$1 = function removeClass(node, classes) {
577
- return node && classes && classes.split(' ').forEach(function (c) {
578
- return (0, _removeClass.default)(node, c);
579
- });
580
- };
581
- var CSSTransition = (function (_React$Component) {
582
- _inheritsLoose(CSSTransition, _React$Component);
583
- function CSSTransition() {
584
- var _this;
585
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
586
- args[_key] = arguments[_key];
587
- }
588
- _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
589
- _this.onEnter = function (node, appearing) {
590
- var _this$getClassNames = _this.getClassNames(appearing ? 'appear' : 'enter'), className = _this$getClassNames.className;
591
- _this.removeClasses(node, 'exit');
592
- addClass$1(node, className);
593
- if (_this.props.onEnter) {
594
- _this.props.onEnter(node, appearing);
595
- }
596
- };
597
- _this.onEntering = function (node, appearing) {
598
- var _this$getClassNames2 = _this.getClassNames(appearing ? 'appear' : 'enter'), activeClassName = _this$getClassNames2.activeClassName;
599
- _this.reflowAndAddClass(node, activeClassName);
600
- if (_this.props.onEntering) {
601
- _this.props.onEntering(node, appearing);
602
- }
603
- };
604
- _this.onEntered = function (node, appearing) {
605
- var appearClassName = _this.getClassNames('appear').doneClassName;
606
- var enterClassName = _this.getClassNames('enter').doneClassName;
607
- var doneClassName = appearing ? appearClassName + " " + enterClassName : enterClassName;
608
- _this.removeClasses(node, appearing ? 'appear' : 'enter');
609
- addClass$1(node, doneClassName);
610
- if (_this.props.onEntered) {
611
- _this.props.onEntered(node, appearing);
612
- }
613
- };
614
- _this.onExit = function (node) {
615
- var _this$getClassNames3 = _this.getClassNames('exit'), className = _this$getClassNames3.className;
616
- _this.removeClasses(node, 'appear');
617
- _this.removeClasses(node, 'enter');
618
- addClass$1(node, className);
619
- if (_this.props.onExit) {
620
- _this.props.onExit(node);
621
- }
622
- };
623
- _this.onExiting = function (node) {
624
- var _this$getClassNames4 = _this.getClassNames('exit'), activeClassName = _this$getClassNames4.activeClassName;
625
- _this.reflowAndAddClass(node, activeClassName);
626
- if (_this.props.onExiting) {
627
- _this.props.onExiting(node);
628
- }
629
- };
630
- _this.onExited = function (node) {
631
- var _this$getClassNames5 = _this.getClassNames('exit'), doneClassName = _this$getClassNames5.doneClassName;
632
- _this.removeClasses(node, 'exit');
633
- addClass$1(node, doneClassName);
634
- if (_this.props.onExited) {
635
- _this.props.onExited(node);
636
- }
637
- };
638
- _this.getClassNames = function (type) {
639
- var classNames = _this.props.classNames;
640
- var isStringClassNames = typeof classNames === 'string';
641
- var prefix = isStringClassNames && classNames ? classNames + '-' : '';
642
- var className = isStringClassNames ? prefix + type : classNames[type];
643
- var activeClassName = isStringClassNames ? className + '-active' : classNames[type + 'Active'];
644
- var doneClassName = isStringClassNames ? className + '-done' : classNames[type + 'Done'];
645
- return {
646
- className: className,
647
- activeClassName: activeClassName,
648
- doneClassName: doneClassName
649
- };
650
- };
651
- return _this;
652
- }
653
- var _proto = CSSTransition.prototype;
654
- _proto.removeClasses = function removeClasses(node, type) {
655
- var _this$getClassNames6 = this.getClassNames(type), className = _this$getClassNames6.className, activeClassName = _this$getClassNames6.activeClassName, doneClassName = _this$getClassNames6.doneClassName;
656
- className && removeClass$1(node, className);
657
- activeClassName && removeClass$1(node, activeClassName);
658
- doneClassName && removeClass$1(node, doneClassName);
659
- };
660
- _proto.reflowAndAddClass = function reflowAndAddClass(node, className) {
661
- if (className) {
662
- node && node.scrollTop;
663
- addClass$1(node, className);
664
- }
665
- };
666
- _proto.render = function render() {
667
- var props = _extends({}, this.props);
668
- delete props.classNames;
669
- return _react.default.createElement(_Transition.default, _extends({}, props, {
670
- onEnter: this.onEnter,
671
- onEntered: this.onEntered,
672
- onEntering: this.onEntering,
673
- onExit: this.onExit,
674
- onExiting: this.onExiting,
675
- onExited: this.onExited
676
- }));
677
- };
678
- return CSSTransition;
679
- })(_react.default.Component);
680
- CSSTransition.defaultProps = {
681
- classNames: ''
682
- };
683
- CSSTransition.propTypes = _extends({}, _Transition.default.propTypes, {
684
- classNames: _PropTypes.classNamesShape,
685
- onEnter: PropTypes.func,
686
- onEntering: PropTypes.func,
687
- onEntered: PropTypes.func,
688
- onExit: PropTypes.func,
689
- onExiting: PropTypes.func,
690
- onExited: PropTypes.func
691
- });
692
- var _default = CSSTransition;
693
- exports.default = _default;
694
- module.exports = exports["default"];
695
- })(CSSTransition, CSSTransition.exports);
696
- getDefaultExportFromCjs(CSSTransition.exports);
697
- var ReplaceTransition = {
698
- exports: {}
699
- };
700
- var TransitionGroup = {
701
- exports: {}
702
- };
703
- var ChildMapping = {};
704
- const require$$0$2 = _dll_react;
705
- ChildMapping.__esModule = true;
706
- ChildMapping.getChildMapping = getChildMapping;
707
- ChildMapping.mergeChildMappings = mergeChildMappings;
708
- ChildMapping.getInitialChildMapping = getInitialChildMapping;
709
- ChildMapping.getNextChildMapping = getNextChildMapping;
710
- var _react = require$$0$2;
711
- function getChildMapping(children, mapFn) {
712
- var mapper = function mapper(child) {
713
- return mapFn && (0, _react.isValidElement)(child) ? mapFn(child) : child;
714
- };
715
- var result = Object.create(null);
716
- if (children) _react.Children.map(children, function (c) {
717
- return c;
718
- }).forEach(function (child) {
719
- result[child.key] = mapper(child);
720
- });
721
- return result;
722
- }
723
- function mergeChildMappings(prev, next) {
724
- prev = prev || ({});
725
- next = next || ({});
726
- function getValueForKey(key) {
727
- return (key in next) ? next[key] : prev[key];
728
- }
729
- var nextKeysPending = Object.create(null);
730
- var pendingKeys = [];
731
- for (var prevKey in prev) {
732
- if ((prevKey in next)) {
733
- if (pendingKeys.length) {
734
- nextKeysPending[prevKey] = pendingKeys;
735
- pendingKeys = [];
736
- }
737
- } else {
738
- pendingKeys.push(prevKey);
739
- }
740
- }
741
- var i;
742
- var childMapping = {};
743
- for (var nextKey in next) {
744
- if (nextKeysPending[nextKey]) {
745
- for (i = 0; i < nextKeysPending[nextKey].length; i++) {
746
- var pendingNextKey = nextKeysPending[nextKey][i];
747
- childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);
748
- }
749
- }
750
- childMapping[nextKey] = getValueForKey(nextKey);
751
- }
752
- for (i = 0; i < pendingKeys.length; i++) {
753
- childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
754
- }
755
- return childMapping;
756
- }
757
- function getProp(child, prop, props) {
758
- return props[prop] != null ? props[prop] : child.props[prop];
759
- }
760
- function getInitialChildMapping(props, onExited) {
761
- return getChildMapping(props.children, function (child) {
762
- return (0, _react.cloneElement)(child, {
763
- onExited: onExited.bind(null, child),
764
- in: true,
765
- appear: getProp(child, 'appear', props),
766
- enter: getProp(child, 'enter', props),
767
- exit: getProp(child, 'exit', props)
768
- });
769
- });
770
- }
771
- function getNextChildMapping(nextProps, prevChildMapping, onExited) {
772
- var nextChildMapping = getChildMapping(nextProps.children);
773
- var children = mergeChildMappings(prevChildMapping, nextChildMapping);
774
- Object.keys(children).forEach(function (key) {
775
- var child = children[key];
776
- if (!(0, _react.isValidElement)(child)) return;
777
- var hasPrev = (key in prevChildMapping);
778
- var hasNext = (key in nextChildMapping);
779
- var prevChild = prevChildMapping[key];
780
- var isLeaving = (0, _react.isValidElement)(prevChild) && !prevChild.props.in;
781
- if (hasNext && (!hasPrev || isLeaving)) {
782
- children[key] = (0, _react.cloneElement)(child, {
783
- onExited: onExited.bind(null, child),
784
- in: true,
785
- exit: getProp(child, 'exit', nextProps),
786
- enter: getProp(child, 'enter', nextProps)
787
- });
788
- } else if (!hasNext && hasPrev && !isLeaving) {
789
- children[key] = (0, _react.cloneElement)(child, {
790
- in: false
791
- });
792
- } else if (hasNext && hasPrev && (0, _react.isValidElement)(prevChild)) {
793
- children[key] = (0, _react.cloneElement)(child, {
794
- onExited: onExited.bind(null, child),
795
- in: prevChild.props.in,
796
- exit: getProp(child, 'exit', nextProps),
797
- enter: getProp(child, 'enter', nextProps)
798
- });
799
- }
800
- });
801
- return children;
802
- }
803
- const require$$0$1 = _dll_prop_types;
804
- const require$$1$1 = _dll_react;
805
- (function (module, exports) {
806
- exports.__esModule = true;
807
- exports.default = void 0;
808
- var _propTypes = _interopRequireDefault(require$$0$1);
809
- var _react = _interopRequireDefault(require$$1$1);
810
- var _reactLifecyclesCompat = require$$2$2;
811
- var _ChildMapping = ChildMapping;
812
- function _interopRequireDefault(obj) {
813
- return obj && obj.__esModule ? obj : {
814
- default: obj
815
- };
816
- }
817
- function _objectWithoutPropertiesLoose(source, excluded) {
818
- if (source == null) return {};
819
- var target = {};
820
- var sourceKeys = Object.keys(source);
821
- var key, i;
822
- for (i = 0; i < sourceKeys.length; i++) {
823
- key = sourceKeys[i];
824
- if (excluded.indexOf(key) >= 0) continue;
825
- target[key] = source[key];
826
- }
827
- return target;
828
- }
829
- function _extends() {
830
- _extends = Object.assign || (function (target) {
831
- for (var i = 1; i < arguments.length; i++) {
832
- var source = arguments[i];
833
- for (var key in source) {
834
- if (Object.prototype.hasOwnProperty.call(source, key)) {
835
- target[key] = source[key];
836
- }
837
- }
838
- }
839
- return target;
840
- });
841
- return _extends.apply(this, arguments);
842
- }
843
- function _inheritsLoose(subClass, superClass) {
844
- subClass.prototype = Object.create(superClass.prototype);
845
- subClass.prototype.constructor = subClass;
846
- subClass.__proto__ = superClass;
847
- }
848
- function _assertThisInitialized(self) {
849
- if (self === void 0) {
850
- throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
851
- }
852
- return self;
853
- }
854
- var values = Object.values || (function (obj) {
855
- return Object.keys(obj).map(function (k) {
856
- return obj[k];
857
- });
858
- });
859
- var defaultProps = {
860
- component: 'div',
861
- childFactory: function childFactory(child) {
862
- return child;
863
- }
864
- };
865
- var TransitionGroup = (function (_React$Component) {
866
- _inheritsLoose(TransitionGroup, _React$Component);
867
- function TransitionGroup(props, context) {
868
- var _this;
869
- _this = _React$Component.call(this, props, context) || this;
870
- var handleExited = _this.handleExited.bind(_assertThisInitialized(_assertThisInitialized(_this)));
871
- _this.state = {
872
- handleExited: handleExited,
873
- firstRender: true
874
- };
875
- return _this;
876
- }
877
- var _proto = TransitionGroup.prototype;
878
- _proto.getChildContext = function getChildContext() {
879
- return {
880
- transitionGroup: {
881
- isMounting: !this.appeared
882
- }
883
- };
884
- };
885
- _proto.componentDidMount = function componentDidMount() {
886
- this.appeared = true;
887
- this.mounted = true;
888
- };
889
- _proto.componentWillUnmount = function componentWillUnmount() {
890
- this.mounted = false;
891
- };
892
- TransitionGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {
893
- var prevChildMapping = _ref.children, handleExited = _ref.handleExited, firstRender = _ref.firstRender;
894
- return {
895
- children: firstRender ? (0, _ChildMapping.getInitialChildMapping)(nextProps, handleExited) : (0, _ChildMapping.getNextChildMapping)(nextProps, prevChildMapping, handleExited),
896
- firstRender: false
897
- };
898
- };
899
- _proto.handleExited = function handleExited(child, node) {
900
- var currentChildMapping = (0, _ChildMapping.getChildMapping)(this.props.children);
901
- if ((child.key in currentChildMapping)) return;
902
- if (child.props.onExited) {
903
- child.props.onExited(node);
904
- }
905
- if (this.mounted) {
906
- this.setState(function (state) {
907
- var children = _extends({}, state.children);
908
- delete children[child.key];
909
- return {
910
- children: children
911
- };
912
- });
913
- }
914
- };
915
- _proto.render = function render() {
916
- var _this$props = this.props, Component = _this$props.component, childFactory = _this$props.childFactory, props = _objectWithoutPropertiesLoose(_this$props, ["component", "childFactory"]);
917
- var children = values(this.state.children).map(childFactory);
918
- delete props.appear;
919
- delete props.enter;
920
- delete props.exit;
921
- if (Component === null) {
922
- return children;
923
- }
924
- return _react.default.createElement(Component, props, children);
925
- };
926
- return TransitionGroup;
927
- })(_react.default.Component);
928
- TransitionGroup.childContextTypes = {
929
- transitionGroup: _propTypes.default.object.isRequired
930
- };
931
- TransitionGroup.propTypes = {
932
- component: _propTypes.default.any,
933
- children: _propTypes.default.node,
934
- appear: _propTypes.default.bool,
935
- enter: _propTypes.default.bool,
936
- exit: _propTypes.default.bool,
937
- childFactory: _propTypes.default.func
938
- };
939
- TransitionGroup.defaultProps = defaultProps;
940
- var _default = (0, _reactLifecyclesCompat.polyfill)(TransitionGroup);
941
- exports.default = _default;
942
- module.exports = exports["default"];
943
- })(TransitionGroup, TransitionGroup.exports);
944
- getDefaultExportFromCjs(TransitionGroup.exports);
945
- const require$$0 = _dll_prop_types;
946
- const require$$1 = _dll_react;
947
- const require$$2 = _dll_react_dom;
948
- (function (module, exports) {
949
- exports.__esModule = true;
950
- exports.default = void 0;
951
- var _propTypes = _interopRequireDefault(require$$0);
952
- var _react = _interopRequireDefault(require$$1);
953
- var _reactDom = require$$2;
954
- var _TransitionGroup = _interopRequireDefault(TransitionGroup.exports);
955
- function _interopRequireDefault(obj) {
956
- return obj && obj.__esModule ? obj : {
957
- default: obj
958
- };
959
- }
960
- function _objectWithoutPropertiesLoose(source, excluded) {
961
- if (source == null) return {};
962
- var target = {};
963
- var sourceKeys = Object.keys(source);
964
- var key, i;
965
- for (i = 0; i < sourceKeys.length; i++) {
966
- key = sourceKeys[i];
967
- if (excluded.indexOf(key) >= 0) continue;
968
- target[key] = source[key];
969
- }
970
- return target;
971
- }
972
- function _inheritsLoose(subClass, superClass) {
973
- subClass.prototype = Object.create(superClass.prototype);
974
- subClass.prototype.constructor = subClass;
975
- subClass.__proto__ = superClass;
976
- }
977
- var ReplaceTransition = (function (_React$Component) {
978
- _inheritsLoose(ReplaceTransition, _React$Component);
979
- function ReplaceTransition() {
980
- var _this;
981
- for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
982
- _args[_key] = arguments[_key];
983
- }
984
- _this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;
985
- _this.handleEnter = function () {
986
- for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
987
- args[_key2] = arguments[_key2];
988
- }
989
- return _this.handleLifecycle('onEnter', 0, args);
990
- };
991
- _this.handleEntering = function () {
992
- for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
993
- args[_key3] = arguments[_key3];
994
- }
995
- return _this.handleLifecycle('onEntering', 0, args);
996
- };
997
- _this.handleEntered = function () {
998
- for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
999
- args[_key4] = arguments[_key4];
1000
- }
1001
- return _this.handleLifecycle('onEntered', 0, args);
1002
- };
1003
- _this.handleExit = function () {
1004
- for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
1005
- args[_key5] = arguments[_key5];
1006
- }
1007
- return _this.handleLifecycle('onExit', 1, args);
1008
- };
1009
- _this.handleExiting = function () {
1010
- for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
1011
- args[_key6] = arguments[_key6];
1012
- }
1013
- return _this.handleLifecycle('onExiting', 1, args);
1014
- };
1015
- _this.handleExited = function () {
1016
- for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
1017
- args[_key7] = arguments[_key7];
1018
- }
1019
- return _this.handleLifecycle('onExited', 1, args);
1020
- };
1021
- return _this;
1022
- }
1023
- var _proto = ReplaceTransition.prototype;
1024
- _proto.handleLifecycle = function handleLifecycle(handler, idx, originalArgs) {
1025
- var _child$props;
1026
- var children = this.props.children;
1027
- var child = _react.default.Children.toArray(children)[idx];
1028
- if (child.props[handler]) (_child$props = child.props)[handler].apply(_child$props, originalArgs);
1029
- if (this.props[handler]) this.props[handler]((0, _reactDom.findDOMNode)(this));
1030
- };
1031
- _proto.render = function render() {
1032
- var _this$props = this.props, children = _this$props.children, inProp = _this$props.in, props = _objectWithoutPropertiesLoose(_this$props, ["children", "in"]);
1033
- var _React$Children$toArr = _react.default.Children.toArray(children), first = _React$Children$toArr[0], second = _React$Children$toArr[1];
1034
- delete props.onEnter;
1035
- delete props.onEntering;
1036
- delete props.onEntered;
1037
- delete props.onExit;
1038
- delete props.onExiting;
1039
- delete props.onExited;
1040
- return _react.default.createElement(_TransitionGroup.default, props, inProp ? _react.default.cloneElement(first, {
1041
- key: 'first',
1042
- onEnter: this.handleEnter,
1043
- onEntering: this.handleEntering,
1044
- onEntered: this.handleEntered
1045
- }) : _react.default.cloneElement(second, {
1046
- key: 'second',
1047
- onEnter: this.handleExit,
1048
- onEntering: this.handleExiting,
1049
- onEntered: this.handleExited
1050
- }));
1051
- };
1052
- return ReplaceTransition;
1053
- })(_react.default.Component);
1054
- ReplaceTransition.propTypes = {
1055
- in: _propTypes.default.bool.isRequired,
1056
- children: function children(props, propName) {
1057
- if (_react.default.Children.count(props[propName]) !== 2) return new Error("\"" + propName + "\" must be exactly two transition components.");
1058
- return null;
1059
- }
1060
- };
1061
- var _default = ReplaceTransition;
1062
- exports.default = _default;
1063
- module.exports = exports["default"];
1064
- })(ReplaceTransition, ReplaceTransition.exports);
1065
- getDefaultExportFromCjs(ReplaceTransition.exports);
1066
- var _CSSTransition = _interopRequireDefault(CSSTransition.exports);
1067
- var _ReplaceTransition = _interopRequireDefault(ReplaceTransition.exports);
1068
- var _TransitionGroup = _interopRequireDefault(TransitionGroup.exports);
1069
- var _Transition = _interopRequireDefault(Transition$1);
1070
- function _interopRequireDefault(obj) {
1071
- return obj && obj.__esModule ? obj : {
1072
- default: obj
1073
- };
1074
- }
1075
- var reactTransitionGroup = {
1076
- Transition: _Transition.default,
1077
- TransitionGroup: _TransitionGroup.default,
1078
- ReplaceTransition: _ReplaceTransition.default,
1079
- CSSTransition: _CSSTransition.default
1080
- };
1081
- const React$5 = _dll_react;
1082
- const {withStyles: withStyles$4} = _dll_material_ui__core_styles;
1083
- const PropTypes$4 = _dll_prop_types;
1084
- const {color: color$2} = _dll_pie_lib__pie_toolbox_render_ui;
1085
- const _jsxFileName$4 = "/Users/andreeapescar/WORK/pie/pie-elements/packages/multiple-choice/src/feedback-tick.jsx";
1086
- const stylesheet = {
1087
- incorrect: {
1088
- fill: `var(--feedback-incorrect-bg-color, ${color$2.incorrect()})`
1089
- },
1090
- correct: {
1091
- fill: `var(--feedback-correct-bg-color, ${color$2.correct()})`
1092
- },
1093
- feedbackTick: {
1094
- width: '33px',
1095
- height: '33px',
1096
- '& svg': {
1097
- position: 'absolute',
1098
- display: 'inline-block',
1099
- width: '33px',
1100
- height: '33px',
1101
- verticalAlign: 'middle',
1102
- '& hide': {
1103
- display: 'none'
1104
- }
1105
- }
1106
- },
1107
- feedbackTickEnter: {
1108
- opacity: '0',
1109
- left: '-50px'
1110
- },
1111
- feedbackTickEnterActive: {
1112
- opacity: '1',
1113
- left: '0px',
1114
- transition: 'left 500ms ease-in 200ms, opacity 500ms linear 200ms'
1115
- },
1116
- feedbackTickLeave: {
1117
- opacity: '1',
1118
- left: '0px'
1119
- },
1120
- feedbackTickLeaveActive: {
1121
- opacity: '0',
1122
- left: '-50px',
1123
- transition: 'left 300ms ease-in, opacity 300ms'
1124
- }
1125
- };
1126
- class FeedbackTick extends React$5.Component {
1127
- static __initStatic() {
1128
- this.propTypes = {
1129
- classes: PropTypes$4.object.isRequired,
1130
- correctness: PropTypes$4.string
1131
- };
1132
- }
1133
- constructor(props) {
1134
- super(props);
1135
- this.incorrectIcon = React$5.createElement('svg', {
1136
- key: "1",
1137
- preserveAspectRatio: "xMinYMin meet",
1138
- x: "0px",
1139
- y: "0px",
1140
- viewBox: "0 0 44 40",
1141
- style: {
1142
- enableBackground: 'new 0 0 44 40'
1143
- },
1144
- __self: this,
1145
- __source: {
1146
- fileName: _jsxFileName$4,
1147
- lineNumber: 56
1148
- }
1149
- }, React$5.createElement('g', {
1150
- __self: this,
1151
- __source: {
1152
- fileName: _jsxFileName$4,
1153
- lineNumber: 64
1154
- }
1155
- }, React$5.createElement('rect', {
1156
- x: "11",
1157
- y: "17.3",
1158
- transform: "matrix(0.7071 -0.7071 0.7071 0.7071 -7.852 19.2507)",
1159
- className: this.props.classes.incorrect,
1160
- width: "16.6",
1161
- height: "3.7",
1162
- __self: this,
1163
- __source: {
1164
- fileName: _jsxFileName$4,
1165
- lineNumber: 65
1166
- }
1167
- }), React$5.createElement('rect', {
1168
- x: "17.4",
1169
- y: "10.7",
1170
- transform: "matrix(0.7071 -0.7071 0.7071 0.7071 -7.8175 19.209)",
1171
- className: this.props.classes.incorrect,
1172
- width: "3.7",
1173
- height: "16.6",
1174
- __self: this,
1175
- __source: {
1176
- fileName: _jsxFileName$4,
1177
- lineNumber: 73
1178
- }
1179
- })));
1180
- this.correctIcon = React$5.createElement('svg', {
1181
- key: "2",
1182
- preserveAspectRatio: "xMinYMin meet",
1183
- version: "1.1",
1184
- x: "0px",
1185
- y: "0px",
1186
- viewBox: "0 0 44 40",
1187
- style: {
1188
- enableBackground: 'new 0 0 44 40'
1189
- },
1190
- __self: this,
1191
- __source: {
1192
- fileName: _jsxFileName$4,
1193
- lineNumber: 86
1194
- }
1195
- }, React$5.createElement('polygon', {
1196
- className: this.props.classes.correct,
1197
- points: "19.1,28.6 11.8,22.3 14.4,19.2 17.9,22.1 23.9,11.4 27.5,13.4",
1198
- __self: this,
1199
- __source: {
1200
- fileName: _jsxFileName$4,
1201
- lineNumber: 95
1202
- }
1203
- }));
1204
- }
1205
- render() {
1206
- const {correctness, classes} = this.props;
1207
- const icon = (() => {
1208
- if (correctness === 'incorrect') {
1209
- return this.incorrectIcon;
1210
- } else if (correctness === 'correct') {
1211
- return this.correctIcon;
1212
- }
1213
- })();
1214
- return React$5.createElement('div', {
1215
- className: classes.feedbackTick,
1216
- __self: this,
1217
- __source: {
1218
- fileName: _jsxFileName$4,
1219
- lineNumber: 115
1220
- }
1221
- }, React$5.createElement(reactTransitionGroup.TransitionGroup, {
1222
- __self: this,
1223
- __source: {
1224
- fileName: _jsxFileName$4,
1225
- lineNumber: 116
1226
- }
1227
- }, correctness && React$5.createElement(reactTransitionGroup.CSSTransition, {
1228
- classNames: {
1229
- enter: classes.feedbackTickEnter,
1230
- enterActive: classes.feedbackTickEnterActive,
1231
- exit: classes.feedbackTickLeave,
1232
- exitActive: classes.feedbackTickLeaveActive
1233
- },
1234
- timeout: {
1235
- enter: 700,
1236
- exit: 300
1237
- },
1238
- __self: this,
1239
- __source: {
1240
- fileName: _jsxFileName$4,
1241
- lineNumber: 118
1242
- }
1243
- }, icon)));
1244
- }
1245
- }
1246
- FeedbackTick.__initStatic();
1247
- var FeedbackTick$1 = withStyles$4(stylesheet, {
1248
- name: 'FeedbackTick'
1249
- })(FeedbackTick);
1250
- const {FormControlLabel: FormControlLabel} = _dll_material_ui__core;
1251
- const {Checkbox: Checkbox} = _dll_material_ui__core;
1252
- const {Radio: Radio} = _dll_material_ui__core;
1253
- const React$4 = _dll_react;
1254
- const PropTypes$3 = _dll_prop_types;
1255
- const {withStyles: withStyles$3} = _dll_material_ui__core_styles;
1256
- const {Feedback: Feedback} = _dll_pie_lib__pie_toolbox_render_ui;
1257
- const {color: color$1} = _dll_pie_lib__pie_toolbox_render_ui;
1258
- const {PreviewPrompt: PreviewPrompt$1} = _dll_pie_lib__pie_toolbox_render_ui;
1259
- const classNames$2 = _dll_classnames;
1260
- const _jsxFileName$3 = "/Users/andreeapescar/WORK/pie/pie-elements/packages/multiple-choice/src/choice-input.jsx";
1261
- const CLASS_NAME = 'multiple-choice-component';
1262
- const styleSheet = theme => ({
1263
- row: {
1264
- display: 'flex',
1265
- alignItems: 'center',
1266
- backgroundColor: color$1.background()
1267
- },
1268
- checkboxHolder: {
1269
- display: 'flex',
1270
- alignItems: 'center',
1271
- backgroundColor: color$1.background(),
1272
- flex: 1,
1273
- '& label': {
1274
- color: color$1.text(),
1275
- '& > span': {
1276
- fontSize: 'inherit'
1277
- }
1278
- }
1279
- },
1280
- horizontalLayout: {
1281
- [`& .${CLASS_NAME}`]: {
1282
- paddingRight: theme.spacing.unit
1283
- }
1284
- }
1285
- });
1286
- const formStyleSheet = {
1287
- label: {
1288
- color: `${color$1.text()} !important`,
1289
- backgroundColor: color$1.background()
1290
- }
1291
- };
1292
- const StyledFormControlLabel = withStyles$3(formStyleSheet, {
1293
- name: 'FormControlLabel'
1294
- })(props => React$4.createElement(FormControlLabel, {
1295
- ...props,
1296
- classes: {
1297
- label: props.classes.label
1298
- },
1299
- __self: undefined,
1300
- __source: {
1301
- fileName: _jsxFileName$3,
1302
- lineNumber: 48
1303
- }
1304
- }));
1305
- const colorStyle = (varName, fallback) => ({
1306
- [`&.${CLASS_NAME}`]: {
1307
- color: `var(--choice-input-${varName}, ${fallback}) !important`
1308
- }
1309
- });
1310
- const inputStyles = {
1311
- 'correct-root': colorStyle('correct-color', color$1.text()),
1312
- 'correct-checked': colorStyle('correct-selected-color', color$1.correct()),
1313
- 'correct-disabled': colorStyle('correct-disabled-color', color$1.disabled()),
1314
- 'incorrect-root': colorStyle('incorrect-color', color$1.incorrect()),
1315
- 'incorrect-checked': colorStyle('incorrect-checked', color$1.incorrect()),
1316
- 'incorrect-disabled': colorStyle('incorrect-disabled-color', color$1.disabled()),
1317
- root: {
1318
- ...colorStyle('color', color$1.text()),
1319
- '&:hover': {
1320
- color: `${color$1.primaryLight()} !important`
1321
- }
1322
- },
1323
- checked: colorStyle('selected-color', color$1.primary()),
1324
- disabled: {
1325
- ...colorStyle('disabled-color', color$1.text()),
1326
- opacity: 0.6,
1327
- cursor: 'not-allowed !important',
1328
- pointerEvents: 'initial !important'
1329
- }
1330
- };
1331
- const StyledCheckbox = withStyles$3(inputStyles)(props => {
1332
- const {correctness, classes, checked, onChange, disabled, accessibility, value, id} = props;
1333
- const key = k => correctness ? `${correctness}-${k}` : k;
1334
- const resolved = {
1335
- root: classes[key('root')],
1336
- checked: classes[key('checked')],
1337
- disabled: classes[key('disabled')]
1338
- };
1339
- const miniProps = {
1340
- checked,
1341
- onChange,
1342
- disabled,
1343
- value
1344
- };
1345
- return React$4.createElement(Checkbox, {
1346
- id: id,
1347
- 'aria-label': accessibility,
1348
- 'aria-checked': checked,
1349
- ...miniProps,
1350
- className: CLASS_NAME,
1351
- classes: {
1352
- root: resolved.root,
1353
- checked: resolved.checked,
1354
- disabled: `${correctness ? '' : resolved.disabled}`
1355
- },
1356
- __self: undefined,
1357
- __source: {
1358
- fileName: _jsxFileName$3,
1359
- lineNumber: 89
1360
- }
1361
- });
1362
- });
1363
- const StyledRadio = withStyles$3(inputStyles)(props => {
1364
- const {correctness, classes, checked, onChange, disabled, accessibility, value, id} = props;
1365
- const key = k => correctness ? `${correctness}-${k}` : k;
1366
- const resolved = {
1367
- root: classes[key('root')],
1368
- checked: classes[key('checked')],
1369
- disabled: classes[key('disabled')]
1370
- };
1371
- const miniProps = {
1372
- checked,
1373
- onChange,
1374
- disabled,
1375
- value
1376
- };
1377
- return React$4.createElement(Radio, {
1378
- id: id,
1379
- 'aria-label': accessibility,
1380
- 'aria-checked': checked,
1381
- ...miniProps,
1382
- className: CLASS_NAME,
1383
- classes: {
1384
- root: resolved.root,
1385
- checked: resolved.checked,
1386
- disabled: `${correctness ? '' : resolved.disabled}`
1387
- },
1388
- __self: undefined,
1389
- __source: {
1390
- fileName: _jsxFileName$3,
1391
- lineNumber: 117
1392
- }
1393
- });
1394
- });
1395
- class ChoiceInput extends React$4.Component {
1396
- static __initStatic() {
1397
- this.propTypes = {
1398
- choiceMode: PropTypes$3.oneOf(['radio', 'checkbox']),
1399
- displayKey: PropTypes$3.string.isRequired,
1400
- checked: PropTypes$3.bool.isRequired,
1401
- correctness: PropTypes$3.string,
1402
- disabled: PropTypes$3.bool.isRequired,
1403
- feedback: PropTypes$3.string,
1404
- label: PropTypes$3.string.isRequired,
1405
- rationale: PropTypes$3.string,
1406
- accessibility: PropTypes$3.string,
1407
- onChange: PropTypes$3.func.isRequired,
1408
- value: PropTypes$3.string.isRequired,
1409
- classes: PropTypes$3.object,
1410
- className: PropTypes$3.string,
1411
- hideTick: PropTypes$3.bool,
1412
- isEvaluateMode: PropTypes$3.bool,
1413
- choicesLayout: PropTypes$3.oneOf(['vertical', 'grid', 'horizontal']),
1414
- updateSession: PropTypes$3.func
1415
- };
1416
- }
1417
- static __initStatic2() {
1418
- this.defaultProps = {
1419
- rationale: null,
1420
- accessibility: null,
1421
- checked: false,
1422
- isEvaluateMode: false
1423
- };
1424
- }
1425
- constructor(props) {
1426
- super(props);
1427
- this.onToggleChoice = this.onToggleChoice.bind(this);
1428
- this.choiceId = this.generateChoiceId();
1429
- }
1430
- onToggleChoice(event) {
1431
- this.props.onChange(event);
1432
- this.props.updateSession({
1433
- value: this.props.value,
1434
- selected: !this.props.checked
1435
- });
1436
- }
1437
- generateChoiceId() {
1438
- return 'choice-' + (Math.random() * 10000).toFixed();
1439
- }
1440
- render() {
1441
- const {choiceMode, disabled, displayKey, feedback, label, correctness, classes, className, rationale, accessibility, hideTick, isEvaluateMode, choicesLayout, value, checked} = this.props;
1442
- const Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;
1443
- const classSuffix = choiceMode === 'checkbox' ? 'checkbox' : 'radio-button';
1444
- const holderClassNames = classNames$2(classes.checkboxHolder, {
1445
- [classes.horizontalLayout]: choicesLayout === 'horizontal'
1446
- });
1447
- const choicelabel = React$4.createElement(React$4.Fragment, null, displayKey ? React$4.createElement('span', {
1448
- className: classes.row,
1449
- __self: this,
1450
- __source: {
1451
- fileName: _jsxFileName$3,
1452
- lineNumber: 207
1453
- }
1454
- }, displayKey, ".", '\u00A0', React$4.createElement(PreviewPrompt$1, {
1455
- className: "label",
1456
- prompt: label,
1457
- tagName: "span",
1458
- __self: this,
1459
- __source: {
1460
- fileName: _jsxFileName$3,
1461
- lineNumber: 209
1462
- }
1463
- })) : React$4.createElement(PreviewPrompt$1, {
1464
- className: "label",
1465
- prompt: label,
1466
- tagName: "span",
1467
- __self: this,
1468
- __source: {
1469
- fileName: _jsxFileName$3,
1470
- lineNumber: 212
1471
- }
1472
- }));
1473
- return React$4.createElement('div', {
1474
- className: classNames$2(className, 'corespring-' + classSuffix, 'choice-input'),
1475
- __self: this,
1476
- __source: {
1477
- fileName: _jsxFileName$3,
1478
- lineNumber: 218
1479
- }
1480
- }, React$4.createElement('div', {
1481
- className: classes.row,
1482
- __self: this,
1483
- __source: {
1484
- fileName: _jsxFileName$3,
1485
- lineNumber: 219
1486
- }
1487
- }, !hideTick && isEvaluateMode && React$4.createElement(FeedbackTick$1, {
1488
- correctness: correctness,
1489
- __self: this,
1490
- __source: {
1491
- fileName: _jsxFileName$3,
1492
- lineNumber: 220
1493
- }
1494
- }), React$4.createElement('div', {
1495
- className: classNames$2(holderClassNames, 'checkbox-holder'),
1496
- __self: this,
1497
- __source: {
1498
- fileName: _jsxFileName$3,
1499
- lineNumber: 221
1500
- }
1501
- }, React$4.createElement(StyledFormControlLabel, {
1502
- label: choicelabel,
1503
- value: value,
1504
- htmlFor: this.choiceId,
1505
- control: React$4.createElement(Tag, {
1506
- accessibility: accessibility,
1507
- disabled: disabled,
1508
- checked: checked,
1509
- correctness: correctness,
1510
- value: value,
1511
- id: this.choiceId,
1512
- onChange: this.onToggleChoice,
1513
- __self: this,
1514
- __source: {
1515
- fileName: _jsxFileName$3,
1516
- lineNumber: 227
1517
- }
1518
- }),
1519
- __self: this,
1520
- __source: {
1521
- fileName: _jsxFileName$3,
1522
- lineNumber: 222
1523
- }
1524
- }))), rationale && React$4.createElement(PreviewPrompt$1, {
1525
- className: "rationale",
1526
- defaultClassName: "rationale",
1527
- prompt: rationale,
1528
- __self: this,
1529
- __source: {
1530
- fileName: _jsxFileName$3,
1531
- lineNumber: 240
1532
- }
1533
- }), React$4.createElement(Feedback, {
1534
- feedback: feedback,
1535
- correctness: correctness,
1536
- __self: this,
1537
- __source: {
1538
- fileName: _jsxFileName$3,
1539
- lineNumber: 241
1540
- }
1541
- }));
1542
- }
1543
- }
1544
- ChoiceInput.__initStatic();
1545
- ChoiceInput.__initStatic2();
1546
- var ChoiceInput$1 = withStyles$3(styleSheet)(ChoiceInput);
1547
- const React$3 = _dll_react;
1548
- const PropTypes$2 = _dll_prop_types;
1549
- const {withStyles: withStyles$2} = _dll_material_ui__core_styles;
1550
- const classNames$1 = _dll_classnames;
1551
- const _jsxFileName$2 = "/Users/andreeapescar/WORK/pie/pie-elements/packages/multiple-choice/src/choice.jsx";
1552
- class Choice extends React$3.Component {
1553
- constructor(...args) {
1554
- super(...args);
1555
- Choice.prototype.__init.call(this);
1556
- }
1557
- static __initStatic() {
1558
- this.propTypes = {
1559
- updateSession: PropTypes$2.func
1560
- };
1561
- }
1562
- __init() {
1563
- this.onChange = choice => {
1564
- const {disabled, onChoiceChanged} = this.props;
1565
- if (!disabled) {
1566
- onChoiceChanged(choice);
1567
- }
1568
- };
1569
- }
1570
- render() {
1571
- const {choice, index, choicesLength, showCorrect, isEvaluateMode, choiceMode, disabled, checked, correctness, displayKey, classes, choicesLayout, gridColumns, updateSession} = this.props;
1572
- const choiceClass = 'choice' + (index === choicesLength - 1 ? ' last' : '');
1573
- const feedback = !isEvaluateMode || showCorrect ? '' : choice.feedback;
1574
- const choiceProps = {
1575
- ...choice,
1576
- checked,
1577
- choiceMode,
1578
- disabled,
1579
- feedback,
1580
- correctness,
1581
- displayKey,
1582
- index,
1583
- choicesLayout,
1584
- gridColumns,
1585
- updateSession,
1586
- onChange: this.onChange,
1587
- isEvaluateMode
1588
- };
1589
- const names = classNames$1(classes.choice, {
1590
- [classes.noBorder]: index === choicesLength - 1 || choicesLayout !== 'vertical',
1591
- [classes.horizontalLayout]: choicesLayout === 'horizontal'
1592
- });
1593
- return React$3.createElement('div', {
1594
- className: choiceClass,
1595
- key: index,
1596
- __self: this,
1597
- __source: {
1598
- fileName: _jsxFileName$2,
1599
- lineNumber: 63
1600
- }
1601
- }, React$3.createElement(ChoiceInput$1, {
1602
- ...choiceProps,
1603
- className: names,
1604
- __self: this,
1605
- __source: {
1606
- fileName: _jsxFileName$2,
1607
- lineNumber: 64
1608
- }
1609
- }));
1610
- }
1611
- }
1612
- Choice.__initStatic();
1613
- Choice.propTypes = {
1614
- choiceMode: PropTypes$2.oneOf(['radio', 'checkbox']),
1615
- choice: PropTypes$2.object,
1616
- disabled: PropTypes$2.bool.isRequired,
1617
- onChoiceChanged: PropTypes$2.func,
1618
- classes: PropTypes$2.object.isRequired,
1619
- index: PropTypes$2.number,
1620
- choicesLength: PropTypes$2.number,
1621
- showCorrect: PropTypes$2.bool,
1622
- isEvaluateMode: PropTypes$2.bool,
1623
- checked: PropTypes$2.bool,
1624
- correctness: PropTypes$2.string,
1625
- displayKey: PropTypes$2.string,
1626
- choicesLayout: PropTypes$2.oneOf(['vertical', 'grid', 'horizontal']),
1627
- gridColumns: PropTypes$2.string
1628
- };
1629
- var StyledChoice = withStyles$2(theme => ({
1630
- choice: {
1631
- paddingTop: theme.spacing.unit * 2.5,
1632
- paddingBottom: theme.spacing.unit + 2,
1633
- borderBottom: `1px solid ${theme.palette.grey[300]}`
1634
- },
1635
- noBorder: {
1636
- borderBottom: 'none'
1637
- },
1638
- horizontalLayout: {
1639
- paddingRight: theme.spacing.unit * 2.5,
1640
- '& label': {
1641
- marginRight: theme.spacing.unit
1642
- }
1643
- }
1644
- }))(Choice);
1645
- const React$2 = _dll_react;
1646
- const PropTypes$1 = _dll_prop_types;
1647
- const {CorrectAnswerToggle: CorrectAnswerToggle} = _dll_pie_lib__pie_toolbox_correct_answer_toggle;
1648
- const classNames = _dll_classnames;
1649
- const {withStyles: withStyles$1} = _dll_material_ui__core_styles;
1650
- const {color: color} = _dll_pie_lib__pie_toolbox_render_ui;
1651
- const {Collapsible: Collapsible} = _dll_pie_lib__pie_toolbox_render_ui;
1652
- const {PreviewPrompt: PreviewPrompt} = _dll_pie_lib__pie_toolbox_render_ui;
1653
- const _jsxFileName$1 = "/Users/andreeapescar/WORK/pie/pie-elements/packages/multiple-choice/src/multiple-choice.jsx";
1654
- const styles$1 = theme => ({
1655
- main: {
1656
- color: color.text(),
1657
- backgroundColor: color.background(),
1658
- '& *': {
1659
- '-webkit-font-smoothing': 'antialiased'
1660
- }
1661
- },
1662
- partLabel: {
1663
- display: 'block',
1664
- fontSize: 'inherit',
1665
- margin: '0',
1666
- fontWeight: 'normal',
1667
- paddingBottom: theme.spacing.unit * 2
1668
- },
1669
- teacherInstructions: {
1670
- marginBottom: theme.spacing.unit * 2
1671
- },
1672
- horizontalLayout: {
1673
- display: 'flex',
1674
- flexDirection: 'row',
1675
- flexWrap: 'wrap'
1676
- },
1677
- gridLayout: {
1678
- display: 'grid'
1679
- },
1680
- fieldset: {
1681
- border: '0px',
1682
- padding: '0.01em 0 0 0',
1683
- margin: '0px',
1684
- minWidth: '0px'
1685
- },
1686
- srOnly: {
1687
- position: 'absolute',
1688
- left: '-10000px',
1689
- top: 'auto',
1690
- width: '1px',
1691
- height: '1px',
1692
- overflow: 'hidden'
1693
- }
1694
- });
1695
- class MultipleChoice$1 extends React$2.Component {
1696
- static __initStatic() {
1697
- this.propTypes = {
1698
- className: PropTypes$1.string,
1699
- mode: PropTypes$1.oneOf(['gather', 'view', 'evaluate']),
1700
- choiceMode: PropTypes$1.oneOf(['radio', 'checkbox']),
1701
- keyMode: PropTypes$1.oneOf(['numbers', 'letters', 'none']),
1702
- choices: PropTypes$1.array,
1703
- partLabel: PropTypes$1.string,
1704
- prompt: PropTypes$1.string,
1705
- teacherInstructions: PropTypes$1.string,
1706
- session: PropTypes$1.object,
1707
- disabled: PropTypes$1.bool,
1708
- onChoiceChanged: PropTypes$1.func,
1709
- responseCorrect: PropTypes$1.bool,
1710
- classes: PropTypes$1.object.isRequired,
1711
- correctResponse: PropTypes$1.array,
1712
- choicesLayout: PropTypes$1.oneOf(['vertical', 'grid', 'horizontal']),
1713
- gridColumns: PropTypes$1.string,
1714
- alwaysShowCorrect: PropTypes$1.bool,
1715
- animationsDisabled: PropTypes$1.bool,
1716
- language: PropTypes$1.string
1717
- };
1718
- }
1719
- constructor(props) {
1720
- super(props);
1721
- MultipleChoice$1.prototype.__init.call(this);
1722
- MultipleChoice$1.prototype.__init2.call(this);
1723
- MultipleChoice$1.prototype.__init3.call(this);
1724
- this.state = {
1725
- selectedValue: null,
1726
- selectedValues: [],
1727
- showCorrect: this.props.alwaysShowCorrect || false
1728
- };
1729
- this.onToggle = this.onToggle.bind(this);
1730
- }
1731
- isSelected(value) {
1732
- const sessionValue = this.props.session && this.props.session.value;
1733
- return sessionValue && sessionValue.indexOf && sessionValue.indexOf(value) >= 0;
1734
- }
1735
- __init() {
1736
- this.handleChange = event => {
1737
- const target = event.target;
1738
- this.setState({
1739
- selectedValue: target.value
1740
- });
1741
- };
1742
- }
1743
- __init2() {
1744
- this.handleChangeCheckboxes = event => {
1745
- const {value, checked} = event.target;
1746
- this.setState(prevState => {
1747
- let selectedValues = [...prevState.selectedValues];
1748
- if (checked) {
1749
- selectedValues.push(value);
1750
- } else {
1751
- selectedValues = selectedValues.filter(currentValue => currentValue !== value);
1752
- }
1753
- return {
1754
- selectedValues
1755
- };
1756
- });
1757
- };
1758
- }
1759
- onToggle() {
1760
- if (this.props.mode === 'evaluate') {
1761
- this.setState({
1762
- showCorrect: !this.state.showCorrect
1763
- });
1764
- }
1765
- }
1766
- UNSAFE_componentWillReceiveProps(nextProps) {
1767
- if (!nextProps.correctResponse) {
1768
- this.setState({
1769
- showCorrect: false
1770
- });
1771
- }
1772
- if (nextProps.alwaysShowCorrect) {
1773
- this.setState({
1774
- showCorrect: true
1775
- });
1776
- }
1777
- }
1778
- indexToSymbol(index) {
1779
- if (this.props.keyMode === 'numbers') {
1780
- return `${index + 1}`;
1781
- }
1782
- if (this.props.keyMode === 'letters') {
1783
- return String.fromCharCode(97 + index).toUpperCase();
1784
- }
1785
- return '';
1786
- }
1787
- __init3() {
1788
- this.getCorrectness = (choice = {}) => {
1789
- const isCorrect = choice.correct;
1790
- const isChecked = this.isSelected(choice.value);
1791
- if (this.state.showCorrect) {
1792
- return isCorrect ? 'correct' : undefined;
1793
- }
1794
- if (isCorrect) {
1795
- if (isChecked) {
1796
- return 'correct';
1797
- } else {
1798
- return 'incorrect';
1799
- }
1800
- } else {
1801
- if (isChecked) {
1802
- return 'incorrect';
1803
- } else {
1804
- return undefined;
1805
- }
1806
- }
1807
- };
1808
- }
1809
- getChecked(choice) {
1810
- if (this.state.showCorrect) {
1811
- return choice.correct || false;
1812
- }
1813
- if (this.isSelected(choice.value)) {
1814
- return true;
1815
- }
1816
- return this.props.choiceMode === 'radio' ? this.state.selectedValue === choice.value : this.state.selectedValues.includes(choice.value);
1817
- }
1818
- renderHeading() {
1819
- const {mode, choiceMode, classes} = this.props;
1820
- if (mode !== 'gather') {
1821
- return null;
1822
- }
1823
- return choiceMode === 'radio' ? React$2.createElement('h2', {
1824
- className: classes.srOnly,
1825
- __self: this,
1826
- __source: {
1827
- fileName: _jsxFileName$1,
1828
- lineNumber: 195
1829
- }
1830
- }, "Multiple Choice Question") : React$2.createElement('h2', {
1831
- className: classes.srOnly,
1832
- __self: this,
1833
- __source: {
1834
- fileName: _jsxFileName$1,
1835
- lineNumber: 197
1836
- }
1837
- }, "Multiple Select Question");
1838
- }
1839
- render() {
1840
- const {mode, disabled, className, choices = [], choiceMode, gridColumns, partLabel, prompt, onChoiceChanged, responseCorrect, teacherInstructions, classes, alwaysShowCorrect, animationsDisabled, language} = this.props;
1841
- const {showCorrect} = this.state;
1842
- const isEvaluateMode = mode === 'evaluate';
1843
- const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
1844
- const columnsStyle = gridColumns > 1 ? {
1845
- gridTemplateColumns: `repeat(${gridColumns}, 1fr)`
1846
- } : undefined;
1847
- const teacherInstructionsDiv = React$2.createElement(PreviewPrompt, {
1848
- tagName: "div",
1849
- className: "prompt",
1850
- defaultClassName: "teacher-instructions",
1851
- prompt: teacherInstructions,
1852
- __self: this,
1853
- __source: {
1854
- fileName: _jsxFileName$1,
1855
- lineNumber: 225
1856
- }
1857
- });
1858
- return React$2.createElement('div', {
1859
- className: classNames(classes.main, className, 'multiple-choice'),
1860
- __self: this,
1861
- __source: {
1862
- fileName: _jsxFileName$1,
1863
- lineNumber: 234
1864
- }
1865
- }, partLabel && React$2.createElement('h3', {
1866
- className: classes.partLabel,
1867
- __self: this,
1868
- __source: {
1869
- fileName: _jsxFileName$1,
1870
- lineNumber: 235
1871
- }
1872
- }, partLabel), this.renderHeading(), teacherInstructions && React$2.createElement('div', {
1873
- className: classes.teacherInstructions,
1874
- __self: this,
1875
- __source: {
1876
- fileName: _jsxFileName$1,
1877
- lineNumber: 240
1878
- }
1879
- }, !animationsDisabled ? React$2.createElement(Collapsible, {
1880
- labels: {
1881
- hidden: 'Show Teacher Instructions',
1882
- visible: 'Hide Teacher Instructions'
1883
- },
1884
- __self: this,
1885
- __source: {
1886
- fileName: _jsxFileName$1,
1887
- lineNumber: 242
1888
- }
1889
- }, teacherInstructionsDiv) : teacherInstructionsDiv), React$2.createElement('fieldset', {
1890
- className: classes.fieldset,
1891
- __self: this,
1892
- __source: {
1893
- fileName: _jsxFileName$1,
1894
- lineNumber: 256
1895
- }
1896
- }, React$2.createElement(PreviewPrompt, {
1897
- className: "prompt",
1898
- defaultClassName: "prompt",
1899
- prompt: prompt,
1900
- tagName: 'legend',
1901
- __self: this,
1902
- __source: {
1903
- fileName: _jsxFileName$1,
1904
- lineNumber: 257
1905
- }
1906
- }), !alwaysShowCorrect && React$2.createElement(CorrectAnswerToggle, {
1907
- show: showCorrectAnswerToggle,
1908
- toggled: showCorrect,
1909
- onToggle: this.onToggle.bind(this),
1910
- language: language,
1911
- __self: this,
1912
- __source: {
1913
- fileName: _jsxFileName$1,
1914
- lineNumber: 260
1915
- }
1916
- }), React$2.createElement('div', {
1917
- className: classNames({
1918
- [classes.gridLayout]: this.props.choicesLayout === 'grid',
1919
- [classes.horizontalLayout]: this.props.choicesLayout === 'horizontal'
1920
- }),
1921
- style: columnsStyle,
1922
- __self: this,
1923
- __source: {
1924
- fileName: _jsxFileName$1,
1925
- lineNumber: 268
1926
- }
1927
- }, choices.map((choice, index) => React$2.createElement(StyledChoice, {
1928
- choicesLayout: this.props.choicesLayout,
1929
- gridColumns: gridColumns,
1930
- key: `choice-${index}`,
1931
- choice: choice,
1932
- index: index,
1933
- choicesLength: choices.length,
1934
- showCorrect: showCorrect,
1935
- isEvaluateMode: isEvaluateMode,
1936
- choiceMode: choiceMode,
1937
- disabled: disabled,
1938
- updateSession: onChoiceChanged,
1939
- onChoiceChanged: this.props.choiceMode === 'radio' ? this.handleChange : this.handleChangeCheckboxes,
1940
- hideTick: choice.hideTick,
1941
- checked: this.getChecked(choice),
1942
- correctness: isEvaluateMode ? this.getCorrectness(choice) : undefined,
1943
- displayKey: this.indexToSymbol(index),
1944
- __self: this,
1945
- __source: {
1946
- fileName: _jsxFileName$1,
1947
- lineNumber: 276
1948
- }
1949
- })))));
1950
- }
1951
- }
1952
- MultipleChoice$1.__initStatic();
1953
- MultipleChoice$1.defaultProps = {
1954
- session: {
1955
- value: []
1956
- }
1957
- };
1958
- var MultipleChoice$2 = withStyles$1(styles$1)(MultipleChoice$1);
1959
- const React$1 = _dll_react;
1960
- const PropTypes = _dll_prop_types;
1961
- const {withStyles: withStyles} = _dll_material_ui__core_styles;
1962
- const {createMuiTheme: createMuiTheme} = _dll_material_ui__core_styles;
1963
- const {MuiThemeProvider: MuiThemeProvider} = _dll_material_ui__core_styles;
1964
- const {PreviewLayout: PreviewLayout} = _dll_pie_lib__pie_toolbox_render_ui;
1965
- const _jsxFileName = "/Users/andreeapescar/WORK/pie/pie-elements/packages/multiple-choice/src/main.jsx";
1966
- const styles = () => ({});
1967
- class Main extends React$1.Component {
1968
- static __initStatic() {
1969
- this.propTypes = {
1970
- model: PropTypes.object,
1971
- session: PropTypes.object,
1972
- onChoiceChanged: PropTypes.func,
1973
- classes: PropTypes.object.isRequired
1974
- };
1975
- }
1976
- static __initStatic2() {
1977
- this.defaultProps = {
1978
- model: {},
1979
- session: {}
1980
- };
1981
- }
1982
- constructor(props) {
1983
- super(props);
1984
- }
1985
- render() {
1986
- const {model, onChoiceChanged, session} = this.props;
1987
- return React$1.createElement(PreviewLayout, {
1988
- __self: this,
1989
- __source: {
1990
- fileName: _jsxFileName,
1991
- lineNumber: 31
1992
- }
1993
- }, React$1.createElement(MultipleChoice$2, {
1994
- ...model,
1995
- session: session,
1996
- onChoiceChanged: onChoiceChanged,
1997
- __self: this,
1998
- __source: {
1999
- fileName: _jsxFileName,
2000
- lineNumber: 32
2001
- }
2002
- }));
2003
- }
2004
- }
2005
- Main.__initStatic();
2006
- Main.__initStatic2();
2007
- const Styled = withStyles(styles, {
2008
- name: 'Main'
2009
- })(Main);
2010
- const theme = createMuiTheme({
2011
- typography: {
2012
- useNextVariants: true
2013
- }
2014
- });
2015
- const Root = props => React$1.createElement(MuiThemeProvider, {
2016
- theme: theme,
2017
- __self: undefined,
2018
- __source: {
2019
- fileName: _jsxFileName,
2020
- lineNumber: 47
2021
- }
2022
- }, React$1.createElement(Styled, {
2023
- ...props,
2024
- __self: undefined,
2025
- __source: {
2026
- fileName: _jsxFileName,
2027
- lineNumber: 48
2028
- }
2029
- }));
2030
- const {concat: concat} = _dll_lodash;
2031
- const {uniq: uniq} = _dll_lodash;
2032
- const {without: without} = _dll_lodash;
2033
- function updateSessionValue(session, choiceMode, data) {
2034
- session.value = session.value || [];
2035
- if (choiceMode === 'checkbox') {
2036
- if (data.selected) {
2037
- session.value = uniq(concat(session.value, [data.value]));
2038
- } else {
2039
- session.value = without(session.value, data.value);
2040
- }
2041
- }
2042
- if (choiceMode === 'radio') {
2043
- if (data.selected) {
2044
- session.value = [data.value];
2045
- } else {
2046
- session.value = [];
2047
- }
2048
- }
2049
- }
2050
- const React = _dll_react;
2051
- const ReactDOM = _dll_react_dom;
2052
- const {debounce: debounce} = _dll_lodash;
2053
- const debug$1 = _dll_debug;
2054
- const {renderMath: renderMath} = _dll_pie_lib__pie_toolbox_math_rendering;
2055
- const log$1 = debug$1('pie-ui:multiple-choice');
2056
- const isComplete = session => !!(session && session.value && session.value.length);
2057
- class MultipleChoice extends HTMLElement {
2058
- constructor() {
2059
- super();
2060
- this._model = null;
2061
- this._session = null;
2062
- this._rerender = debounce(() => {
2063
- if (this._model && this._session) {
2064
- var element = React.createElement(Root, {
2065
- model: this._model,
2066
- session: this._session,
2067
- onChoiceChanged: this._onChange.bind(this)
2068
- });
2069
- this.setAttribute('aria-label', this._model.choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question');
2070
- this.setAttribute('role', 'region');
2071
- ReactDOM.render(element, this, () => {
2072
- log$1('render complete - render math');
2073
- renderMath(this);
2074
- });
2075
- } else {
2076
- log$1('skip');
2077
- }
2078
- }, 50, {
2079
- leading: false,
2080
- trailing: true
2081
- });
2082
- this._dispatchResponseChanged = debounce(() => {
2083
- var event = new CustomEvent('session-changed', {
2084
- bubbles: true,
2085
- composed: true,
2086
- detail: {
2087
- complete: isComplete(this._session),
2088
- component: this.tagName.toLowerCase()
2089
- }
2090
- });
2091
- this.dispatchEvent(event);
2092
- });
2093
- this._dispatchModelSet = debounce(() => {
2094
- this.dispatchEvent(new CustomEvent('model-set', {
2095
- bubbles: true,
2096
- composed: true,
2097
- detail: {
2098
- complete: isComplete(this._session),
2099
- component: this.tagName.toLowerCase(),
2100
- hasModel: this._model !== undefined
2101
- }
2102
- }));
2103
- }, 50, {
2104
- leading: false,
2105
- trailing: true
2106
- });
2107
- }
2108
- set model(s) {
2109
- this._model = s;
2110
- this._rerender();
2111
- this._dispatchModelSet();
2112
- }
2113
- get session() {
2114
- return this._session;
2115
- }
2116
- set session(s) {
2117
- this._session = s;
2118
- this._rerender();
2119
- this._dispatchResponseChanged();
2120
- }
2121
- _onChange(data) {
2122
- updateSessionValue(this._session, this._model.choiceMode, data);
2123
- this._dispatchResponseChanged();
2124
- this._rerender();
2125
- }
2126
- connectedCallback() {
2127
- this._rerender();
2128
- }
2129
- }
2130
- var lib = {};
2131
- Object.defineProperty(lib, "__esModule", {
2132
- value: true
2133
- });
2134
- class ModelSetEvent extends CustomEvent {
2135
- constructor(component, complete, hasModel) {
2136
- super(ModelSetEvent.TYPE, {
2137
- bubbles: true,
2138
- composed: true,
2139
- detail: {
2140
- complete,
2141
- component,
2142
- hasModel
2143
- }
2144
- });
2145
- this.component = component;
2146
- this.complete = complete;
2147
- }
2148
- }
2149
- ModelSetEvent.TYPE = 'model-set';
2150
- lib.ModelSetEvent = ModelSetEvent;
2151
- class SessionChangedEvent extends CustomEvent {
2152
- constructor(component, complete) {
2153
- super(SessionChangedEvent.TYPE, {
2154
- bubbles: true,
2155
- composed: true,
2156
- detail: {
2157
- complete,
2158
- component
2159
- }
2160
- });
2161
- this.component = component;
2162
- this.complete = complete;
2163
- }
2164
- }
2165
- SessionChangedEvent.TYPE = 'session-changed';
2166
- var SessionChangedEvent_1 = lib.SessionChangedEvent = SessionChangedEvent;
2167
- const {cloneDeep: cloneDeep} = _dll_lodash;
2168
- const {get: get} = _dll_lodash;
2169
- const debug = _dll_debug;
2170
- const MC_TAG_NAME = 'ebsr-multiple-choice';
2171
- const SESSION_CHANGED = SessionChangedEvent_1.TYPE;
2172
- const log = debug('pie-element:ebsr:print');
2173
- const preparePrintModel = (model, opts) => {
2174
- const instr = opts.role === 'instructor';
2175
- model.prompt = model.promptEnabled !== false ? model.prompt : undefined;
2176
- model.teacherInstructions = instr && model.teacherInstructionsEnabled !== false ? model.teacherInstructions : undefined;
2177
- model.showTeacherInstructions = instr;
2178
- model.alwaysShowCorrect = instr;
2179
- model.mode = instr ? 'evaluate' : 'gather';
2180
- model.disabled = true;
2181
- model.animationsDisabled = true;
2182
- model.lockChoiceOrder = true;
2183
- model.choicesLayout = model.choicesLayout || 'vertical';
2184
- const choices = cloneDeep(model.choices);
2185
- model.choices = choices.map(c => {
2186
- c.rationale = instr && model.rationaleEnabled !== false ? c.rationale : undefined;
2187
- c.hideTick = instr;
2188
- c.feedback = undefined;
2189
- return c;
2190
- });
2191
- model.keyMode = model.choicePrefix || 'letters';
2192
- return model;
2193
- };
2194
- class EbsrMC extends MultipleChoice {}
2195
- const defineMultipleChoice = () => {
2196
- if (!customElements.get(MC_TAG_NAME)) {
2197
- customElements.define(MC_TAG_NAME, EbsrMC);
2198
- }
2199
- };
2200
- defineMultipleChoice();
2201
- const isNonEmptyArray = a => Array.isArray(a) && a.length > 0;
2202
- const isSessionComplete = session => {
2203
- const a = get(session, 'value.partA.value');
2204
- const b = get(session, 'value.partB.value');
2205
- return isNonEmptyArray(a) && isNonEmptyArray(b);
2206
- };
2207
- class Ebsr extends HTMLElement {
2208
- constructor() {
2209
- super();
2210
- Ebsr.prototype.__init.call(this);
2211
- this._model = {};
2212
- this._session = {};
2213
- this._options = null;
2214
- }
2215
- __init() {
2216
- this.onSessionUpdated = e => {
2217
- if (e.target === this) {
2218
- return;
2219
- }
2220
- e.preventDefault();
2221
- e.stopImmediatePropagation();
2222
- const id = e.target.getAttribute('id');
2223
- if (id) {
2224
- const key = `part${id.toUpperCase()}`;
2225
- if (e.update) {
2226
- this._model[key] = e.update;
2227
- }
2228
- this.dispatchSessionChanged(e.srcElement._session, key);
2229
- }
2230
- };
2231
- }
2232
- set model(m) {
2233
- this._model = m;
2234
- customElements.whenDefined(MC_TAG_NAME).then(() => {
2235
- this.setPartModel(this.partA, 'partA');
2236
- this.setPartModel(this.partB, 'partB');
2237
- });
2238
- }
2239
- set session(s) {
2240
- this._session = s;
2241
- customElements.whenDefined(MC_TAG_NAME).then(() => {
2242
- this.setPartSession(this.partA, 'partA');
2243
- this.setPartSession(this.partB, 'partB');
2244
- });
2245
- }
2246
- setPartModel(part, key) {
2247
- if (this._model && this._model[key] && part) {
2248
- part.model = {
2249
- ...preparePrintModel(this._model[key], this._options),
2250
- keyMode: this._model[key].choicePrefix
2251
- };
2252
- if (!part._session) {
2253
- part.session = {};
2254
- }
2255
- }
2256
- }
2257
- set options(o) {
2258
- this._options = o;
2259
- }
2260
- setPartSession(part, key) {
2261
- if (this._session && this._model && part) {
2262
- const {value} = this._session;
2263
- part.session = value && value[key] ? value[key] : {
2264
- id: key
2265
- };
2266
- }
2267
- }
2268
- dispatchSessionChanged(partSession, key) {
2269
- this._session.value = {
2270
- ...this._session.value,
2271
- [key]: partSession
2272
- };
2273
- log('[onSessionChanged] session: ', this._session);
2274
- const complete = isSessionComplete(this._session);
2275
- this.dispatchEvent(new SessionChangedEvent_1(this.tagName.toLowerCase(), complete));
2276
- }
2277
- get partA() {
2278
- return this.querySelector(`${MC_TAG_NAME}#a`);
2279
- }
2280
- get partB() {
2281
- return this.querySelector(`${MC_TAG_NAME}#b`);
2282
- }
2283
- connectedCallback() {
2284
- this._render();
2285
- this.addEventListener(SESSION_CHANGED, this.onSessionUpdated);
2286
- }
2287
- disconnectedCallback() {
2288
- this.removeEventListener(SESSION_CHANGED, this.onSessionUpdated);
2289
- }
2290
- _render() {
2291
- this.innerHTML = `
2292
- <div>
2293
- <${MC_TAG_NAME} id="a"></${MC_TAG_NAME}>
2294
- <${MC_TAG_NAME} id="b"></${MC_TAG_NAME}>
2295
- </div>
2296
- `;
2297
- }
2298
- }
2299
- export {Ebsr as default, isSessionComplete};