@micromag/screen-quiz 0.3.152 → 0.3.153

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.
Files changed (3) hide show
  1. package/es/index.js +23 -26
  2. package/lib/index.js +23 -26
  3. package/package.json +13 -12
package/es/index.js CHANGED
@@ -74,7 +74,7 @@ var defaultProps$5 = {
74
74
  };
75
75
 
76
76
  var Answers = function Answers(_ref) {
77
- var _ref3;
77
+ var _ref4;
78
78
 
79
79
  var items = _ref.items,
80
80
  answeredIndex = _ref.answeredIndex,
@@ -123,6 +123,11 @@ var Answers = function Answers(_ref) {
123
123
  var rightAnswerTop = useMemo(function () {
124
124
  return rightAnswerRef.current !== null ? rightAnswerRef.current.offsetTop : 0;
125
125
  }, [rightAnswerHeight]);
126
+ var hasRightAnswer = items !== null && !isPlaceholder ? items.reduce(function (hasGood, _ref3) {
127
+ var _ref3$good = _ref3.good,
128
+ good = _ref3$good === void 0 ? false : _ref3$good;
129
+ return hasGood || good;
130
+ }, false) : false;
126
131
  var shouldCollapse = !withoutGoodAnswer || showUserAnswer && answeredIndex !== null;
127
132
 
128
133
  var _useState = useState(answeredIndex !== null),
@@ -168,7 +173,7 @@ var Answers = function Answers(_ref) {
168
173
  }
169
174
  }, [shouldCollapse, answersCollapsed, answersDidCollapsed, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
170
175
  return /*#__PURE__*/React.createElement("div", {
171
- className: classNames([styles$4.container, (_ref3 = {}, _defineProperty(_ref3, styles$4.answered, answered), _defineProperty(_ref3, styles$4.withoutGoodAnswer, withoutGoodAnswer), _defineProperty(_ref3, styles$4.withGoodAnswer, !withoutGoodAnswer), _defineProperty(_ref3, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty(_ref3, styles$4.didCollapsed, shouldCollapse && answersDidCollapsed), _defineProperty(_ref3, styles$4.isPlaceholder, isPlaceholder), _defineProperty(_ref3, className, className !== null), _ref3)]),
176
+ className: classNames([styles$4.container, (_ref4 = {}, _defineProperty(_ref4, styles$4.answered, answered), _defineProperty(_ref4, styles$4.withoutGoodAnswer, withoutGoodAnswer), _defineProperty(_ref4, styles$4.withGoodAnswer, !withoutGoodAnswer), _defineProperty(_ref4, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty(_ref4, styles$4.didCollapsed, shouldCollapse && answersDidCollapsed), _defineProperty(_ref4, styles$4.isPlaceholder, isPlaceholder), _defineProperty(_ref4, className, className !== null), _ref4)]),
172
177
  ref: answerRef,
173
178
  style: answered && !answersDidCollapsed && (isView || isEdit) && shouldCollapse ? {
174
179
  height: answersCollapsed ? rightAnswerHeight : answerHeight
@@ -176,23 +181,23 @@ var Answers = function Answers(_ref) {
176
181
  }, items !== null || isPlaceholder ? /*#__PURE__*/React.createElement("div", {
177
182
  className: styles$4.items
178
183
  }, (isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray(new Array(2)) : items).map(function (answer, answerI) {
179
- var _ref6;
184
+ var _ref7;
180
185
 
181
186
  var userAnswer = answerI === answeredIndex;
182
187
 
183
- var _ref4 = answer || {},
184
- _ref4$good = _ref4.good,
185
- rightAnswer = _ref4$good === void 0 ? false : _ref4$good,
186
- _ref4$label = _ref4.label,
187
- label = _ref4$label === void 0 ? null : _ref4$label,
188
- _ref4$buttonStyle = _ref4.buttonStyle,
189
- answerButtonStyle = _ref4$buttonStyle === void 0 ? null : _ref4$buttonStyle,
190
- _ref4$textStyle = _ref4.textStyle,
191
- answerButtonTextStyle = _ref4$textStyle === void 0 ? null : _ref4$textStyle;
192
-
193
- var _ref5 = label || {},
188
+ var _ref5 = answer || {},
189
+ _ref5$good = _ref5.good,
190
+ rightAnswer = _ref5$good === void 0 ? false : _ref5$good,
191
+ _ref5$label = _ref5.label,
192
+ label = _ref5$label === void 0 ? null : _ref5$label,
193
+ _ref5$buttonStyle = _ref5.buttonStyle,
194
+ answerButtonStyle = _ref5$buttonStyle === void 0 ? null : _ref5$buttonStyle,
194
195
  _ref5$textStyle = _ref5.textStyle,
195
- textStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle;
196
+ answerButtonTextStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle;
197
+
198
+ var _ref6 = label || {},
199
+ _ref6$textStyle = _ref6.textStyle,
200
+ textStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle;
196
201
 
197
202
  var hasAnswer = isTextFilled(label);
198
203
  var hasFinalUserAnswer = showUserAnswer && answeredIndex !== null; // Hide bad answers
@@ -208,8 +213,8 @@ var Answers = function Answers(_ref) {
208
213
 
209
214
  return /*#__PURE__*/React.createElement("div", {
210
215
  key: "answer-".concat(answerI),
211
- ref: rightAnswer ? rightAnswerRef : null,
212
- className: classNames([styles$4.item, (_ref6 = {}, _defineProperty(_ref6, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty(_ref6, styles$4.userAnswer, userAnswer && !showUserAnswer), _defineProperty(_ref6, styles$4.isUserAnswer, userAnswer && hasFinalUserAnswer), _ref6)]),
216
+ ref: rightAnswer && hasRightAnswer || !hasRightAnswer && userAnswer ? rightAnswerRef : null,
217
+ className: classNames([styles$4.item, (_ref7 = {}, _defineProperty(_ref7, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty(_ref7, styles$4.userAnswer, userAnswer && !showUserAnswer), _defineProperty(_ref7, styles$4.isUserAnswer, userAnswer && hasFinalUserAnswer), _ref7)]),
213
218
  style: answersCollapsed && rightAnswer && !answersDidCollapsed && shouldCollapse ? {
214
219
  transform: "translateY(".concat(-rightAnswerTop, "px)")
215
220
  } : null,
@@ -285,7 +290,6 @@ var propTypes$4 = {
285
290
  badAnswerColor: PropTypes.color,
286
291
  focusable: PropTypes$1.bool,
287
292
  layout: PropTypes$1.string,
288
- callToActionHeight: PropTypes$1.number,
289
293
  showInstantAnswer: PropTypes$1.bool,
290
294
  withResult: PropTypes$1.bool,
291
295
  withoutGoodAnswer: PropTypes$1.bool,
@@ -314,7 +318,6 @@ var defaultProps$4 = {
314
318
  badAnswerColor: null,
315
319
  focusable: false,
316
320
  layout: null,
317
- callToActionHeight: null,
318
321
  showInstantAnswer: false,
319
322
  withResult: false,
320
323
  withoutGoodAnswer: false,
@@ -351,7 +354,6 @@ var Question = function Question(_ref) {
351
354
  withoutTrueFalse = _ref.withoutTrueFalse,
352
355
  withoutIndex = _ref.withoutIndex,
353
356
  layout = _ref.layout,
354
- callToActionHeight = _ref.callToActionHeight,
355
357
  transitions = _ref.transitions,
356
358
  transitionPlaying = _ref.transitionPlaying,
357
359
  transitionStagger = _ref.transitionStagger,
@@ -461,11 +463,7 @@ var Question = function Question(_ref) {
461
463
  disabled: transitionDisabled
462
464
  }, /*#__PURE__*/React.createElement(Text, Object.assign({}, result, {
463
465
  className: styles$3.resultText
464
- })), callToActionHeight !== null ? /*#__PURE__*/React.createElement("div", {
465
- style: {
466
- height: callToActionHeight
467
- }
468
- }) : null) : null))) : null]);
466
+ }))) : null))) : null]);
469
467
  };
470
468
 
471
469
  Question.propTypes = propTypes$4;
@@ -1363,7 +1361,6 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1363
1361
  showInstantAnswer: showInstantAnswer,
1364
1362
  layout: questionLayout || layout,
1365
1363
  withoutGoodAnswer: true,
1366
- callToActionHeight: callToActionHeight,
1367
1364
  transitions: transitions,
1368
1365
  transitionPlaying: transitionPlaying,
1369
1366
  transitionStagger: transitionStagger,
package/lib/index.js CHANGED
@@ -96,7 +96,7 @@ var defaultProps$5 = {
96
96
  };
97
97
 
98
98
  var Answers = function Answers(_ref) {
99
- var _ref3;
99
+ var _ref4;
100
100
 
101
101
  var items = _ref.items,
102
102
  answeredIndex = _ref.answeredIndex,
@@ -145,6 +145,11 @@ var Answers = function Answers(_ref) {
145
145
  var rightAnswerTop = React.useMemo(function () {
146
146
  return rightAnswerRef.current !== null ? rightAnswerRef.current.offsetTop : 0;
147
147
  }, [rightAnswerHeight]);
148
+ var hasRightAnswer = items !== null && !isPlaceholder ? items.reduce(function (hasGood, _ref3) {
149
+ var _ref3$good = _ref3.good,
150
+ good = _ref3$good === void 0 ? false : _ref3$good;
151
+ return hasGood || good;
152
+ }, false) : false;
148
153
  var shouldCollapse = !withoutGoodAnswer || showUserAnswer && answeredIndex !== null;
149
154
 
150
155
  var _useState = React.useState(answeredIndex !== null),
@@ -190,7 +195,7 @@ var Answers = function Answers(_ref) {
190
195
  }
191
196
  }, [shouldCollapse, answersCollapsed, answersDidCollapsed, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
192
197
  return /*#__PURE__*/React__default["default"].createElement("div", {
193
- className: classNames__default["default"]([styles$4.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$4.answered, answered), _defineProperty__default["default"](_ref3, styles$4.withoutGoodAnswer, withoutGoodAnswer), _defineProperty__default["default"](_ref3, styles$4.withGoodAnswer, !withoutGoodAnswer), _defineProperty__default["default"](_ref3, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty__default["default"](_ref3, styles$4.didCollapsed, shouldCollapse && answersDidCollapsed), _defineProperty__default["default"](_ref3, styles$4.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref3, className, className !== null), _ref3)]),
198
+ className: classNames__default["default"]([styles$4.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, styles$4.answered, answered), _defineProperty__default["default"](_ref4, styles$4.withoutGoodAnswer, withoutGoodAnswer), _defineProperty__default["default"](_ref4, styles$4.withGoodAnswer, !withoutGoodAnswer), _defineProperty__default["default"](_ref4, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty__default["default"](_ref4, styles$4.didCollapsed, shouldCollapse && answersDidCollapsed), _defineProperty__default["default"](_ref4, styles$4.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref4, className, className !== null), _ref4)]),
194
199
  ref: answerRef,
195
200
  style: answered && !answersDidCollapsed && (isView || isEdit) && shouldCollapse ? {
196
201
  height: answersCollapsed ? rightAnswerHeight : answerHeight
@@ -198,23 +203,23 @@ var Answers = function Answers(_ref) {
198
203
  }, items !== null || isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
199
204
  className: styles$4.items
200
205
  }, (isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray__default["default"](new Array(2)) : items).map(function (answer, answerI) {
201
- var _ref6;
206
+ var _ref7;
202
207
 
203
208
  var userAnswer = answerI === answeredIndex;
204
209
 
205
- var _ref4 = answer || {},
206
- _ref4$good = _ref4.good,
207
- rightAnswer = _ref4$good === void 0 ? false : _ref4$good,
208
- _ref4$label = _ref4.label,
209
- label = _ref4$label === void 0 ? null : _ref4$label,
210
- _ref4$buttonStyle = _ref4.buttonStyle,
211
- answerButtonStyle = _ref4$buttonStyle === void 0 ? null : _ref4$buttonStyle,
212
- _ref4$textStyle = _ref4.textStyle,
213
- answerButtonTextStyle = _ref4$textStyle === void 0 ? null : _ref4$textStyle;
214
-
215
- var _ref5 = label || {},
210
+ var _ref5 = answer || {},
211
+ _ref5$good = _ref5.good,
212
+ rightAnswer = _ref5$good === void 0 ? false : _ref5$good,
213
+ _ref5$label = _ref5.label,
214
+ label = _ref5$label === void 0 ? null : _ref5$label,
215
+ _ref5$buttonStyle = _ref5.buttonStyle,
216
+ answerButtonStyle = _ref5$buttonStyle === void 0 ? null : _ref5$buttonStyle,
216
217
  _ref5$textStyle = _ref5.textStyle,
217
- textStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle;
218
+ answerButtonTextStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle;
219
+
220
+ var _ref6 = label || {},
221
+ _ref6$textStyle = _ref6.textStyle,
222
+ textStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle;
218
223
 
219
224
  var hasAnswer = utils.isTextFilled(label);
220
225
  var hasFinalUserAnswer = showUserAnswer && answeredIndex !== null; // Hide bad answers
@@ -230,8 +235,8 @@ var Answers = function Answers(_ref) {
230
235
 
231
236
  return /*#__PURE__*/React__default["default"].createElement("div", {
232
237
  key: "answer-".concat(answerI),
233
- ref: rightAnswer ? rightAnswerRef : null,
234
- className: classNames__default["default"]([styles$4.item, (_ref6 = {}, _defineProperty__default["default"](_ref6, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty__default["default"](_ref6, styles$4.userAnswer, userAnswer && !showUserAnswer), _defineProperty__default["default"](_ref6, styles$4.isUserAnswer, userAnswer && hasFinalUserAnswer), _ref6)]),
238
+ ref: rightAnswer && hasRightAnswer || !hasRightAnswer && userAnswer ? rightAnswerRef : null,
239
+ className: classNames__default["default"]([styles$4.item, (_ref7 = {}, _defineProperty__default["default"](_ref7, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty__default["default"](_ref7, styles$4.userAnswer, userAnswer && !showUserAnswer), _defineProperty__default["default"](_ref7, styles$4.isUserAnswer, userAnswer && hasFinalUserAnswer), _ref7)]),
235
240
  style: answersCollapsed && rightAnswer && !answersDidCollapsed && shouldCollapse ? {
236
241
  transform: "translateY(".concat(-rightAnswerTop, "px)")
237
242
  } : null,
@@ -307,7 +312,6 @@ var propTypes$4 = {
307
312
  badAnswerColor: core.PropTypes.color,
308
313
  focusable: PropTypes__default["default"].bool,
309
314
  layout: PropTypes__default["default"].string,
310
- callToActionHeight: PropTypes__default["default"].number,
311
315
  showInstantAnswer: PropTypes__default["default"].bool,
312
316
  withResult: PropTypes__default["default"].bool,
313
317
  withoutGoodAnswer: PropTypes__default["default"].bool,
@@ -336,7 +340,6 @@ var defaultProps$4 = {
336
340
  badAnswerColor: null,
337
341
  focusable: false,
338
342
  layout: null,
339
- callToActionHeight: null,
340
343
  showInstantAnswer: false,
341
344
  withResult: false,
342
345
  withoutGoodAnswer: false,
@@ -373,7 +376,6 @@ var Question = function Question(_ref) {
373
376
  withoutTrueFalse = _ref.withoutTrueFalse,
374
377
  withoutIndex = _ref.withoutIndex,
375
378
  layout = _ref.layout,
376
- callToActionHeight = _ref.callToActionHeight,
377
379
  transitions = _ref.transitions,
378
380
  transitionPlaying = _ref.transitionPlaying,
379
381
  transitionStagger = _ref.transitionStagger,
@@ -483,11 +485,7 @@ var Question = function Question(_ref) {
483
485
  disabled: transitionDisabled
484
486
  }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, result, {
485
487
  className: styles$3.resultText
486
- })), callToActionHeight !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
487
- style: {
488
- height: callToActionHeight
489
- }
490
- }) : null) : null))) : null]);
488
+ }))) : null))) : null]);
491
489
  };
