@micromag/screen-quiz 0.3.362 → 0.3.364

package/es/index.js

@@ -24,7 +24,7 @@ import Text from '@micromag/element-text';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
-import { useTransition, config, animated } from '@react-spring/web';
+import { animated, useTransition } from '@react-spring/web';
 import Button from '@micromag/element-button';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 
@@ -52,7 +52,7 @@ var propTypes$5 = {
 };
 var defaultProps$5 = {
   answeredIndex: null,
-  answersCollapseDelay: 2000,
+  answersCollapseDelay: 1000,
   buttonsStyle: null,
   buttonsTextStyle: null,
   goodAnswerColor: null,
@@ -117,6 +117,10 @@ var Answers = function Answers(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     answersDidCollapse = _useState6[0],
     setAnswersDidCollapse = _useState6[1];
+  var _useState7 = useState(initialCollapsed || answeredIndex !== null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    answersFinalCollapse = _useState8[0],
+    setAnswersFinalCollapse = _useState8[1];
   useEffect(function () {
     var timeout = null;
     if (answeredIndex !== null && shouldCollapse) {
@@ -135,6 +139,19 @@ var Answers = function Answers(_ref) {
       }
     };
   }, [answeredIndex, withoutGoodAnswer, setAnswersCollapsed, onCollapse, answersCollapseDelay, hasAnsweredRight, finalShowUserAnswer]);
+  useEffect(function () {
+    var timeout = null;
+    if (answersCollapsed) {
+      timeout = setTimeout(function () {
+        setAnswersFinalCollapse(true);
+      }, 200);
+    }
+    return function () {
+      if (timeout !== null) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [answersCollapsed]);
   var onAnswerTransitionEnd = useCallback(function () {
     if (onTransitionEnd !== null) {
       onTransitionEnd();
@@ -149,17 +166,20 @@ var Answers = function Answers(_ref) {
   var itemsRefs = useRef([]);
   var listOfItems = isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray(new Array(2)) : items;
   var heights = useMemo(function () {
-    var allHeights = listOfItems.reduce(function (acc, it, i) {
-      if (itemsRefs.current[i] && collapseAnimated) {
-        var _ref4 = itemsRefs.current[i].getBoundingClientRect() || {},
-          _ref4$height = _ref4.height,
-          height = _ref4$height === void 0 ? 0 : _ref4$height;
-        acc.push(height);
-      }
-      return acc;
-    }, []);
-    return allHeights;
-  }, [answeredIndex, shouldCollapse, collapseAnimated, listOfItems]);
+    if (animated) {
+      var allHeights = listOfItems.reduce(function (acc, it, i) {
+        if (itemsRefs.current[i] && collapseAnimated) {
+          var _ref4 = itemsRefs.current[i].getBoundingClientRect() || {},
+            _ref4$height = _ref4.height,
+            height = _ref4$height === void 0 ? 0 : _ref4$height;
+          acc.push(height);
+        }
+        return acc;
+      }, []);
+      return allHeights;
+    }
+    return [];
+  }, [animated, answeredIndex, shouldCollapse, collapseAnimated, listOfItems]);
   var showAnimation = isView || isEdit;
   var filteredListOfItems = listOfItems.map(function (answer, answerI) {
     var height = heights[answerI] ? heights[answerI] : 0;
@@ -199,10 +219,14 @@ var Answers = function Answers(_ref) {
         // Animate this, not height
         maxHeight:
         // eslint-disable-next-line no-nested-ternary
-        hidden && showAnimation && !withoutGoodAnswer ? 0 : maxHeight > 0 ? maxHeight : null
+        hidden && showAnimation && !withoutGoodAnswer && collapseAnimated && answersFinalCollapse ? 0 : maxHeight > 0 ? maxHeight : null,
+        height: hidden && showAnimation && !withoutGoodAnswer && !collapseAnimated && answersFinalCollapse ? 0 : 'auto'
       };
     },
-    config: config.gentle
+    config: {
+      tension: 300,
+      friction: 35
+    }
   });
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$4.container, (_ref8 = {}, _defineProperty(_ref8, styles$4.answered, answered), _defineProperty(_ref8, styles$4.withIcon, !withoutIcon), _defineProperty(_ref8, styles$4.isPlaceholder, isPlaceholder), _defineProperty(_ref8, className, className !== null), _ref8)])
@@ -667,6 +691,10 @@ var QuizScreen = function QuizScreen(_ref) {
   var onQuizReset = useCallback(function () {
     setUserAnswerIndex(null);
   }, [setUserAnswerIndex]);
+  var numberOfAnswers = (answers || []).length;
+  useEffect(function () {
+    onQuizReset();
+  }, [numberOfAnswers, onQuizReset]);
   var isSplitted = layout === 'split';
   var verticalAlign = isSplitted ? null : layout;
   var showReset = isEdit;

package/lib/index.js

@@ -75,7 +75,7 @@ var propTypes$5 = {
 };
 var defaultProps$5 = {
   answeredIndex: null,
-  answersCollapseDelay: 2000,
+  answersCollapseDelay: 1000,
   buttonsStyle: null,
   buttonsTextStyle: null,
   goodAnswerColor: null,
@@ -140,6 +140,10 @@ var Answers = function Answers(_ref) {
     _useState6 = _slicedToArray__default["default"](_useState5, 2),
     answersDidCollapse = _useState6[0],
     setAnswersDidCollapse = _useState6[1];
+  var _useState7 = React.useState(initialCollapsed || answeredIndex !== null),
+    _useState8 = _slicedToArray__default["default"](_useState7, 2),
+    answersFinalCollapse = _useState8[0],
+    setAnswersFinalCollapse = _useState8[1];
   React.useEffect(function () {
     var timeout = null;
     if (answeredIndex !== null && shouldCollapse) {
@@ -158,6 +162,19 @@ var Answers = function Answers(_ref) {
       }
     };
   }, [answeredIndex, withoutGoodAnswer, setAnswersCollapsed, onCollapse, answersCollapseDelay, hasAnsweredRight, finalShowUserAnswer]);
+  React.useEffect(function () {
+    var timeout = null;
+    if (answersCollapsed) {
+      timeout = setTimeout(function () {
+        setAnswersFinalCollapse(true);
+      }, 200);
+    }
+    return function () {
+      if (timeout !== null) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [answersCollapsed]);
   var onAnswerTransitionEnd = React.useCallback(function () {
     if (onTransitionEnd !== null) {
       onTransitionEnd();
@@ -172,17 +189,20 @@ var Answers = function Answers(_ref) {
   var itemsRefs = React.useRef([]);
   var listOfItems = isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray__default["default"](new Array(2)) : items;
   var heights = React.useMemo(function () {
-    var allHeights = listOfItems.reduce(function (acc, it, i) {
-      if (itemsRefs.current[i] && collapseAnimated) {
-        var _ref4 = itemsRefs.current[i].getBoundingClientRect() || {},
-          _ref4$height = _ref4.height,
-          height = _ref4$height === void 0 ? 0 : _ref4$height;
-        acc.push(height);
-      }
-      return acc;
-    }, []);
-    return allHeights;
-  }, [answeredIndex, shouldCollapse, collapseAnimated, listOfItems]);
+    if (web.animated) {
+      var allHeights = listOfItems.reduce(function (acc, it, i) {
+        if (itemsRefs.current[i] && collapseAnimated) {
+          var _ref4 = itemsRefs.current[i].getBoundingClientRect() || {},
+            _ref4$height = _ref4.height,
+            height = _ref4$height === void 0 ? 0 : _ref4$height;
+          acc.push(height);
+        }
+        return acc;
+      }, []);
+      return allHeights;
+    }
+    return [];
+  }, [web.animated, answeredIndex, shouldCollapse, collapseAnimated, listOfItems]);
   var showAnimation = isView || isEdit;
   var filteredListOfItems = listOfItems.map(function (answer, answerI) {
     var height = heights[answerI] ? heights[answerI] : 0;
@@ -222,10 +242,14 @@ var Answers = function Answers(_ref) {
         // Animate this, not height
         maxHeight:
         // eslint-disable-next-line no-nested-ternary
-        hidden && showAnimation && !withoutGoodAnswer ? 0 : maxHeight > 0 ? maxHeight : null
+        hidden && showAnimation && !withoutGoodAnswer && collapseAnimated && answersFinalCollapse ? 0 : maxHeight > 0 ? maxHeight : null,
+        height: hidden && showAnimation && !withoutGoodAnswer && !collapseAnimated && answersFinalCollapse ? 0 : 'auto'
       };
     },
-    config: web.config.gentle
+    config: {
+      tension: 300,
+      friction: 35
+    }
   });
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$4.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles$4.answered, answered), _defineProperty__default["default"](_ref8, styles$4.withIcon, !withoutIcon), _defineProperty__default["default"](_ref8, styles$4.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref8, className, className !== null), _ref8)])
@@ -690,6 +714,10 @@ var QuizScreen = function QuizScreen(_ref) {
   var onQuizReset = React.useCallback(function () {
     setUserAnswerIndex(null);
   }, [setUserAnswerIndex]);
+  var numberOfAnswers = (answers || []).length;
+  React.useEffect(function () {
+    onQuizReset();
+  }, [numberOfAnswers, onQuizReset]);
   var isSplitted = layout === 'split';
   var verticalAlign = isSplitted ? null : layout;
   var showReset = isEdit;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-quiz",
-    "version": "0.3.362",
+    "version": "0.3.364",
     "description": "",
     "keywords": [
         "javascript"
@@ -76,5 +76,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "21619f51536d95517afabfdf316ef8fc345f6562"
+    "gitHead": "7c8047d061894da9a5e278f2e56e559643665728"
 }