@micromag/screen-survey 0.3.310 → 0.3.318

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 (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +124 -162
  3. package/lib/index.js +124 -162
  4. package/package.json +14 -14
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-survey-container .micromag-screen-survey-background{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-survey-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-survey-disabled.micromag-screen-survey-container{overflow:hidden;pointer-events:none}.micromag-screen-survey-hidden.micromag-screen-survey-container{display:none;visibility:hidden}.micromag-screen-survey-placeholder.micromag-screen-survey-container .micromag-screen-survey-content{position:relative;padding:6px}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-survey-container .micromag-screen-survey-background{z-index:0}.micromag-screen-survey-container .micromag-screen-survey-content{z-index:1}.micromag-screen-survey-container .micromag-screen-survey-question{margin-bottom:20px}.micromag-screen-survey-container .micromag-screen-survey-answers,.micromag-screen-survey-container .micromag-screen-survey-items{position:relative}.micromag-screen-survey-container .micromag-screen-survey-callToAction{position:absolute;bottom:0;left:0;width:100%;-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out}.micromag-screen-survey-container .micromag-screen-survey-callToAction a{padding:0}.micromag-screen-survey-container .micromag-screen-survey-callToAction.micromag-screen-survey-disabled{opacity:0;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-item{padding:5px 0}.micromag-screen-survey-container .micromag-screen-survey-item:first-child .micromag-screen-survey-placeholderAnswer{width:80%}.micromag-screen-survey-container .micromag-screen-survey-item:last-child .micromag-screen-survey-placeholderAnswer{width:90%}.micromag-screen-survey-container .micromag-screen-survey-itemContent{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.micromag-screen-survey-container .micromag-screen-survey-resultBar{position:absolute;top:0;left:0;height:100%;background-color:hsla(0,0%,100%,.2)}.micromag-screen-survey-container .micromag-screen-survey-resultLabel{position:absolute;z-index:1;top:50%;right:0;width:4em;padding:0 8px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);color:#fff;text-align:right}.micromag-screen-survey-container .micromag-screen-survey-itemInner{width:100%}.micromag-screen-survey-container .micromag-screen-survey-button{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;width:100%;padding:10px;overflow:hidden;-webkit-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out;transition:opacity .5s ease-out}.micromag-screen-survey-container .micromag-screen-survey-button:disabled{opacity:1;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-itemLabel{width:100%}.micromag-screen-survey-container .micromag-screen-survey-itemLabel,.micromag-screen-survey-container .micromag-screen-survey-itemText{display:inline-block;-webkit-transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;-o-transition:margin-left .3s ease-out,transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,-webkit-transform .3s ease-out}.micromag-screen-survey-container .micromag-screen-survey-itemText{position:relative;z-index:1}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{width:100%;margin:0 auto}.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{height:75px}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer{height:50px}.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-button,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-result,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-resultLabel{opacity:1!important}.micromag-screen-survey-container.micromag-screen-survey-answered{line-height:1}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContainer{padding-right:50px;padding-left:15px}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContent{width:100%;opacity:1}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button{border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0)}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-result,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultLabel{opacity:.6}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-itemLabel{margin-right:0;margin-left:0;text-align:left}.micromag-screen-survey-container.micromag-screen-survey-answered.micromag-screen-survey-withPercentage .micromag-screen-survey-itemText{-webkit-transform:translate(-2em);-ms-transform:translate(-2em);transform:translate(-2em)}.micromag-screen-survey-container.micromag-screen-survey-withPercentage .micromag-screen-survey-itemLabel{margin-right:2em;margin-left:2em}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-layout{padding:10px}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-item{padding:1px 0}
1
+ .micromag-screen-survey-container .micromag-screen-survey-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-survey-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-survey-disabled.micromag-screen-survey-container{overflow:hidden;pointer-events:none}.micromag-screen-survey-hidden.micromag-screen-survey-container{display:none;visibility:hidden}.micromag-screen-survey-placeholder.micromag-screen-survey-container .micromag-screen-survey-content{padding:6px;position:relative}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-survey-container .micromag-screen-survey-background{z-index:0}.micromag-screen-survey-container .micromag-screen-survey-content{z-index:1}.micromag-screen-survey-container .micromag-screen-survey-question{margin-bottom:20px}.micromag-screen-survey-container .micromag-screen-survey-answers,.micromag-screen-survey-container .micromag-screen-survey-items{position:relative}.micromag-screen-survey-container .micromag-screen-survey-callToAction{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-survey-container .micromag-screen-survey-callToAction a{padding:0}.micromag-screen-survey-container .micromag-screen-survey-callToAction.micromag-screen-survey-disabled{opacity:0;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-item{padding:5px 0}.micromag-screen-survey-container .micromag-screen-survey-item:first-child .micromag-screen-survey-placeholderAnswer{width:80%}.micromag-screen-survey-container .micromag-screen-survey-item:last-child .micromag-screen-survey-placeholderAnswer{width:90%}.micromag-screen-survey-container .micromag-screen-survey-itemContent{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.micromag-screen-survey-container .micromag-screen-survey-resultBar{background-color:hsla(0,0%,100%,.2);height:100%;left:0;position:absolute;top:0}.micromag-screen-survey-container .micromag-screen-survey-resultLabel{color:#fff;padding:0 8px;position:absolute;right:0;text-align:right;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:4em;z-index:1}.micromag-screen-survey-container .micromag-screen-survey-itemInner{width:100%}.micromag-screen-survey-container .micromag-screen-survey-button{display:-ms-flexbox;display:flex;overflow:hidden;padding:10px;position:relative;-webkit-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out;transition:opacity .5s ease-out;width:100%}.micromag-screen-survey-container .micromag-screen-survey-button:disabled{opacity:1;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-itemLabel{width:100%}.micromag-screen-survey-container .micromag-screen-survey-itemLabel,.micromag-screen-survey-container .micromag-screen-survey-itemText{display:inline-block;-webkit-transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;-o-transition:margin-left .3s ease-out,transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,-webkit-transform .3s ease-out}.micromag-screen-survey-container .micromag-screen-survey-itemText{position:relative;z-index:1}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{margin:0 auto;width:100%}.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{height:75px}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer{height:50px}.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-button,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-result,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-resultLabel{opacity:1!important}.micromag-screen-survey-container.micromag-screen-survey-answered{line-height:1}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContainer{padding-left:15px;padding-right:50px}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContent{opacity:1;width:100%}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button{background-color:transparent;border-color:transparent}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-result,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultLabel{opacity:.6}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-itemLabel{margin-left:0;margin-right:0;text-align:left}.micromag-screen-survey-container.micromag-screen-survey-answered.micromag-screen-survey-withPercentage .micromag-screen-survey-itemText{-webkit-transform:translate(-2em);-ms-transform:translate(-2em);transform:translate(-2em)}.micromag-screen-survey-container.micromag-screen-survey-withPercentage .micromag-screen-survey-itemLabel{margin-left:2em;margin-right:2em}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-layout{padding:10px}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-item{padding:1px 0}
package/es/index.js CHANGED
@@ -21,7 +21,7 @@ import Layout, { Spacer } from '@micromag/element-layout';
21
21
  import Scroll from '@micromag/element-scroll';
22
22
  import Text from '@micromag/element-text';
23
23
 
24
- var styles = {"container":"micromag-screen-survey-container","background":"micromag-screen-survey-background","disabled":"micromag-screen-survey-disabled","hidden":"micromag-screen-survey-hidden","placeholder":"micromag-screen-survey-placeholder","content":"micromag-screen-survey-content","emptyAnswer":"micromag-screen-survey-emptyAnswer","emptyQuestion":"micromag-screen-survey-emptyQuestion","question":"micromag-screen-survey-question","answers":"micromag-screen-survey-answers","items":"micromag-screen-survey-items","callToAction":"micromag-screen-survey-callToAction","item":"micromag-screen-survey-item","placeholderAnswer":"micromag-screen-survey-placeholderAnswer","itemContent":"micromag-screen-survey-itemContent","resultBar":"micromag-screen-survey-resultBar","resultLabel":"micromag-screen-survey-resultLabel","itemInner":"micromag-screen-survey-itemInner","button":"micromag-screen-survey-button","itemLabel":"micromag-screen-survey-itemLabel","itemText":"micromag-screen-survey-itemText","userAnswer":"micromag-screen-survey-userAnswer","result":"micromag-screen-survey-result","answered":"micromag-screen-survey-answered","resultContainer":"micromag-screen-survey-resultContainer","resultContent":"micromag-screen-survey-resultContent","withPercentage":"micromag-screen-survey-withPercentage","isPlaceholder":"micromag-screen-survey-isPlaceholder","layout":"micromag-screen-survey-layout"};
24
+ var styles = {"container":"micromag-screen-survey-container","background":"micromag-screen-survey-background","disabled":"micromag-screen-survey-disabled","hidden":"micromag-screen-survey-hidden","placeholder":"micromag-screen-survey-placeholder","content":"micromag-screen-survey-content","emptyQuestion":"micromag-screen-survey-emptyQuestion","emptyAnswer":"micromag-screen-survey-emptyAnswer","question":"micromag-screen-survey-question","answers":"micromag-screen-survey-answers","items":"micromag-screen-survey-items","callToAction":"micromag-screen-survey-callToAction","item":"micromag-screen-survey-item","placeholderAnswer":"micromag-screen-survey-placeholderAnswer","itemContent":"micromag-screen-survey-itemContent","resultBar":"micromag-screen-survey-resultBar","resultLabel":"micromag-screen-survey-resultLabel","itemInner":"micromag-screen-survey-itemInner","button":"micromag-screen-survey-button","itemLabel":"micromag-screen-survey-itemLabel","itemText":"micromag-screen-survey-itemText","userAnswer":"micromag-screen-survey-userAnswer","result":"micromag-screen-survey-result","answered":"micromag-screen-survey-answered","resultContainer":"micromag-screen-survey-resultContainer","resultContent":"micromag-screen-survey-resultContent","withPercentage":"micromag-screen-survey-withPercentage","isPlaceholder":"micromag-screen-survey-isPlaceholder","layout":"micromag-screen-survey-layout"};
25
25
 
26
26
  var propTypes = {
27
27
  id: PropTypes.string,
@@ -43,7 +43,7 @@ var propTypes = {
43
43
  current: PropTypes.bool,
44
44
  active: PropTypes.bool,
45
45
  transitions: PropTypes$1.transitions,
46
- transitionStagger: PropTypes.number,
46
+ // transitionStagger: PropTypes.number,
47
47
  resultTransitionDuration: PropTypes.number,
48
48
  type: PropTypes.string,
49
49
  className: PropTypes.string
@@ -64,91 +64,76 @@ var defaultProps = {
64
64
  current: true,
65
65
  active: true,
66
66
  transitions: null,
67
- transitionStagger: 100,
67
+ // transitionStagger: 100,
68
68
  resultTransitionDuration: 500,
69
69
  type: null,
70
70
  className: null
71
71
  };
72
-
73
72
  var SurveyScreen = function SurveyScreen(_ref) {
74
- var _ref19;
75
-
73
+ var _ref20;
76
74
  var id = _ref.id,
77
- layout = _ref.layout,
78
- question = _ref.question,
79
- answers = _ref.answers,
80
- buttonsStyle = _ref.buttonsStyle,
81
- buttonsTextStyle = _ref.buttonsTextStyle,
82
- resultsStyle = _ref.resultsStyle,
83
- spacing = _ref.spacing,
84
- background = _ref.background,
85
- callToAction = _ref.callToAction,
86
- withoutPercentage = _ref.withoutPercentage,
87
- withoutBar = _ref.withoutBar,
88
- current = _ref.current,
89
- active = _ref.active,
90
- transitions = _ref.transitions,
91
- transitionStagger = _ref.transitionStagger,
92
- resultTransitionDuration = _ref.resultTransitionDuration,
93
- type = _ref.type,
94
- className = _ref.className;
75
+ layout = _ref.layout,
76
+ question = _ref.question,
77
+ answers = _ref.answers,
78
+ buttonsStyle = _ref.buttonsStyle,
79
+ buttonsTextStyle = _ref.buttonsTextStyle,
80
+ resultsStyle = _ref.resultsStyle,
81
+ spacing = _ref.spacing,
82
+ background = _ref.background,
83
+ callToAction = _ref.callToAction,
84
+ withoutPercentage = _ref.withoutPercentage,
85
+ withoutBar = _ref.withoutBar,
86
+ current = _ref.current,
87
+ active = _ref.active,
88
+ transitions = _ref.transitions,
89
+ resultTransitionDuration = _ref.resultTransitionDuration,
90
+ type = _ref.type,
91
+ className = _ref.className;
95
92
  var screenId = id || 'screen-id';
96
93
  var trackScreenEvent = useTrackScreenEvent(type);
97
-
98
94
  var _useScreenSize = useScreenSize(),
99
- width = _useScreenSize.width,
100
- height = _useScreenSize.height,
101
- resolution = _useScreenSize.resolution;
102
-
95
+ width = _useScreenSize.width,
96
+ height = _useScreenSize.height,
97
+ resolution = _useScreenSize.resolution;
103
98
  var _useQuizCreate = useQuizCreate({
104
- screenId: screenId
105
- }),
106
- submitQuiz = _useQuizCreate.create;
107
-
99
+ screenId: screenId
100
+ }),
101
+ submitQuiz = _useQuizCreate.create;
108
102
  var _useScreenRenderConte = useScreenRenderContext(),
109
- isView = _useScreenRenderConte.isView,
110
- isPreview = _useScreenRenderConte.isPreview,
111
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
112
- isEdit = _useScreenRenderConte.isEdit,
113
- isStatic = _useScreenRenderConte.isStatic,
114
- isCapture = _useScreenRenderConte.isCapture;
115
-
103
+ isView = _useScreenRenderConte.isView,
104
+ isPreview = _useScreenRenderConte.isPreview,
105
+ isPlaceholder = _useScreenRenderConte.isPlaceholder,
106
+ isEdit = _useScreenRenderConte.isEdit,
107
+ isStatic = _useScreenRenderConte.isStatic,
108
+ isCapture = _useScreenRenderConte.isCapture;
116
109
  var _useViewerContext = useViewerContext(),
117
- viewerTopHeight = _useViewerContext.topHeight,
118
- viewerBottomHeight = _useViewerContext.bottomHeight,
119
- viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
120
-
110
+ viewerTopHeight = _useViewerContext.topHeight,
111
+ viewerBottomHeight = _useViewerContext.bottomHeight,
112
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
121
113
  var _useViewerWebView = useViewerWebView(),
122
- openWebView = _useViewerWebView.open;
123
-
114
+ openWebView = _useViewerWebView.open;
124
115
  var _usePlaybackContext = usePlaybackContext(),
125
- muted = _usePlaybackContext.muted;
126
-
116
+ muted = _usePlaybackContext.muted;
127
117
  var mediaRef = usePlaybackMediaRef(current);
128
-
129
118
  var _useQuiz = useQuiz({
130
- screenId: screenId,
131
- opts: {
132
- autoload: !isPlaceholder
133
- }
134
- }),
135
- _useQuiz$quiz = _useQuiz.quiz,
136
- allQuizAnswers = _useQuiz$quiz === void 0 ? [] : _useQuiz$quiz;
137
-
119
+ screenId: screenId,
120
+ opts: {
121
+ autoload: !isPlaceholder
122
+ }
123
+ }),
124
+ _useQuiz$quiz = _useQuiz.quiz,
125
+ allQuizAnswers = _useQuiz$quiz === void 0 ? [] : _useQuiz$quiz;
138
126
  var quizAnswers = allQuizAnswers.filter(function (item) {
139
127
  var _ref2 = item || {},
140
- _ref2$choice = _ref2.choice,
141
- choice = _ref2$choice === void 0 ? null : _ref2$choice;
142
-
143
- var answersBody = answers.map(function (answer) {
128
+ _ref2$choice = _ref2.choice,
129
+ choice = _ref2$choice === void 0 ? null : _ref2$choice;
130
+ var answersBody = (answers || []).map(function (answer) {
144
131
  var _ref3 = answer || {},
145
- _ref3$label = _ref3.label,
146
- label = _ref3$label === void 0 ? null : _ref3$label;
147
-
132
+ _ref3$label = _ref3.label,
133
+ label = _ref3$label === void 0 ? null : _ref3$label;
148
134
  var _ref4 = label || {},
149
- _ref4$body = _ref4.body,
150
- body = _ref4$body === void 0 ? null : _ref4$body;
151
-
135
+ _ref4$body = _ref4.body,
136
+ body = _ref4$body === void 0 ? null : _ref4$body;
152
137
  return body;
153
138
  }).filter(function (body) {
154
139
  return body !== null;
@@ -156,52 +141,43 @@ var SurveyScreen = function SurveyScreen(_ref) {
156
141
  var hasResult = answersBody.find(function (body) {
157
142
  return body === choice;
158
143
  });
159
-
160
144
  if (hasResult) {
161
145
  return true;
162
146
  }
163
-
164
147
  return false;
165
148
  });
166
149
  var hasQuestion = isTextFilled(question);
167
150
  var showInstantAnswer = isStatic || isCapture;
168
-
169
151
  var _useState = useState(showInstantAnswer ? -1 : null),
170
- _useState2 = _slicedToArray(_useState, 2),
171
- userAnswerIndex = _useState2[0],
172
- setUserAnswerIndex = _useState2[1];
173
-
152
+ _useState2 = _slicedToArray(_useState, 2),
153
+ userAnswerIndex = _useState2[0],
154
+ setUserAnswerIndex = _useState2[1];
174
155
  var answered = userAnswerIndex !== null;
175
156
  var quizAnswersComputed = useMemo(function () {
176
157
  var total = answers !== null ? (quizAnswers || []).reduce(function (points, _ref5) {
177
158
  var _ref5$count = _ref5.count,
178
- count = _ref5$count === void 0 ? 0 : _ref5$count;
159
+ count = _ref5$count === void 0 ? 0 : _ref5$count;
179
160
  return points + parseInt(count, 10);
180
161
  }, userAnswerIndex !== null && userAnswerIndex > -1 ? 1 : 0) : 0;
181
162
  var computed = answers !== null ? (answers || []).reduce(function (answersTotal, ans, i) {
182
163
  var _ref6 = ans || {},
183
- _ref6$label = _ref6.label,
184
- label = _ref6$label === void 0 ? {} : _ref6$label;
185
-
164
+ _ref6$label = _ref6.label,
165
+ label = _ref6$label === void 0 ? {} : _ref6$label;
186
166
  var _ref7 = label || {},
187
- _ref7$body = _ref7.body,
188
- body = _ref7$body === void 0 ? null : _ref7$body;
189
-
167
+ _ref7$body = _ref7.body,
168
+ body = _ref7$body === void 0 ? null : _ref7$body;
190
169
  var _ref8 = quizAnswers.find(function (qa) {
191
- return qa.choice === body;
192
- }) || {},
193
- _ref8$count = _ref8.count,
194
- count = _ref8$count === void 0 ? 0 : _ref8$count;
195
-
170
+ return qa.choice === body;
171
+ }) || {},
172
+ _ref8$count = _ref8.count,
173
+ count = _ref8$count === void 0 ? 0 : _ref8$count;
196
174
  var countWithUser = i === userAnswerIndex ? count + 1 : count;
197
-
198
175
  if (body !== null) {
199
176
  return _objectSpread(_objectSpread({}, answersTotal), {}, _defineProperty({}, body, {
200
177
  percent: total > 0 ? countWithUser / total * 100 : 0,
201
178
  count: countWithUser
202
179
  }));
203
180
  }
204
-
205
181
  return answersTotal;
206
182
  }, {}) : {};
207
183
  var quizAnswersPct = total > 0 ? Object.keys(computed).map(function (key) {
@@ -215,6 +191,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
215
191
  }, {});
216
192
  }, [answers, quizAnswers, userAnswerIndex]);
217
193
  var isSplitted = layout === 'split';
194
+ // const isTopLayout = layout === 'top';
218
195
  var isMiddleLayout = layout === 'middle';
219
196
  var verticalAlign = isSplitted ? null : layout;
220
197
  var transitionPlaying = current;
@@ -239,37 +216,33 @@ var SurveyScreen = function SurveyScreen(_ref) {
239
216
  if (!current && isEdit && userAnswerIndex !== null) {
240
217
  setUserAnswerIndex(null);
241
218
  }
242
- }, [isEdit, current, userAnswerIndex, setUserAnswerIndex]); // Call to Action
219
+ }, [isEdit, current, userAnswerIndex, setUserAnswerIndex]);
243
220
 
221
+ // Call to Action
244
222
  var _ref9 = callToAction || {},
245
- _ref9$active = _ref9.active,
246
- hasCallToAction = _ref9$active === void 0 ? false : _ref9$active;
247
-
223
+ _ref9$active = _ref9.active,
224
+ hasCallToAction = _ref9$active === void 0 ? false : _ref9$active;
248
225
  var _useDimensionObserver = useDimensionObserver(),
249
- callToActionRef = _useDimensionObserver.ref,
250
- _useDimensionObserver2 = _useDimensionObserver.height,
251
- callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
252
-
226
+ callToActionRef = _useDimensionObserver.ref,
227
+ _useDimensionObserver2 = _useDimensionObserver.height,
228
+ callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
253
229
  var scrollingDisabled = !isEdit && transitionDisabled || !current;
254
-
255
230
  var _useState3 = useState(false),
256
- _useState4 = _slicedToArray(_useState3, 2),
257
- scrolledBottom = _useState4[0],
258
- setScrolledBottom = _useState4[1];
259
-
231
+ _useState4 = _slicedToArray(_useState3, 2),
232
+ scrolledBottom = _useState4[0],
233
+ setScrolledBottom = _useState4[1];
260
234
  var onScrolledBottom = useCallback(function (_ref10) {
261
235
  var initial = _ref10.initial;
262
-
263
236
  if (initial) {
264
237
  trackScreenEvent('scroll', 'Screen');
265
238
  }
266
-
267
239
  setScrolledBottom(true);
268
240
  }, [trackScreenEvent]);
269
241
  var onScrolledNotBottom = useCallback(function () {
270
242
  setScrolledBottom(false);
271
- }, [setScrolledBottom]); // Question
243
+ }, [setScrolledBottom]);
272
244
 
245
+ // Question
273
246
  var items = [/*#__PURE__*/React.createElement(ScreenElement, {
274
247
  key: "question",
275
248
  placeholder: "title",
@@ -289,23 +262,19 @@ var SurveyScreen = function SurveyScreen(_ref) {
289
262
  }, /*#__PURE__*/React.createElement(Heading, Object.assign({}, question, {
290
263
  className: styles.question
291
264
  }))) : null)];
292
-
293
265
  if (isSplitted || !isPlaceholder && hasCallToAction && isMiddleLayout) {
294
266
  items.push( /*#__PURE__*/React.createElement(Spacer, {
295
267
  key: "spacer"
296
268
  }));
297
269
  }
298
-
299
270
  var finalTransitionDuration = showInstantAnswer ? 0 : "".concat(resultTransitionDuration, "ms");
300
-
301
271
  var _ref11 = resultsStyle || {},
302
- _ref11$barColor = _ref11.barColor,
303
- resultsBarColor = _ref11$barColor === void 0 ? null : _ref11$barColor,
304
- _ref11$textColor = _ref11.textColor,
305
- resultsTextColor = _ref11$textColor === void 0 ? null : _ref11$textColor,
306
- _ref11$percentageText = _ref11.percentageTextStyle,
307
- resultsPercentageTextStyle = _ref11$percentageText === void 0 ? null : _ref11$percentageText;
308
-
272
+ _ref11$barColor = _ref11.barColor,
273
+ resultsBarColor = _ref11$barColor === void 0 ? null : _ref11$barColor,
274
+ _ref11$textColor = _ref11.textColor,
275
+ resultsTextColor = _ref11$textColor === void 0 ? null : _ref11$textColor,
276
+ _ref11$percentageText = _ref11.percentageTextStyle,
277
+ resultsPercentageTextStyle = _ref11$percentageText === void 0 ? null : _ref11$percentageText;
309
278
  items.push( /*#__PURE__*/React.createElement("div", {
310
279
  key: "answers",
311
280
  className: styles.answers
@@ -313,40 +282,36 @@ var SurveyScreen = function SurveyScreen(_ref) {
313
282
  className: styles.items
314
283
  }, (isPlaceholder ? _toConsumableArray(new Array(3)) : answers).map(function (answer, answerIndex) {
315
284
  var hasAnswer = answer !== null;
316
-
317
285
  var _ref12 = answer || {},
318
- _ref12$label = _ref12.label,
319
- label = _ref12$label === void 0 ? null : _ref12$label,
320
- _ref12$buttonStyle = _ref12.buttonStyle,
321
- answerButtonStyle = _ref12$buttonStyle === void 0 ? null : _ref12$buttonStyle,
322
- _ref12$textStyle = _ref12.textStyle,
323
- answerButtonTextStyle = _ref12$textStyle === void 0 ? null : _ref12$textStyle,
324
- _ref12$resultStyle = _ref12.resultStyle,
325
- answerResultStyle = _ref12$resultStyle === void 0 ? null : _ref12$resultStyle;
326
-
327
- var _ref13 = answerResultStyle || {},
328
- _ref13$barColor = _ref13.barColor,
329
- answerResultBarColor = _ref13$barColor === void 0 ? null : _ref13$barColor,
330
- answerResultTextColor = _ref13.textColor,
331
- _ref13$percentageText = _ref13.percentageTextStyle,
332
- answerResultPercentageTextStyle = _ref13$percentageText === void 0 ? null : _ref13$percentageText;
333
-
334
- var _ref14 = label || {},
335
- _ref14$body = _ref14.body,
336
- body = _ref14$body === void 0 ? null : _ref14$body;
337
-
338
- var _ref15 = body !== null ? quizAnswersComputed[body] || {} : {},
339
- _ref15$percent = _ref15.percent,
340
- percent = _ref15$percent === void 0 ? 0 : _ref15$percent;
341
-
342
- var _ref16 = label || {},
343
- _ref16$textStyle = _ref16.textStyle,
344
- textStyle = _ref16$textStyle === void 0 ? null : _ref16$textStyle;
345
-
346
- var _ref17 = textStyle || {},
347
- _ref17$color = _ref17.color,
348
- labelColor = _ref17$color === void 0 ? null : _ref17$color;
349
-
286
+ _ref12$label = _ref12.label,
287
+ label = _ref12$label === void 0 ? null : _ref12$label,
288
+ _ref12$buttonStyle = _ref12.buttonStyle,
289
+ answerButtonStyle = _ref12$buttonStyle === void 0 ? null : _ref12$buttonStyle,
290
+ _ref12$textStyle = _ref12.textStyle,
291
+ answerButtonTextStyle = _ref12$textStyle === void 0 ? null : _ref12$textStyle,
292
+ _ref12$resultStyle = _ref12.resultStyle,
293
+ answerResultStyle = _ref12$resultStyle === void 0 ? null : _ref12$resultStyle;
294
+ var _ref13 = answerButtonStyle || {},
295
+ _ref13$borderRadius = _ref13.borderRadius,
296
+ answerResultBorderRadius = _ref13$borderRadius === void 0 ? null : _ref13$borderRadius;
297
+ var _ref14 = answerResultStyle || {},
298
+ _ref14$barColor = _ref14.barColor,
299
+ answerResultBarColor = _ref14$barColor === void 0 ? null : _ref14$barColor,
300
+ answerResultTextColor = _ref14.textColor,
301
+ _ref14$percentageText = _ref14.percentageTextStyle,
302
+ answerResultPercentageTextStyle = _ref14$percentageText === void 0 ? null : _ref14$percentageText;
303
+ var _ref15 = label || {},
304
+ _ref15$body = _ref15.body,
305
+ body = _ref15$body === void 0 ? null : _ref15$body;
306
+ var _ref16 = body !== null ? quizAnswersComputed[body] || {} : {},
307
+ _ref16$percent = _ref16.percent,
308
+ percent = _ref16$percent === void 0 ? 0 : _ref16$percent;
309
+ var _ref17 = label || {},
310
+ _ref17$textStyle = _ref17.textStyle,
311
+ textStyle = _ref17$textStyle === void 0 ? null : _ref17$textStyle;
312
+ var _ref18 = textStyle || {},
313
+ _ref18$color = _ref18.color,
314
+ labelColor = _ref18$color === void 0 ? null : _ref18$color;
350
315
  var hasAnswerLabel = isTextFilled(label);
351
316
  var userAnswer = userAnswerIndex === answerIndex;
352
317
  return /*#__PURE__*/React.createElement("div", {
@@ -366,12 +331,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
366
331
  }),
367
332
  emptyClassName: styles.emptyAnswer,
368
333
  isEmpty: !hasAnswerLabel
369
- }, hasAnswer ? /*#__PURE__*/React.createElement(Transitions, {
370
- transitions: transitions,
371
- playing: transitionPlaying,
372
- delay: (answerIndex + 1) * transitionStagger,
373
- disabled: transitionDisabled
374
- }, /*#__PURE__*/React.createElement("div", {
334
+ }, hasAnswer ? /*#__PURE__*/React.createElement("div", {
375
335
  className: styles.itemContent
376
336
  }, /*#__PURE__*/React.createElement("div", {
377
337
  className: styles.itemInner,
@@ -380,8 +340,10 @@ var SurveyScreen = function SurveyScreen(_ref) {
380
340
  }
381
341
  }, /*#__PURE__*/React.createElement(Button, {
382
342
  className: styles.button,
383
- onClick: function onClick() {
384
- return onAnswerClick(answerIndex);
343
+ onPointerUp: function onPointerUp(e) {
344
+ if (e.pointerType !== 'mouse' || e.button === 0) {
345
+ onAnswerClick(answerIndex);
346
+ }
385
347
  },
386
348
  disabled: isPreview || userAnswerIndex !== null,
387
349
  focusable: current && isView,
@@ -403,24 +365,25 @@ var SurveyScreen = function SurveyScreen(_ref) {
403
365
  opacity: 0
404
366
  })
405
367
  }, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
406
- textStyle: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, textStyle), buttonsTextStyle), resultsTextColor), resultsPercentageTextStyle), answerResultTextColor), answerResultPercentageTextStyle),
368
+ textStyle: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, textStyle), buttonsTextStyle), answerButtonTextStyle), resultsTextColor), resultsPercentageTextStyle), answerResultTextColor), answerResultPercentageTextStyle),
407
369
  inline: true,
408
370
  className: styles.resultText,
409
371
  body: "".concat(percent, "%")
410
372
  }))) : null, !withoutBar ? /*#__PURE__*/React.createElement("div", {
411
373
  className: styles.resultBar,
412
374
  style: _objectSpread(_objectSpread({
375
+ borderRadius: answerResultBorderRadius,
413
376
  transitionDuration: finalTransitionDuration,
414
- width: percent !== null ? "".concat(percent, "%") : null
415
- }, getStyleFromColor(answered ? answerResultBarColor || resultsBarColor || labelColor : null, 'backgroundColor')), answered ? {
416
- opacity: 1
377
+ width: percent !== null ? "".concat(percent, "%") : '0%'
378
+ }, getStyleFromColor(answerResultBarColor || resultsBarColor || labelColor, 'backgroundColor')), answered ? {
379
+ opacity: 0.5
417
380
  } : {
418
381
  opacity: 0
419
382
  })
420
- }) : null))))) : null));
383
+ }) : null)))) : null));
421
384
  })) : null));