492
490
 
493
491
  Question.propTypes = propTypes$4;
@@ -1385,7 +1383,6 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1385
1383
  showInstantAnswer: showInstantAnswer,
1386
1384
  layout: questionLayout || layout,
1387
1385
  withoutGoodAnswer: true,
1388
- callToActionHeight: callToActionHeight,
1389
1386
  transitions: transitions,
1390
1387
  transitionPlaying: transitionPlaying,
1391
1388
  transitionStagger: transitionStagger,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-quiz",
3
- "version": "0.3.152",
3
+ "version": "0.3.153",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -52,16 +52,17 @@
52
52
  "@fortawesome/fontawesome-svg-core": "^1.2.32",
53
53
  "@fortawesome/free-solid-svg-icons": "^5.15.1",
54
54
  "@fortawesome/react-fontawesome": "^0.1.13",
55
- "@micromag/core": "^0.3.152",
56
- "@micromag/data": "^0.3.152",
57
- "@micromag/element-background": "^0.3.152",
58
- "@micromag/element-button": "^0.3.152",
59
- "@micromag/element-call-to-action": "^0.3.152",
60
- "@micromag/element-container": "^0.3.152",
61
- "@micromag/element-heading": "^0.3.152",
62
- "@micromag/element-layout": "^0.3.152",
63
- "@micromag/element-text": "^0.3.152",
64
- "@micromag/transforms": "^0.3.152",
55
+ "@micromag/core": "^0.3.153",
56
+ "@micromag/data": "^0.3.153",
57
+ "@micromag/element-background": "^0.3.153",
58
+ "@micromag/element-button": "^0.3.153",
59
+ "@micromag/element-call-to-action": "^0.3.153",
60
+ "@micromag/element-container": "^0.3.153",
61
+ "@micromag/element-heading": "^0.3.153",
62
+ "@micromag/element-layout": "^0.3.153",
63
+ "@micromag/element-scroll": "^0.3.153",
64
+ "@micromag/element-text": "^0.3.153",
65
+ "@micromag/transforms": "^0.3.153",
65
66
  "classnames": "^2.2.6",
66
67
  "lodash": "^4.17.21",
67
68
  "prop-types": "^15.7.2",
@@ -72,5 +73,5 @@
72
73
  "publishConfig": {
73
74
  "access": "public"
74
75
  },
75
- "gitHead": "23db6c104c10cc70a73366c8b04576a312a36206"
76
+ "gitHead": "3832de24bc306639b162f9778b3250ce1d05b2aa"
76
77
  }