@micromag/screen-quiz 0.3.362 → 0.3.363

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';
 
@@ -149,17 +149,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 +202,15 @@ 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 ? 0 : maxHeight > 0 ? maxHeight : null,
+        height: hidden && showAnimation && !withoutGoodAnswer && !collapseAnimated ? 0 : 'auto'
       };
     },
-    config: config.gentle
+    // 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 +675,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

@@ -172,17 +172,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 +225,15 @@ 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 ? 0 : maxHeight > 0 ? maxHeight : null,
+        height: hidden && showAnimation && !withoutGoodAnswer && !collapseAnimated ? 0 : 'auto'
       };
     },
-    config: web.config.gentle
+    // config: 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 +698,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.363",
     "description": "",
     "keywords": [
         "javascript"
@@ -76,5 +76,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "21619f51536d95517afabfdf316ef8fc345f6562"
+    "gitHead": "d8cb1ed298c8536f0776716c9fd6063aeba06a08"
 }