@micromag/screen-quiz 0.3.663 → 0.3.667

package/es/index.js

@@ -51,6 +51,7 @@ var propTypes$5 = {
   onCollapse: PropTypes.func,
   onCollapsed: PropTypes.func,
   onTransitionEnd: PropTypes.func,
+  withoutCollapse: PropTypes.bool,
   className: PropTypes.string
 };
 var defaultProps$5 = {
@@ -72,6 +73,7 @@ var defaultProps$5 = {
   onCollapse: null,
   onCollapsed: null,
   onTransitionEnd: null,
+  withoutCollapse: false,
   className: null
 };
 var Answers = function Answers(_ref) {
@@ -94,6 +96,7 @@ var Answers = function Answers(_ref) {
     onCollapse = _ref.onCollapse,
     onCollapsed = _ref.onCollapsed,
     onTransitionEnd = _ref.onTransitionEnd,
+    withoutCollapse = _ref.withoutCollapse,
     className = _ref.className;
   var _useScreenRenderConte = useScreenRenderContext(),
     isView = _useScreenRenderConte.isView,
@@ -114,7 +117,7 @@ var Answers = function Answers(_ref) {
     return hasGood || good;
   }, false) : false;
   var finalShowUserAnswer = showUserAnswer || !hasRightAnswer;
-  var shouldCollapse = !withoutGoodAnswer || finalShowUserAnswer && answeredIndex !== null;
+  var shouldCollapse = (!withoutGoodAnswer || finalShowUserAnswer && answeredIndex !== null) && !withoutCollapse;
   var _useState3 = useState(answeredIndex !== null),
     _useState4 = _slicedToArray(_useState3, 2),
     answersCollapsed = _useState4[0],
@@ -136,6 +139,18 @@ var Answers = function Answers(_ref) {
           onCollapse();
         }
       }, hasAnsweredRight || finalShowUserAnswer ? 500 : answersCollapseDelay);
+    } else if (answeredIndex !== null && !shouldCollapse) {
+      timeout = setTimeout(function () {
+        if (onCollapse !== null) {
+          onCollapse();
+        }
+        if (onCollapsed !== null) {
+          onCollapsed();
+        }
+        if (onTransitionEnd !== null) {
+          onTransitionEnd();
+        }
+      }, answersCollapseDelay);
     } else if (answeredIndex === null && shouldCollapse) {
       setAnswersCollapsed(false);
     }
@@ -144,7 +159,7 @@ var Answers = function Answers(_ref) {
         clearTimeout(timeout);
       }
     };
