@micromag/screen-survey 0.3.646 → 0.3.649

package/es/index.js

@@ -41,6 +41,8 @@ var propTypes = {
   header: PropTypes$1.header,
   footer: PropTypes$1.footer,
   background: PropTypes$1.backgroundElement,
+  showInput: PropTypes.bool,
+  showCount: PropTypes.bool,
   withoutPercentage: PropTypes.bool,
   withoutBar: PropTypes.bool,
   current: PropTypes.bool,
@@ -63,6 +65,8 @@ var defaultProps = {
   header: null,
   footer: null,
   background: null,
+  showInput: false,
+  showCount: false,
   withoutPercentage: false,
   withoutBar: false,
   current: true,
@@ -84,7 +88,9 @@ var SurveyScreen = function SurveyScreen(_ref) {
     spacing = _ref.spacing,
     header = _ref.header,
     footer = _ref.footer,
-    background = _ref.background,
+    background = _ref.background;
+    _ref.showInput;
+    var showCount = _ref.showCount,
     withoutPercentage = _ref.withoutPercentage,
     withoutBar = _ref.withoutBar,
     current = _ref.current,
@@ -221,6 +227,16 @@ var SurveyScreen = function SurveyScreen(_ref) {
       setUserAnswerIndex(null);
     }
   }, [isEdit, current, userAnswerIndex, setUserAnswerIndex]);
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2);
+    _useState4[0];
+    var setTextInput = _useState4[1];
+  useCallback(function (e) {
+    var _ref9 = e.target || {},
+      _ref9$value = _ref9.value,
+      value = _ref9$value === undefined ? null : _ref9$value;
+    setTextInput(value);
+  }, [setTextInput]);
   var hasHeader = isHeaderFilled(header);
   var hasFooter = isFooterFilled(footer);
   var footerProps = getFooterProps(footer, {
@@ -238,12 +254,12 @@ var SurveyScreen = function SurveyScreen(_ref) {
     _useDimensionObserver4 = _useDimensionObserver3.height,
     footerHeight = _useDimensionObserver4 === undefined ? 0 : _useDimensionObserver4;
   var scrollingDisabled = !isEdit && transitionDisabled || !current;
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    scrolledBottom = _useState4[0],
-    setScrolledBottom = _useState4[1];
-  var onScrolledBottom = useCallback(function (_ref9) {
-    var initial = _ref9.initial;
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    scrolledBottom = _useState6[0],
+    setScrolledBottom = _useState6[1];
+  var onScrolledBottom = useCallback(function (_ref10) {
+    var initial = _ref10.initial;
     if (initial) {
       trackScreenEvent('scroll', 'Screen');
     }
@@ -252,13 +268,13 @@ var SurveyScreen = function SurveyScreen(_ref) {
   var onScrolledNotBottom = useCallback(function () {
     setScrolledBottom(false);
   }, [setScrolledBottom]);
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    hasScroll = _useState6[0],
-    setHasScroll = _useState6[1];
-  var onScrollHeightChange = useCallback(function (_ref10) {
-    var _ref10$canScroll = _ref10.canScroll,
-      canScroll = _ref10$canScroll === undefined ? false : _ref10$canScroll;
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    hasScroll = _useState8[0],
+    setHasScroll = _useState8[1];
+  var onScrollHeightChange = useCallback(function (_ref11) {
+    var _ref11$canScroll = _ref11.canScroll,
+      canScroll = _ref11$canScroll === undefined ? false : _ref11$canScroll;
     setHasScroll(canScroll);
   }, [setHasScroll]);
 
@@ -288,13 +304,13 @@ var SurveyScreen = function SurveyScreen(_ref) {
     }));
   }
   var finalTransitionDuration = showInstantAnswer ? 0 : "".concat(resultTransitionDuration, "ms");
-  var _ref11 = resultsStyle || {},
-    _ref11$barColor = _ref11.barColor,
-    resultsBarColor = _ref11$barColor === undefined ? null : _ref11$barColor,
-    _ref11$textColor = _ref11.textColor,
-    resultsTextColor = _ref11$textColor === undefined ? null : _ref11$textColor,
-    _ref11$percentageText = _ref11.percentageTextStyle,
-    resultsPercentageTextStyle = _ref11$percentageText === undefined ? null : _ref11$percentageText;
+  var _ref12 = resultsStyle || {},
+    _ref12$barColor = _ref12.barColor,
+    resultsBarColor = _ref12$barColor === undefined ? null : _ref12$barColor,
+    _ref12$textColor = _ref12.textColor,
+    resultsTextColor = _ref12$textColor === undefined ? null : _ref12$textColor,
+    _ref12$percentageText = _ref12.percentageTextStyle,
+    resultsPercentageTextStyle = _ref12$percentageText === undefined ? null : _ref12$percentageText;
   items.push(/*#__PURE__*/React.createElement("div", {
     key: "answers",
     className: styles.answers
@@ -302,41 +318,43 @@ var SurveyScreen = function SurveyScreen(_ref) {
     className: styles.items
   }, (isPlaceholder ? _toConsumableArray(new Array(3)) : answers).map(function (answer, answerIndex) {
     var hasAnswer = answer !== null;
-    var _ref12 = answer || {},
-      _ref12$label = _ref12.label,
-      label = _ref12$label === undefined ? null : _ref12$label,
-      _ref12$buttonStyle = _ref12.buttonStyle,
-      answerButtonStyle = _ref12$buttonStyle === undefined ? null : _ref12$buttonStyle,
-      _ref12$textStyle = _ref12.textStyle,
-      answerButtonTextStyle = _ref12$textStyle === undefined ? null : _ref12$textStyle,
-      _ref12$resultStyle = _ref12.resultStyle,
-      answerResultStyle = _ref12$resultStyle === undefined ? null : _ref12$resultStyle;
-    var _ref13 = answerResultStyle || {},
-      _ref13$barColor = _ref13.barColor,
-      answerResultBarColor = _ref13$barColor === undefined ? null : _ref13$barColor,
-      answerResultTextColor = _ref13.textColor,
-      _ref13$percentageText = _ref13.percentageTextStyle,
-      answerResultPercentageTextStyle = _ref13$percentageText === undefined ? null : _ref13$percentageText;
-    var _ref14 = label || {},
-      _ref14$body = _ref14.body,
-      body = _ref14$body === undefined ? null : _ref14$body;
-    var _ref15 = body !== null ? quizAnswersComputed[body] || {} : {},
-      _ref15$percent = _ref15.percent,
-      percent = _ref15$percent === undefined ? 0 : _ref15$percent;
-    var _ref16 = label || {},
-      _ref16$textStyle = _ref16.textStyle,
-      textStyle = _ref16$textStyle === undefined ? null : _ref16$textStyle;
-    var _ref17 = textStyle || {},
-      _ref17$color = _ref17.color,
-      labelColor = _ref17$color === undefined ? null : _ref17$color;
+    var _ref13 = answer || {},
+      _ref13$label = _ref13.label,
+      label = _ref13$label === undefined ? null : _ref13$label,
+      _ref13$buttonStyle = _ref13.buttonStyle,
+      answerButtonStyle = _ref13$buttonStyle === undefined ? null : _ref13$buttonStyle,
+      _ref13$textStyle = _ref13.textStyle,
+      answerButtonTextStyle = _ref13$textStyle === undefined ? null : _ref13$textStyle,
+      _ref13$resultStyle = _ref13.resultStyle,
+      answerResultStyle = _ref13$resultStyle === undefined ? null : _ref13$resultStyle;
+    var _ref14 = answerResultStyle || {},
+      _ref14$barColor = _ref14.barColor,
+      answerResultBarColor = _ref14$barColor === undefined ? null : _ref14$barColor,
+      answerResultTextColor = _ref14.textColor,
+      _ref14$percentageText = _ref14.percentageTextStyle,
+      answerResultPercentageTextStyle = _ref14$percentageText === undefined ? null : _ref14$percentageText;
+    var _ref15 = label || {},
+      _ref15$body = _ref15.body,
+      body = _ref15$body === undefined ? null : _ref15$body;
+    var _ref16 = body !== null ? quizAnswersComputed[body] || {} : {},
+      _ref16$percent = _ref16.percent,
+      percent = _ref16$percent === undefined ? 0 : _ref16$percent,
+      _ref16$count = _ref16.count,
+      count = _ref16$count === undefined ? 0 : _ref16$count;
+    var _ref17 = label || {},
+      _ref17$textStyle = _ref17.textStyle,
+      textStyle = _ref17$textStyle === undefined ? null : _ref17$textStyle;
+    var _ref18 = textStyle || {},
+      _ref18$color = _ref18.color,
+      labelColor = _ref18$color === undefined ? null : _ref18$color;
     var hasAnswerLabel = isTextFilled(label);
     var userAnswer = userAnswerIndex === answerIndex;
     var buttonStyles = _objectSpread(_objectSpread(_objectSpread({}, buttonsStyle), answerButtonStyle), answered ? {
       textAlign: 'left'
     } : null);
-    var _ref18 = buttonStyles || {},
-      _ref18$borderRadius = _ref18.borderRadius,
-      answerResultBorderRadius = _ref18$borderRadius === undefined ? null : _ref18$borderRadius;
+    var _ref19 = buttonStyles || {},
+      _ref19$borderRadius = _ref19.borderRadius,
+      answerResultBorderRadius = _ref19$borderRadius === undefined ? null : _ref19$borderRadius;
     var finalBarBorderRadius = answerResultBorderRadius !== null && isNumber(answerResultBorderRadius) && answerResultBorderRadius > 2 ? answerResultBorderRadius - 2 : answerResultBorderRadius;
     return /*#__PURE__*/React.createElement("div", {
       key: "answer-".concat(answerIndex),
@@ -391,7 +409,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
       textStyle: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, textStyle), buttonsTextStyle), answerButtonTextStyle), resultsTextColor), resultsPercentageTextStyle), answerResultTextColor), answerResultPercentageTextStyle),
       inline: true,
       className: styles.resultText,
-      body: "".concat(percent, "%")
+      body: showCount ? count : "".concat(percent, "%")
     }))) : null, !withoutBar ? /*#__PURE__*/React.createElement("div", {
       className: styles.resultBar,
       style: _objectSpread(_objectSpread({
@@ -533,7 +551,28 @@ var definition = {
         "value": "Styles"
       }]
     }),
-    fields: [{
+    fields: [
+    // {
+    //     name: 'showInput',
+    //     type: 'toggle',
+    //     defaultValue: false,
+    //     label: defineMessage({
+    //         defaultMessage: 'Show input answer',
+    //         description: 'Field label',
+    //     }),
+    // },
+    {
+      name: 'showCount',
+      type: 'toggle',
+      defaultValue: false,
+      label: defineMessage({
+        id: "ppGXAR",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Show the answer count"
+        }]
+      })
+    }, {
       name: 'withoutPercentage',
       type: 'toggle',
       defaultValue: false,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-survey",
-    "version": "0.3.646",
+    "version": "0.3.649",
     "private": false,
     "description": "",
     "keywords": [
@@ -71,6 +71,7 @@
         "@micromag/element-layout": "^0.3.637",
         "@micromag/element-scroll": "^0.3.646",
         "@micromag/element-text": "^0.3.637",
+        "@micromag/element-text-input": "^0.3.637",
         "@micromag/transforms": "^0.3.637",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
@@ -82,5 +83,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "65b02adf2537ee701442a62f8294f09f60b2f3b6"
+    "gitHead": "9f5087a75a0503179391a38dd7dcc03009198ac2"
 }