422
385
  return /*#__PURE__*/React.createElement("div", {
423
- className: classNames([styles.container, (_ref19 = {}, _defineProperty(_ref19, className, className !== null), _defineProperty(_ref19, styles.answered, answered), _defineProperty(_ref19, styles.withPercentage, !withoutPercentage), _defineProperty(_ref19, styles.isPlaceholder, isPlaceholder), _ref19)])
386
+ className: classNames([styles.container, (_ref20 = {}, _defineProperty(_ref20, className, className !== null), _defineProperty(_ref20, styles.answered, answered), _defineProperty(_ref20, styles.withPercentage, !withoutPercentage), _defineProperty(_ref20, styles.isPlaceholder, isPlaceholder), _ref20)])
424
387
  }, /*#__PURE__*/React.createElement(Container, {
425
388
  width: width,
426
389
  height: height,
@@ -465,7 +428,6 @@ var SurveyScreen = function SurveyScreen(_ref) {
465
428
  className: styles.background
466
429
  }) : null);
467
430
  };
468
-
469
431
  SurveyScreen.propTypes = propTypes;
470
432
  SurveyScreen.defaultProps = defaultProps;
471
433
 
package/lib/index.js CHANGED
@@ -43,7 +43,7 @@ var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
43
43
  var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
44
44
  var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