-  }, [answeredIndex, withoutGoodAnswer, setAnswersCollapsed, onCollapse, answersCollapseDelay, hasAnsweredRight, finalShowUserAnswer]);
+  }, [answeredIndex, withoutGoodAnswer, setAnswersCollapsed, onCollapse, onCollapsed, onTransitionEnd, answersCollapseDelay, hasAnsweredRight, finalShowUserAnswer, shouldCollapse]);
   useEffect(function () {
     var timeout = null;
     if (answersCollapsed) {
@@ -351,6 +366,7 @@ var propTypes$4 = {
   inactiveButtonsTextStyle: PropTypes$1.textStyle,
   questionsHeadingStyle: PropTypes$1.textStyle,
   feedbackTextStyle: PropTypes$1.textStyle,
+  numbersTextStyle: PropTypes$1.textStyle,
   goodAnswerColor: PropTypes$1.color,
   badAnswerColor: PropTypes$1.color,
   focusable: PropTypes.bool,
@@ -367,6 +383,7 @@ var propTypes$4 = {
   transitionDisabled: PropTypes.bool,
   onAnswerClick: PropTypes.func,
   onAnswerTransitionEnd: PropTypes.func,
+  withoutCollapse: PropTypes.bool,
   className: PropTypes.string,
   style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
 };
@@ -384,6 +401,7 @@ var defaultProps$4 = {
   inactiveButtonsTextStyle: null,
   questionsHeadingStyle: null,
   feedbackTextStyle: null,
+  numbersTextStyle: null,
   goodAnswerColor: null,
   badAnswerColor: null,
   focusable: false,
@@ -400,6 +418,7 @@ var defaultProps$4 = {
   transitionDisabled: false,
   onAnswerClick: null,
   onAnswerTransitionEnd: null,
+  withoutCollapse: false,
   className: null,
   style: null
 };
@@ -417,6 +436,7 @@ var Question = function Question(_ref) {
     inactiveButtonsTextStyle = _ref.inactiveButtonsTextStyle,
     questionsHeadingStyle = _ref.questionsHeadingStyle,
     feedbackTextStyle = _ref.feedbackTextStyle,
+    numbersTextStyle = _ref.numbersTextStyle,
     goodAnswerColor = _ref.goodAnswerColor,
     badAnswerColor = _ref.badAnswerColor,
     focusable = _ref.focusable,
@@ -433,6 +453,7 @@ var Question = function Question(_ref) {
     transitionDisabled = _ref.transitionDisabled,
     onAnswerClick = _ref.onAnswerClick,
     onAnswerTransitionEnd = _ref.onAnswerTransitionEnd,
+    withoutCollapse = _ref.withoutCollapse,
     className = _ref.className,
     style = _ref.style;
   var _useScreenRenderConte = useScreenRenderContext(),
@@ -479,9 +500,11 @@ var Question = function Question(_ref) {
     transitions: transitions,
     playing: transitionPlaying,
     disabled: transitionDisabled
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$3.index
-  }, index + 1, " / ", totalCount)) : null) : null, /*#__PURE__*/React.createElement(ScreenElement, {
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: styles$3.index,
+    body: "".concat(index + 1, " / ").concat(totalCount),
+    textStyle: numbersTextStyle
+  })) : null) : null, /*#__PURE__*/React.createElement(ScreenElement, {
     key: "question",
     placeholder: "title",
     emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -523,9 +546,10 @@ var Question = function Question(_ref) {
     transitionDisabled: transitionDisabled,
     onClick: onAnswerClick,
     onCollapse: onAnswersCollapse,
-    onTransitionEnd: onAnswerTransitionEnd
+    onTransitionEnd: onAnswerTransitionEnd,
+    withoutCollapse: withoutCollapse
   }), withResult ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$3.result]),
+    className: styles$3.result,
     key: "results"
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$3.resultContent
@@ -573,6 +597,7 @@ var propTypes$3 = {
   buttonsTextStyle: PropTypes$1.textStyle,
   inactiveButtonsTextStyle: PropTypes$1.textStyle,
   feedbackTextStyle: PropTypes$1.textStyle,
+  numbersTextStyle: PropTypes$1.textStyle,
   goodAnswerColor: PropTypes$1.color,
   badAnswerColor: PropTypes$1.color,
   withoutTrueFalse: PropTypes.bool,
@@ -600,6 +625,7 @@ var defaultProps$3 = {
   buttonsTextStyle: null,
   inactiveButtonsTextStyle: null,
   feedbackTextStyle: null,
+  numbersTextStyle: null,
   goodAnswerColor: null,
   badAnswerColor: null,
   withoutTrueFalse: false,
@@ -627,6 +653,7 @@ var QuizScreen = function QuizScreen(_ref) {
     buttonsTextStyle = _ref.buttonsTextStyle,
     inactiveButtonsTextStyle = _ref.inactiveButtonsTextStyle,
     feedbackTextStyle = _ref.feedbackTextStyle,
+    numbersTextStyle = _ref.numbersTextStyle,
     goodAnswerColor = _ref.goodAnswerColor,
     badAnswerColor = _ref.badAnswerColor,
     withoutTrueFalse = _ref.withoutTrueFalse,
@@ -809,6 +836,7 @@ var QuizScreen = function QuizScreen(_ref) {
     inactiveButtonsStyle: inactiveButtonsStyle,
     inactiveButtonsTextStyle: inactiveButtonsTextStyle,
     feedbackTextStyle: feedbackTextStyle,
+    numbersTextStyle: numbersTextStyle,
     goodAnswerColor: goodAnswerColor,
     badAnswerColor: badAnswerColor,
     withoutTrueFalse: withoutTrueFalse,
@@ -1074,6 +1102,8 @@ var propTypes = {
   questionsHeadingStyle: PropTypes$1.textStyle,
   resultsHeadingStyle: PropTypes$1.textStyle,
   resultsTextStyle: PropTypes$1.textStyle,
+  feedbackTextStyle: PropTypes$1.textStyle,
+  numbersTextStyle: PropTypes$1.textStyle,
   goodAnswerColor: PropTypes$1.color,
   badAnswerColor: PropTypes$1.color,
   spacing: PropTypes.number,
@@ -1105,6 +1135,8 @@ var defaultProps = {
   questionsHeadingStyle: null,
   resultsHeadingStyle: null,
   resultsTextStyle: null,
+  feedbackTextStyle: null,
+  numbersTextStyle: null,
   goodAnswerColor: null,
   badAnswerColor: null,
   spacing: 20,
@@ -1136,6 +1168,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     questionsHeadingStyle = _ref.questionsHeadingStyle,
     resultsHeadingStyle = _ref.resultsHeadingStyle,
     resultsTextStyle = _ref.resultsTextStyle,
+    feedbackTextStyle = _ref.feedbackTextStyle,
+    numbersTextStyle = _ref.numbersTextStyle,
     goodAnswerColor = _ref.goodAnswerColor,
     badAnswerColor = _ref.badAnswerColor,
     spacing = _ref.spacing,
@@ -1261,11 +1295,17 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
   var _ref5 = answer || {},
     _ref5$result = _ref5.result,
     answerResult = _ref5$result === void 0 ? null : _ref5$result;
-  var firstCustomResult = (answers || []).find(function () {
-    var it = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    return (it === null || it === void 0 ? void 0 : it.result) !== null;
-  }) || null;
-  var hasResult = questionResult !== null || questionResultImage !== null || answerResult !== null || firstCustomResult !== null;
+  var hasTrueFalse = answers !== null ? (answers || []).find(function (ans) {
+    return (ans === null || ans === void 0 ? void 0 : ans.good) === true || (ans === null || ans === void 0 ? void 0 : ans.good) === false;
+  }) !== undefined : false;
+  var goodAnswerIndex = answers !== null ? answers.findIndex(function (ans) {
+    return ans !== null && ans.good === true;
+  }) : null;
+  var withoutGoodAnswer = goodAnswerIndex === null || goodAnswerIndex === -1;
+  var questionResultHasText = isTextFilled(questionResult);
+  var questionResultHasImage = isImageFilled(questionResultImage);
+  var answerResultHasText = isTextFilled(answerResult);
+  var hasResult = questionResultHasText || questionResultHasImage || answerResultHasText;
   var onNextSlide = useCallback(function () {
     if (isEdit) {
       return;
@@ -1492,6 +1532,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     buttonsTextStyle: buttonsTextStyle,
     inactiveButtonsTextStyle: inactiveButtonsTextStyle,
     questionsHeadingStyle: questionsHeadingStyle,
+    feedbackTextStyle: feedbackTextStyle,
+    numbersTextStyle: numbersTextStyle,
     goodAnswerColor: goodAnswerColor,
     badAnswerColor: badAnswerColor,
     focusable: current && isView,
@@ -1500,8 +1542,9 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     result: questionResult,
     resultImage: questionResultImage,
     withResult: hasResult,
-    withoutGoodAnswer: true,
-    withoutTrueFalse: true,
+    withoutGoodAnswer: withoutGoodAnswer,
+    withoutTrueFalse: !hasTrueFalse,
+    withoutCollapse: hasTrueFalse,
     transitions: transitions,
     transitionPlaying: transitionPlaying,
     transitionStagger: transitionStagger,
@@ -2145,6 +2188,16 @@ var definition = [{
           "value": "Results description"
         }]
       })
+    }, {
+      name: 'numbersTextStyle',
+      type: 'text-style-form',
+      label: defineMessage({
+        id: "iltluX",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Numbers text"
+        }]
+      })
     }]
   }, {
     name: 'nextButton',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-quiz",
-    "version": "0.3.663",
+    "version": "0.3.667",
     "private": false,
     "description": "",
     "keywords": [
@@ -63,19 +63,19 @@
         "@fortawesome/fontawesome-svg-core": "^6.5.2",
         "@fortawesome/free-solid-svg-icons": "^6.5.2",
         "@fortawesome/react-fontawesome": "^0.2.0",
-        "@micromag/core": "^0.3.660",
-        "@micromag/data": "^0.3.660",
-        "@micromag/element-background": "^0.3.660",
-        "@micromag/element-button": "^0.3.660",
-        "@micromag/element-container": "^0.3.660",
-        "@micromag/element-footer": "^0.3.660",
-        "@micromag/element-header": "^0.3.663",
-        "@micromag/element-heading": "^0.3.660",
-        "@micromag/element-layout": "^0.3.660",
-        "@micromag/element-scroll": "^0.3.660",
-        "@micromag/element-text": "^0.3.660",
-        "@micromag/element-visual": "^0.3.660",
-        "@micromag/transforms": "^0.3.660",
+        "@micromag/core": "^0.3.667",
+        "@micromag/data": "^0.3.667",
+        "@micromag/element-background": "^0.3.667",
+        "@micromag/element-button": "^0.3.667",
+        "@micromag/element-container": "^0.3.667",
+        "@micromag/element-footer": "^0.3.667",
+        "@micromag/element-header": "^0.3.667",
+        "@micromag/element-heading": "^0.3.667",
+        "@micromag/element-layout": "^0.3.667",
+        "@micromag/element-scroll": "^0.3.667",
+        "@micromag/element-text": "^0.3.667",
+        "@micromag/element-visual": "^0.3.667",
+        "@micromag/transforms": "^0.3.667",
         "@react-spring/core": "^9.6.1",
         "@react-spring/web": "^9.6.1",
         "classnames": "^2.2.6",
@@ -89,5 +89,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "7bb0a6ff3488b29b413b4614c774edc7ca1540f7"
+    "gitHead": "8974de0b7dbe3ab5d632d0449b7a25ee20336a1c"
 }