@micromag/screen-quiz 0.3.342 → 0.3.344

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 +11 -8
  2. package/lib/index.js +11 -8
  3. package/package.json +13 -13
package/es/index.js CHANGED
@@ -122,6 +122,8 @@ var Answers = function Answers(_ref) {
122
122
  onCollapse();
123
123
  }
124
124
  }, hasAnsweredRight || finalShowUserAnswer ? 500 : answersCollapseDelay);
125
+ } else if (answeredIndex === null && shouldCollapse) {
126
+ setAnswersCollapsed(false);
125
127
  }
126
128
  return function () {
127
129
  if (timeout !== null) {
@@ -153,6 +155,7 @@ var Answers = function Answers(_ref) {
153
155
  // return acc;
154
156
  // }, []);
155
157
 
158
+ var showAnimation = isView || isEdit;
156
159
  var filteredListOfItems = listOfItems.map(function (answer, answerI) {
157
160
  // const y = heights[answerI] ? heights[answerI] : 0;
158
161
  var userAnswer = answerI === answeredIndex;
@@ -160,10 +163,10 @@ var Answers = function Answers(_ref) {
160
163
  _ref4$good = _ref4.good,
161
164
  rightAnswer = _ref4$good === void 0 ? false : _ref4$good;
162
165
  var hidden = false;
163
- if (isView && answersDidCollapse && !rightAnswer && (hasRightAnswer || !userAnswer)) {
166
+ if (answeredIndex !== null && showAnimation && answersDidCollapse && !rightAnswer && (hasRightAnswer || !userAnswer)) {
164
167
  hidden = true;
165
168
  }
166
- if (isView && answersCollapsed && !rightAnswer) {
169
+ if (answeredIndex !== null && showAnimation && answersCollapsed && !rightAnswer) {
167
170
  hidden = true;
168
171
  }
169
172
  return _objectSpread(_objectSpread({}, answer), {}, {
@@ -195,8 +198,8 @@ var Answers = function Answers(_ref) {
195
198
  var _ref6$hidden = _ref6.hidden,
196
199
  hidden = _ref6$hidden === void 0 ? false : _ref6$hidden;
197
200
  return {
198
- opacity: hidden && isView && !withoutGoodAnswer ? 0 : 1,
199
- height: hidden && isView && !withoutGoodAnswer ? 0 : null
201
+ opacity: hidden && showAnimation && !withoutGoodAnswer ? 0 : 1,
202
+ height: hidden && showAnimation && !withoutGoodAnswer ? 0 : 'auto'
200
203
  };
201
204
  },
202
205
  config: config.gentle
@@ -214,7 +217,7 @@ var Answers = function Answers(_ref) {
214
217
  var userAnswer = answerI === answeredIndex;
215
218
  var _ref8 = answer || {},
216
219
  _ref8$good = _ref8.good,
217
- rightAnswer = _ref8$good === void 0 ? false : _ref8$good,
220
+ rightAnswer = _ref8$good === void 0 ? null : _ref8$good,
218
221
  _ref8$label = _ref8.label,
219
222
  label = _ref8$label === void 0 ? null : _ref8$label,
220
223
  _ref8$buttonStyle = _ref8.buttonStyle,
@@ -227,7 +230,7 @@ var Answers = function Answers(_ref) {
227
230
  var hasAnswer = isTextFilled(label);
228
231
  return /*#__PURE__*/React.createElement(animated.div, {
229
232
  key: "answer-".concat(answerI),
230
- className: classNames([styles$4.item, (_ref10 = {}, _defineProperty(_ref10, styles$4.rightAnswer, !withoutGoodAnswer && rightAnswer), _defineProperty(_ref10, styles$4.userAnswer, withoutGoodAnswer && userAnswer), _defineProperty(_ref10, styles$4.otherAnswer, withoutGoodAnswer && !userAnswer), _ref10)]),
233
+ className: classNames([styles$4.item, (_ref10 = {}, _defineProperty(_ref10, styles$4.rightAnswer, !withoutGoodAnswer && rightAnswer === true), _defineProperty(_ref10, styles$4.userAnswer, withoutGoodAnswer && userAnswer), _defineProperty(_ref10, styles$4.otherAnswer, withoutGoodAnswer && !userAnswer), _ref10)]),
231
234
  style: _objectSpread({}, style),
232
235
  ref: function ref(el) {
233
236
  itemsRefs.current[answerI] = el;
@@ -260,13 +263,13 @@ var Answers = function Answers(_ref) {
260
263
  focusable: focusable,
261
264
  buttonStyle: _objectSpread(_objectSpread({}, buttonsStyle), answerButtonStyle),
262
265
  textStyle: _objectSpread(_objectSpread({}, buttonsTextStyle), answerButtonTextStyle)
263
- }, answered && !withoutIcon && rightAnswer ? /*#__PURE__*/React.createElement("span", {
266
+ }, answered && !withoutIcon && rightAnswer === true ? /*#__PURE__*/React.createElement("span", {
264
267
  className: styles$4.resultIcon,
265
268
  style: getStyleFromColor(goodAnswerColor, 'backgroundColor')
266
269
  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
267
270
  className: styles$4.faIcon,
268
271
  icon: faCheck
269
- })) : null, !withoutIcon && answered && !hasAnsweredRight && userAnswer ? /*#__PURE__*/React.createElement("span", {
272
+ })) : null, !withoutIcon && answered && rightAnswer === false ? /*#__PURE__*/React.createElement("span", {
270
273
  className: styles$4.resultIcon,
271
274
  style: getStyleFromColor(badAnswerColor, 'backgroundColor')
272
275
  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
package/lib/index.js CHANGED
@@ -144,6 +144,8 @@ var Answers = function Answers(_ref) {
144
144
  onCollapse();
145
145
  }
146
146
  }, hasAnsweredRight || finalShowUserAnswer ? 500 : answersCollapseDelay);
147
+ } else if (answeredIndex === null && shouldCollapse) {
148
+ setAnswersCollapsed(false);
147
149
  }
148
150
  return function () {
149
151
  if (timeout !== null) {
@@ -175,6 +177,7 @@ var Answers = function Answers(_ref) {
175
177
  // return acc;
176
178
  // }, []);
177
179
 
180
+ var showAnimation = isView || isEdit;
178
181
  var filteredListOfItems = listOfItems.map(function (answer, answerI) {
179
182
  // const y = heights[answerI] ? heights[answerI] : 0;
180
183
  var userAnswer = answerI === answeredIndex;
@@ -182,10 +185,10 @@ var Answers = function Answers(_ref) {
182
185
  _ref4$good = _ref4.good,
183
186
  rightAnswer = _ref4$good === void 0 ? false : _ref4$good;
184
187
  var hidden = false;
185
- if (isView && answersDidCollapse && !rightAnswer && (hasRightAnswer || !userAnswer)) {
188
+ if (answeredIndex !== null && showAnimation && answersDidCollapse && !rightAnswer && (hasRightAnswer || !userAnswer)) {
186
189
  hidden = true;
187
190
  }
188
- if (isView && answersCollapsed && !rightAnswer) {
191
+ if (answeredIndex !== null && showAnimation && answersCollapsed && !rightAnswer) {
189
192
  hidden = true;
190
193
  }
191
194
  return _objectSpread__default["default"](_objectSpread__default["default"]({}, answer), {}, {
@@ -217,8 +220,8 @@ var Answers = function Answers(_ref) {
217
220
  var _ref6$hidden = _ref6.hidden,
218
221
  hidden = _ref6$hidden === void 0 ? false : _ref6$hidden;
219
222
  return {
220
- opacity: hidden && isView && !withoutGoodAnswer ? 0 : 1,
221
- height: hidden && isView && !withoutGoodAnswer ? 0 : null
223
+ opacity: hidden && showAnimation && !withoutGoodAnswer ? 0 : 1,
224
+ height: hidden && showAnimation && !withoutGoodAnswer ? 0 : 'auto'
222
225
  };
223
226
  },
224
227
  config: web.config.gentle
@@ -236,7 +239,7 @@ var Answers = function Answers(_ref) {
236
239
  var userAnswer = answerI === answeredIndex;
237
240
  var _ref8 = answer || {},
238
241
  _ref8$good = _ref8.good,
239
- rightAnswer = _ref8$good === void 0 ? false : _ref8$good,
242
+ rightAnswer = _ref8$good === void 0 ? null : _ref8$good,
240
243
  _ref8$label = _ref8.label,
241
244
  label = _ref8$label === void 0 ? null : _ref8$label,
242
245
  _ref8$buttonStyle = _ref8.buttonStyle,
@@ -249,7 +252,7 @@ var Answers = function Answers(_ref) {
249
252
  var hasAnswer = utils.isTextFilled(label);
250
253
  return /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
251
254
  key: "answer-".concat(answerI),
252
- className: classNames__default["default"]([styles$4.item, (_ref10 = {}, _defineProperty__default["default"](_ref10, styles$4.rightAnswer, !withoutGoodAnswer && rightAnswer), _defineProperty__default["default"](_ref10, styles$4.userAnswer, withoutGoodAnswer && userAnswer), _defineProperty__default["default"](_ref10, styles$4.otherAnswer, withoutGoodAnswer && !userAnswer), _ref10)]),
255
+ className: classNames__default["default"]([styles$4.item, (_ref10 = {}, _defineProperty__default["default"](_ref10, styles$4.rightAnswer, !withoutGoodAnswer && rightAnswer === true), _defineProperty__default["default"](_ref10, styles$4.userAnswer, withoutGoodAnswer && userAnswer), _defineProperty__default["default"](_ref10, styles$4.otherAnswer, withoutGoodAnswer && !userAnswer), _ref10)]),
253
256
  style: _objectSpread__default["default"]({}, style),
254
257
  ref: function ref(el) {
255
258
  itemsRefs.current[answerI] = el;
@@ -282,13 +285,13 @@ var Answers = function Answers(_ref) {
282
285
  focusable: focusable,
283
286
  buttonStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, buttonsStyle), answerButtonStyle),
284
287
  textStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, buttonsTextStyle), answerButtonTextStyle)
285
- }, answered && !withoutIcon && rightAnswer ? /*#__PURE__*/React__default["default"].createElement("span", {
288
+ }, answered && !withoutIcon && rightAnswer === true ? /*#__PURE__*/React__default["default"].createElement("span", {
286
289
  className: styles$4.resultIcon,
287
290
  style: utils.getStyleFromColor(goodAnswerColor, 'backgroundColor')
288
291
  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
289
292
  className: styles$4.faIcon,
290
293
  icon: faCheck.faCheck
291
- })) : null, !withoutIcon && answered && !hasAnsweredRight && userAnswer ? /*#__PURE__*/React__default["default"].createElement("span", {
294
+ })) : null, !withoutIcon && answered && rightAnswer === false ? /*#__PURE__*/React__default["default"].createElement("span", {
292
295
  className: styles$4.resultIcon,
293
296
  style: utils.getStyleFromColor(badAnswerColor, 'backgroundColor')
294
297
  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-quiz",
3
- "version": "0.3.342",
3
+ "version": "0.3.344",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -52,17 +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.332",
56
- "@micromag/data": "^0.3.342",
57
- "@micromag/element-background": "^0.3.341",
58
- "@micromag/element-button": "^0.3.332",
59
- "@micromag/element-call-to-action": "^0.3.332",
60
- "@micromag/element-container": "^0.3.332",
61
- "@micromag/element-heading": "^0.3.332",
62
- "@micromag/element-layout": "^0.3.332",
63
- "@micromag/element-scroll": "^0.3.332",
64
- "@micromag/element-text": "^0.3.332",
65
- "@micromag/transforms": "^0.3.332",
55
+ "@micromag/core": "^0.3.344",
56
+ "@micromag/data": "^0.3.344",
57
+ "@micromag/element-background": "^0.3.344",
58
+ "@micromag/element-button": "^0.3.344",
59
+ "@micromag/element-call-to-action": "^0.3.344",
60
+ "@micromag/element-container": "^0.3.344",
61
+ "@micromag/element-heading": "^0.3.344",
62
+ "@micromag/element-layout": "^0.3.344",
63
+ "@micromag/element-scroll": "^0.3.344",
64
+ "@micromag/element-text": "^0.3.344",
65
+ "@micromag/transforms": "^0.3.344",
66
66
  "@react-spring/core": "^9.6.1",
67
67
  "@react-spring/web": "^9.6.1",
68
68
  "classnames": "^2.2.6",
@@ -75,5 +75,5 @@
75
75
  "publishConfig": {
76
76
  "access": "public"
77
77
  },
78
- "gitHead": "fe7a18d0cc006d5c4c634c9554f2a7cec5a608d0"
78
+ "gitHead": "5ab9a39d6a0ca4e9867716f03b4402a2581521f4"
79
79
  }