45
45
 
46
- var styles = {"container":"micromag-screen-survey-container","background":"micromag-screen-survey-background","disabled":"micromag-screen-survey-disabled","hidden":"micromag-screen-survey-hidden","placeholder":"micromag-screen-survey-placeholder","content":"micromag-screen-survey-content","emptyAnswer":"micromag-screen-survey-emptyAnswer","emptyQuestion":"micromag-screen-survey-emptyQuestion","question":"micromag-screen-survey-question","answers":"micromag-screen-survey-answers","items":"micromag-screen-survey-items","callToAction":"micromag-screen-survey-callToAction","item":"micromag-screen-survey-item","placeholderAnswer":"micromag-screen-survey-placeholderAnswer","itemContent":"micromag-screen-survey-itemContent","resultBar":"micromag-screen-survey-resultBar","resultLabel":"micromag-screen-survey-resultLabel","itemInner":"micromag-screen-survey-itemInner","button":"micromag-screen-survey-button","itemLabel":"micromag-screen-survey-itemLabel","itemText":"micromag-screen-survey-itemText","userAnswer":"micromag-screen-survey-userAnswer","result":"micromag-screen-survey-result","answered":"micromag-screen-survey-answered","resultContainer":"micromag-screen-survey-resultContainer","resultContent":"micromag-screen-survey-resultContent","withPercentage":"micromag-screen-survey-withPercentage","isPlaceholder":"micromag-screen-survey-isPlaceholder","layout":"micromag-screen-survey-layout"};
46
+ var styles = {"container":"micromag-screen-survey-container","background":"micromag-screen-survey-background","disabled":"micromag-screen-survey-disabled","hidden":"micromag-screen-survey-hidden","placeholder":"micromag-screen-survey-placeholder","content":"micromag-screen-survey-content","emptyQuestion":"micromag-screen-survey-emptyQuestion","emptyAnswer":"micromag-screen-survey-emptyAnswer","question":"micromag-screen-survey-question","answers":"micromag-screen-survey-answers","items":"micromag-screen-survey-items","callToAction":"micromag-screen-survey-callToAction","item":"micromag-screen-survey-item","placeholderAnswer":"micromag-screen-survey-placeholderAnswer","itemContent":"micromag-screen-survey-itemContent","resultBar":"micromag-screen-survey-resultBar","resultLabel":"micromag-screen-survey-resultLabel","itemInner":"micromag-screen-survey-itemInner","button":"micromag-screen-survey-button","itemLabel":"micromag-screen-survey-itemLabel","itemText":"micromag-screen-survey-itemText","userAnswer":"micromag-screen-survey-userAnswer","result":"micromag-screen-survey-result","answered":"micromag-screen-survey-answered","resultContainer":"micromag-screen-survey-resultContainer","resultContent":"micromag-screen-survey-resultContent","withPercentage":"micromag-screen-survey-withPercentage","isPlaceholder":"micromag-screen-survey-isPlaceholder","layout":"micromag-screen-survey-layout"};
47
47
 
