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