48
48
  var propTypes = {
49
49
  id: PropTypes__default["default"].string,
@@ -65,7 +65,7 @@ var propTypes = {
65
65
  current: PropTypes__default["default"].bool,
66
66
  active: PropTypes__default["default"].bool,
67
67
  transitions: core.PropTypes.transitions,
68
- transitionStagger: PropTypes__default["default"].number,
68
+ // transitionStagger: PropTypes.number,
69
69
  resultTransitionDuration: PropTypes__default["default"].number,
70
70
  type: PropTypes__default["default"].string,
71
71
  className: PropTypes__default["default"].string
@@ -86,91 +86,76 @@ var defaultProps = {
86
86
  current: true,
87
87
  active: true,
88
88
  transitions: null,
89
- transitionStagger: 100,
89
+ // transitionStagger: 100,
90
90
  resultTransitionDuration: 500,
91
91
  type: null,
92
92
  className: null
93
93
  };
94
-
95
94
  var SurveyScreen = function SurveyScreen(_ref) {
96
- var _ref19;
97
-
95
+ var _ref20;
98
96
  var id = _ref.id,
99
- layout = _ref.layout,
100
- question = _ref.question,
101
- answers = _ref.answers,
102
- buttonsStyle = _ref.buttonsStyle,
103
- buttonsTextStyle = _ref.buttonsTextStyle,
104
- resultsStyle = _ref.resultsStyle,
105
- spacing = _ref.spacing,
106
- background = _ref.background,
107
- callToAction = _ref.callToAction,
108
- withoutPercentage = _ref.withoutPercentage,
109
- withoutBar = _ref.withoutBar,
110
- current = _ref.current,
111
- active = _ref.active,
112
- transitions = _ref.transitions,
113
- transitionStagger = _ref.transitionStagger,
114
- resultTransitionDuration = _ref.resultTransitionDuration,
115
- type = _ref.type,
116
- className = _ref.className;
97
+ layout = _ref.layout,
98
+ question = _ref.question,
99
+ answers = _ref.answers,
100
+ buttonsStyle = _ref.buttonsStyle,
101
+ buttonsTextStyle = _ref.buttonsTextStyle,
102
+ resultsStyle = _ref.resultsStyle,
103
+ spacing = _ref.spacing,
104
+ background = _ref.background,
105
+ callToAction = _ref.callToAction,
106
+ withoutPercentage = _ref.withoutPercentage,
107
+ withoutBar = _ref.withoutBar,
108
+ current = _ref.current,
109
+ active = _ref.active,
110
+ transitions = _ref.transitions,
111
+ resultTransitionDuration = _ref.resultTransitionDuration,
112
+ type = _ref.type,
113
+ className = _ref.className;
117
114
  var screenId = id || 'screen-id';
118
115
  var trackScreenEvent = hooks.useTrackScreenEvent(type);
119
-
120
116
  var _useScreenSize = contexts.useScreenSize(),
121
- width = _useScreenSize.width,
122
- height = _useScreenSize.height,
123
- resolution = _useScreenSize.resolution;
124
-
117
+ width = _useScreenSize.width,
118
+ height = _useScreenSize.height,
119
+ resolution = _useScreenSize.resolution;
125
120
  var _useQuizCreate = data.useQuizCreate({
126
- screenId: screenId
127
- }),
128
- submitQuiz = _useQuizCreate.create;
129
-
121
+ screenId: screenId
122
+ }),
123
+ submitQuiz = _useQuizCreate.create;
130
124
  var _useScreenRenderConte = contexts.useScreenRenderContext(),
131
- isView = _useScreenRenderConte.isView,
132
- isPreview = _useScreenRenderConte.isPreview,
133
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
134
- isEdit = _useScreenRenderConte.isEdit,
135
- isStatic = _useScreenRenderConte.isStatic,
136
- isCapture = _useScreenRenderConte.isCapture;
137
-
125
+ isView = _useScreenRenderConte.isView,
126
+ isPreview = _useScreenRenderConte.isPreview,
127
+ isPlaceholder = _useScreenRenderConte.isPlaceholder,
128
+ isEdit = _useScreenRenderConte.isEdit,
129
+ isStatic = _useScreenRenderConte.isStatic,
130
+ isCapture = _useScreenRenderConte.isCapture;
138
131
  var _useViewerContext = contexts.useViewerContext(),
139
- viewerTopHeight = _useViewerContext.topHeight,
140
- viewerBottomHeight = _useViewerContext.bottomHeight,
141
- viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
142
-
132
+ viewerTopHeight = _useViewerContext.topHeight,
133
+ viewerBottomHeight = _useViewerContext.bottomHeight,
134
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
143
135
  var _useViewerWebView = contexts.useViewerWebView(),
144
- openWebView = _useViewerWebView.open;
145
-
136
+ openWebView = _useViewerWebView.open;
146
137
  var _usePlaybackContext = contexts.usePlaybackContext(),
147
- muted = _usePlaybackContext.muted;
148
-
138
+ muted = _usePlaybackContext.muted;
149
139
  var mediaRef = contexts.usePlaybackMediaRef(current);
150
-
151
140
  var _useQuiz = data.useQuiz({
152
- screenId: screenId,
153
- opts: {
154
- autoload: !isPlaceholder
155
- }
156
- }),
157
- _useQuiz$quiz = _useQuiz.quiz,
158
- allQuizAnswers = _useQuiz$quiz === void 0 ? [] : _useQuiz$quiz;
159
-
141
+ screenId: screenId,
142
+ opts: {
143
+ autoload: !isPlaceholder
144
+ }
145
+ }),
146
+ _useQuiz$quiz = _useQuiz.quiz,
147
+ allQuizAnswers = _useQuiz$quiz === void 0 ? [] : _useQuiz$quiz;
160
148
  var quizAnswers = allQuizAnswers.filter(function (item) {
161
149
  var _ref2 = item || {},
162
- _ref2$choice = _ref2.choice,
163
- choice = _ref2$choice === void 0 ? null : _ref2$choice;
164
-
165
- var answersBody = answers.map(function (answer) {
150
+ _ref2$choice = _ref2.choice,
151
+ choice = _ref2$choice === void 0 ? null : _ref2$choice;
152
+ var answersBody = (answers || []).map(function (answer) {
166
153
  var _ref3 = answer || {},
167
- _ref3$label = _ref3.label,
168
- label = _ref3$label === void 0 ? null : _ref3$label;
169
-
154
+ _ref3$label = _ref3.label,
155
+ label = _ref3$label === void 0 ? null : _ref3$label;
170
156
  var _ref4 = label || {},
171
- _ref4$body = _ref4.body,
172
- body = _ref4$body === void 0 ? null : _ref4$body;
173
-
157
+ _ref4$body = _ref4.body,
158
+ body = _ref4$body === void 0 ? null : _ref4$body;
174
159
  return body;
175
160
  }).filter(function (body) {
176
161
  return body !== null;
@@ -178,52 +163,43 @@ var SurveyScreen = function SurveyScreen(_ref) {
178
163
  var hasResult = answersBody.find(function (body) {
179
164
  return body === choice;
180
165
  });
181
-
182
166
  if (hasResult) {
183
167
  return true;
184
168
  }
185
-
186
169
  return false;
187
170
  });
188
171
  var hasQuestion = utils.isTextFilled(question);
189
172
  var showInstantAnswer = isStatic || isCapture;
190
-
191
173
  var _useState = React.useState(showInstantAnswer ? -1 : null),
192
- _useState2 = _slicedToArray__default["default"](_useState, 2),
193
- userAnswerIndex = _useState2[0],
194
- setUserAnswerIndex = _useState2[1];
195
-
174
+ _useState2 = _slicedToArray__default["default"](_useState, 2),
175
+ userAnswerIndex = _useState2[0],
176
+ setUserAnswerIndex = _useState2[1];
196
177
  var answered = userAnswerIndex !== null;
197
178
  var quizAnswersComputed = React.useMemo(function () {
198
179
  var total = answers !== null ? (quizAnswers || []).reduce(function (points, _ref5) {
199
180
  var _ref5$count = _ref5.count,
200
- count = _ref5$count === void 0 ? 0 : _ref5$count;
181
+ count = _ref5$count === void 0 ? 0 : _ref5$count;
201
182
  return points + parseInt(count, 10);
202
183
  }, userAnswerIndex !== null && userAnswerIndex > -1 ? 1 : 0) : 0;
203
184
  var computed = answers !== null ? (answers || []).reduce(function (answersTotal, ans, i) {
204
185
  var _ref6 = ans || {},
205
- _ref6$label = _ref6.label,
206
- label = _ref6$label === void 0 ? {} : _ref6$label;
207
-
186
+ _ref6$label = _ref6.label,
187
+ label = _ref6$label === void 0 ? {} : _ref6$label;
208
188
  var _ref7 = label || {},
209
- _ref7$body = _ref7.body,
210
- body = _ref7$body === void 0 ? null : _ref7$body;
211
-
189
+ _ref7$body = _ref7.body,
190
+ body = _ref7$body === void 0 ? null : _ref7$body;
212
191
  var _ref8 = quizAnswers.find(function (qa) {
213
- return qa.choice === body;
214
- }) || {},
215
- _ref8$count = _ref8.count,
216
- count = _ref8$count === void 0 ? 0 : _ref8$count;
217
-
192
+ return qa.choice === body;
193
+ }) || {},
194
+ _ref8$count = _ref8.count,
195
+ count = _ref8$count === void 0 ? 0 : _ref8$count;
218
196
  var countWithUser = i === userAnswerIndex ? count + 1 : count;
219
-
220
197
  if (body !== null) {
221
198
  return _objectSpread__default["default"](_objectSpread__default["default"]({}, answersTotal), {}, _defineProperty__default["default"]({}, body, {
222
199
  percent: total > 0 ? countWithUser / total * 100 : 0,
223
200
  count: countWithUser
224
201
  }));
225
202
  }
226
-
227
203
  return answersTotal;
228
204
  }, {}) : {};
229
205
  var quizAnswersPct = total > 0 ? Object.keys(computed).map(function (key) {
@@ -237,6 +213,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
237
213
  }, {});
238
214
  }, [answers, quizAnswers, userAnswerIndex]);
239
215
  var isSplitted = layout === 'split';
216
+ // const isTopLayout = layout === 'top';
240
217
  var isMiddleLayout = layout === 'middle';
241
218
  var verticalAlign = isSplitted ? null : layout;
242
219
  var transitionPlaying = current;
@@ -261,37 +238,33 @@ var SurveyScreen = function SurveyScreen(_ref) {
261
238
  if (!current && isEdit && userAnswerIndex !== null) {
262
239
  setUserAnswerIndex(null);
263
240
  }
264
- }, [isEdit, current, userAnswerIndex, setUserAnswerIndex]); // Call to Action
241
+ }, [isEdit, current, userAnswerIndex, setUserAnswerIndex]);
265
242
 
243
+ // Call to Action
266
244
  var _ref9 = callToAction || {},
267
- _ref9$active = _ref9.active,
268
- hasCallToAction = _ref9$active === void 0 ? false : _ref9$active;
269
-
245
+ _ref9$active = _ref9.active,
246
+ hasCallToAction = _ref9$active === void 0 ? false : _ref9$active;
270
247
  var _useDimensionObserver = hooks.useDimensionObserver(),
271
- callToActionRef = _useDimensionObserver.ref,
272
- _useDimensionObserver2 = _useDimensionObserver.height,
273
- callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
274
-
248
+ callToActionRef = _useDimensionObserver.ref,
249
+ _useDimensionObserver2 = _useDimensionObserver.height,
250
+ callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
275
251
  var scrollingDisabled = !isEdit && transitionDisabled || !current;
276
-
277
252
  var _useState3 = React.useState(false),
278
- _useState4 = _slicedToArray__default["default"](_useState3, 2),
279
- scrolledBottom = _useState4[0],
280
- setScrolledBottom = _useState4[1];
281
-
253
+ _useState4 = _slicedToArray__default["default"](_useState3, 2),
254
+ scrolledBottom = _useState4[0],
255
+ setScrolledBottom = _useState4[1];
282
256
  var onScrolledBottom = React.useCallback(function (_ref10) {
283
257
  var initial = _ref10.initial;
284
-
285
258
  if (initial) {
286
259
  trackScreenEvent('scroll', 'Screen');
287
260
  }
288
-
289
261
  setScrolledBottom(true);
290
262
  }, [trackScreenEvent]);
291
263
  var onScrolledNotBottom = React.useCallback(function () {
292
264
  setScrolledBottom(false);
293
- }, [setScrolledBottom]); // Question
265
+ }, [setScrolledBottom]);
294
266
 
267
+ // Question
295
268
  var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
296
269
  key: "question",
297
270
  placeholder: "title",
@@ -311,23 +284,19 @@ var SurveyScreen = function SurveyScreen(_ref) {
311
284
  }, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({}, question, {
312
285
  className: styles.question
313
286
  }))) : null)];
314
-
315
287
  if (isSplitted || !isPlaceholder && hasCallToAction && isMiddleLayout) {
316
288
  items.push( /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
317
289
  key: "spacer"
318
290
  }));
319
291
  }
320
-
321
292
  var finalTransitionDuration = showInstantAnswer ? 0 : "".concat(resultTransitionDuration, "ms");
322
-
323
293
  var _ref11 = resultsStyle || {},
324
- _ref11$barColor = _ref11.barColor,
325
- resultsBarColor = _ref11$barColor === void 0 ? null : _ref11$barColor,
326
- _ref11$textColor = _ref11.textColor,
327
- resultsTextColor = _ref11$textColor === void 0 ? null : _ref11$textColor,
328
- _ref11$percentageText = _ref11.percentageTextStyle,
329
- resultsPercentageTextStyle = _ref11$percentageText === void 0 ? null : _ref11$percentageText;
330
-
294
+ _ref11$barColor = _ref11.barColor,
295
+ resultsBarColor = _ref11$barColor === void 0 ? null : _ref11$barColor,
296
+ _ref11$textColor = _ref11.textColor,
297
+ resultsTextColor = _ref11$textColor === void 0 ? null : _ref11$textColor,
298
+ _ref11$percentageText = _ref11.percentageTextStyle,
299
+ resultsPercentageTextStyle = _ref11$percentageText === void 0 ? null : _ref11$percentageText;
331
300
  items.push( /*#__PURE__*/React__default["default"].createElement("div", {
332
301
  key: "answers",
333
302
  className: styles.answers
@@ -335,40 +304,36 @@ var SurveyScreen = function SurveyScreen(_ref) {
335
304
  className: styles.items
336
305
  }, (isPlaceholder ? _toConsumableArray__default["default"](new Array(3)) : answers).map(function (answer, answerIndex) {
337
306
  var hasAnswer = answer !== null;
338
-
339
307
  var _ref12 = answer || {},
340
- _ref12$label = _ref12.label,
341
- label = _ref12$label === void 0 ? null : _ref12$label,
342
- _ref12$buttonStyle = _ref12.buttonStyle,
343
- answerButtonStyle = _ref12$buttonStyle === void 0 ? null : _ref12$buttonStyle,
344
- _ref12$textStyle = _ref12.textStyle,
345
- answerButtonTextStyle = _ref12$textStyle === void 0 ? null : _ref12$textStyle,
346
- _ref12$resultStyle = _ref12.resultStyle,
347
- answerResultStyle = _ref12$resultStyle === void 0 ? null : _ref12$resultStyle;
348
-
349
- var _ref13 = answerResultStyle || {},
350
- _ref13$barColor = _ref13.barColor,
351
- answerResultBarColor = _ref13$barColor === void 0 ? null : _ref13$barColor,
352
- answerResultTextColor = _ref13.textColor,
353
- _ref13$percentageText = _ref13.percentageTextStyle,
354
- answerResultPercentageTextStyle = _ref13$percentageText === void 0 ? null : _ref13$percentageText;
355
-
356
- var _ref14 = label || {},
357
- _ref14$body = _ref14.body,
358
- body = _ref14$body === void 0 ? null : _ref14$body;
359
-
360
- var _ref15 = body !== null ? quizAnswersComputed[body] || {} : {},
361
- _ref15$percent = _ref15.percent,
362
- percent = _ref15$percent === void 0 ? 0 : _ref15$percent;
363
-
364
- var _ref16 = label || {},
365
- _ref16$textStyle = _ref16.textStyle,
366
- textStyle = _ref16$textStyle === void 0 ? null : _ref16$textStyle;
367
-
368
- var _ref17 = textStyle || {},
369
- _ref17$color = _ref17.color,
370
- labelColor = _ref17$color === void 0 ? null : _ref17$color;
371
-
308
+ _ref12$label = _ref12.label,
309
+ label = _ref12$label === void 0 ? null : _ref12$label,
310
+ _ref12$buttonStyle = _ref12.buttonStyle,
311
+ answerButtonStyle = _ref12$buttonStyle === void 0 ? null : _ref12$buttonStyle,
312
+ _ref12$textStyle = _ref12.textStyle,
313
+ answerButtonTextStyle = _ref12$textStyle === void 0 ? null : _ref12$textStyle,
314
+ _ref12$resultStyle = _ref12.resultStyle,
315
+ answerResultStyle = _ref12$resultStyle === void 0 ? null : _ref12$resultStyle;
316
+ var _ref13 = answerButtonStyle || {},
317
+ _ref13$borderRadius = _ref13.borderRadius,
318
+ answerResultBorderRadius = _ref13$borderRadius === void 0 ? null : _ref13$borderRadius;
319
+ var _ref14 = answerResultStyle || {},
320
+ _ref14$barColor = _ref14.barColor,
321
+ answerResultBarColor = _ref14$barColor === void 0 ? null : _ref14$barColor,
322
+ answerResultTextColor = _ref14.textColor,
323
+ _ref14$percentageText = _ref14.percentageTextStyle,
324
+ answerResultPercentageTextStyle = _ref14$percentageText === void 0 ? null : _ref14$percentageText;
325
+ var _ref15 = label || {},
326
+ _ref15$body = _ref15.body,
327
+ body = _ref15$body === void 0 ? null : _ref15$body;
328
+ var _ref16 = body !== null ? quizAnswersComputed[body] || {} : {},
329
+ _ref16$percent = _ref16.percent,
330
+ percent = _ref16$percent === void 0 ? 0 : _ref16$percent;
331
+ var _ref17 = label || {},
332
+ _ref17$textStyle = _ref17.textStyle,
333
+ textStyle = _ref17$textStyle === void 0 ? null : _ref17$textStyle;
334
+ var _ref18 = textStyle || {},
335
+ _ref18$color = _ref18.color,
336
+ labelColor = _ref18$color === void 0 ? null : _ref18$color;
372
337
  var hasAnswerLabel = utils.isTextFilled(label);
373
338
  var userAnswer = userAnswerIndex === answerIndex;
374
339
  return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -388,12 +353,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
388
353
  }),
389
354
  emptyClassName: styles.emptyAnswer,
390
355
  isEmpty: !hasAnswerLabel
391
- }, hasAnswer ? /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
392
- transitions: transitions,
393
- playing: transitionPlaying,
394
- delay: (answerIndex + 1) * transitionStagger,
395
- disabled: transitionDisabled
396
- }, /*#__PURE__*/React__default["default"].createElement("div", {
356
+ }, hasAnswer ? /*#__PURE__*/React__default["default"].createElement("div", {
397
357
  className: styles.itemContent
398
358
  }, /*#__PURE__*/React__default["default"].createElement("div", {
399
359
  className: styles.itemInner,
@@ -402,8 +362,10 @@ var SurveyScreen = function SurveyScreen(_ref) {
402
362
  }
403
363
  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
404
364
  className: styles.button,
405
- onClick: function onClick() {
406
- return onAnswerClick(answerIndex);
365
+ onPointerUp: function onPointerUp(e) {
366
+ if (e.pointerType !== 'mouse' || e.button === 0) {
367
+ onAnswerClick(answerIndex);
368
+ }
407
369
  },
408
370
  disabled: isPreview || userAnswerIndex !== null,
409
371
  focusable: current && isView,
@@ -425,24 +387,25 @@ var SurveyScreen = function SurveyScreen(_ref) {
425
387
  opacity: 0
426
388
  })
427
389
  }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, label, {
428
- textStyle: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, textStyle), buttonsTextStyle), resultsTextColor), resultsPercentageTextStyle), answerResultTextColor), answerResultPercentageTextStyle),
390
+ textStyle: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, textStyle), buttonsTextStyle), answerButtonTextStyle), resultsTextColor), resultsPercentageTextStyle), answerResultTextColor), answerResultPercentageTextStyle),
429
391
  inline: true,
430
392
  className: styles.resultText,
431
393
  body: "".concat(percent, "%")
432
394
  }))) : null, !withoutBar ? /*#__PURE__*/React__default["default"].createElement("div", {
433
395
  className: styles.resultBar,
434
396
  style: _objectSpread__default["default"](_objectSpread__default["default"]({
397
+ borderRadius: answerResultBorderRadius,
435
398
  transitionDuration: finalTransitionDuration,
436
- width: percent !== null ? "".concat(percent, "%") : null
437
- }, utils.getStyleFromColor(answered ? answerResultBarColor || resultsBarColor || labelColor : null, 'backgroundColor')), answered ? {
438
- opacity: 1
399
+ width: percent !== null ? "".concat(percent, "%") : '0%'
400
+ }, utils.getStyleFromColor(answerResultBarColor || resultsBarColor || labelColor, 'backgroundColor')), answered ? {
401
+ opacity: 0.5
439
402
  } : {
440
403
  opacity: 0
441
404
  })
442
- }) : null))))) : null));
405
+ }) : null)))) : null));
443
406
  })) : null));
444
407
  return /*#__PURE__*/React__default["default"].createElement("div", {
445
- className: classNames__default["default"]([styles.container, (_ref19 = {}, _defineProperty__default["default"](_ref19, className, className !== null), _defineProperty__default["default"](_ref19, styles.answered, answered), _defineProperty__default["default"](_ref19, styles.withPercentage, !withoutPercentage), _defineProperty__default["default"](_ref19, styles.isPlaceholder, isPlaceholder), _ref19)])
408
+ className: classNames__default["default"]([styles.container, (_ref20 = {}, _defineProperty__default["default"](_ref20, className, className !== null), _defineProperty__default["default"](_ref20, styles.answered, answered), _defineProperty__default["default"](_ref20, styles.withPercentage, !withoutPercentage), _defineProperty__default["default"](_ref20, styles.isPlaceholder, isPlaceholder), _ref20)])
446
409
  }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
447
410
  width: width,
448
411
  height: height,
@@ -487,7 +450,6 @@ var SurveyScreen = function SurveyScreen(_ref) {
487
450
  className: styles.background
488
451
  }) : null);
489
452
  };
490
-
491
453
  SurveyScreen.propTypes = propTypes;
492
454
  SurveyScreen.defaultProps = defaultProps;
493
455
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-survey",
3
- "version": "0.3.310",
3
+ "version": "0.3.318",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -49,25 +49,25 @@
49
49
  },
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
- "@micromag/core": "^0.3.307",
53
- "@micromag/data": "^0.3.307",
54
- "@micromag/element-background": "^0.3.307",
55
- "@micromag/element-button": "^0.3.310",
56
- "@micromag/element-call-to-action": "^0.3.310",
57
- "@micromag/element-container": "^0.3.307",
58
- "@micromag/element-heading": "^0.3.307",
59
- "@micromag/element-layout": "^0.3.307",
60
- "@micromag/element-scroll": "^0.3.307",
61
- "@micromag/element-text": "^0.3.307",
62
- "@micromag/transforms": "^0.3.307",
52
+ "@micromag/core": "^0.3.318",
53
+ "@micromag/data": "^0.3.318",
54
+ "@micromag/element-background": "^0.3.318",
55
+ "@micromag/element-button": "^0.3.318",
56
+ "@micromag/element-call-to-action": "^0.3.318",
57
+ "@micromag/element-container": "^0.3.318",
58
+ "@micromag/element-heading": "^0.3.318",
59
+ "@micromag/element-layout": "^0.3.318",
60
+ "@micromag/element-scroll": "^0.3.318",
61
+ "@micromag/element-text": "^0.3.318",
62
+ "@micromag/transforms": "^0.3.318",
63
63
  "classnames": "^2.2.6",
64
64
  "lodash": "^4.17.21",
65
65
  "prop-types": "^15.7.2",
66
66
  "react-intl": "^5.12.1",
67
- "uuid": "^8.3.2"
67
+ "uuid": "^9.0.0"
68
68
  },
69
69
  "publishConfig": {
70
70
  "access": "public"
71
71
  },
72
- "gitHead": "c2f4fbfcf0f643737a77f99dccf4d353f7856c2c"
72
+ "gitHead": "7d1a296e0c0d410e1225279e1f19e3a7715bfa96"
73
73
  }