@micromag/screen-survey 0.3.246 → 0.3.251
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.
- package/assets/css/styles.css +1 -1
- package/es/index.js +89 -85
- package/lib/index.js +88 -84
- package/package.json +13 -13
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.micromag-screen-survey-container
|
|
1
|
+
.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-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}
|
package/es/index.js
CHANGED
|
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
|
|
|
8
8
|
import React, { useState, useMemo, useCallback, useEffect } from 'react';
|
|
9
9
|
import { PropTypes as PropTypes$1 } from '@micromag/core';
|
|
10
10
|
import { ScreenElement, Transitions } from '@micromag/core/components';
|
|
11
|
-
import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
|
|
11
|
+
import { useVisitor, useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
|
|
12
12
|
import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
|
|
13
13
|
import { isTextFilled, getLargestRemainderRound, getStyleFromColor } from '@micromag/core/utils';
|
|
14
14
|
import { useQuizCreate, useQuiz } from '@micromag/data';
|
|
@@ -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","
|
|
24
|
+
var styles = {"container":"micromag-screen-survey-container","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"};
|
|
25
25
|
|
|
26
26
|
var propTypes = {
|
|
27
27
|
id: PropTypes.string,
|
|
@@ -71,7 +71,7 @@ var defaultProps = {
|
|
|
71
71
|
};
|
|
72
72
|
|
|
73
73
|
var SurveyScreen = function SurveyScreen(_ref) {
|
|
74
|
-
var
|
|
74
|
+
var _ref20;
|
|
75
75
|
|
|
76
76
|
var id = _ref.id,
|
|
77
77
|
layout = _ref.layout,
|
|
@@ -93,6 +93,12 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
93
93
|
type = _ref.type,
|
|
94
94
|
className = _ref.className;
|
|
95
95
|
var screenId = id || 'screen-id';
|
|
96
|
+
var visitor = useVisitor();
|
|
97
|
+
|
|
98
|
+
var _ref2 = visitor || {},
|
|
99
|
+
_ref2$id = _ref2.id,
|
|
100
|
+
visitorId = _ref2$id === void 0 ? null : _ref2$id;
|
|
101
|
+
|
|
96
102
|
var trackScreenEvent = useTrackScreenEvent(type);
|
|
97
103
|
|
|
98
104
|
var _useScreenSize = useScreenSize(),
|
|
@@ -101,7 +107,8 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
101
107
|
resolution = _useScreenSize.resolution;
|
|
102
108
|
|
|
103
109
|
var _useQuizCreate = useQuizCreate({
|
|
104
|
-
screenId: screenId
|
|
110
|
+
screenId: screenId,
|
|
111
|
+
visitorId: visitorId
|
|
105
112
|
}),
|
|
106
113
|
submitQuiz = _useQuizCreate.create;
|
|
107
114
|
|
|
@@ -136,18 +143,18 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
136
143
|
allQuizAnswers = _useQuiz$quiz === void 0 ? [] : _useQuiz$quiz;
|
|
137
144
|
|
|
138
145
|
var quizAnswers = allQuizAnswers.filter(function (item) {
|
|
139
|
-
var
|
|
140
|
-
|
|
141
|
-
choice =
|
|
146
|
+
var _ref3 = item || {},
|
|
147
|
+
_ref3$choice = _ref3.choice,
|
|
148
|
+
choice = _ref3$choice === void 0 ? null : _ref3$choice;
|
|
142
149
|
|
|
143
150
|
var answersBody = answers.map(function (answer) {
|
|
144
|
-
var
|
|
145
|
-
|
|
146
|
-
label =
|
|
151
|
+
var _ref4 = answer || {},
|
|
152
|
+
_ref4$label = _ref4.label,
|
|
153
|
+
label = _ref4$label === void 0 ? null : _ref4$label;
|
|
147
154
|
|
|
148
|
-
var
|
|
149
|
-
|
|
150
|
-
body =
|
|
155
|
+
var _ref5 = label || {},
|
|
156
|
+
_ref5$body = _ref5.body,
|
|
157
|
+
body = _ref5$body === void 0 ? null : _ref5$body;
|
|
151
158
|
|
|
152
159
|
return body;
|
|
153
160
|
}).filter(function (body) {
|
|
@@ -173,25 +180,25 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
173
180
|
|
|
174
181
|
var answered = userAnswerIndex !== null;
|
|
175
182
|
var quizAnswersComputed = useMemo(function () {
|
|
176
|
-
var total = answers !== null ? (quizAnswers || []).reduce(function (points,
|
|
177
|
-
var
|
|
178
|
-
count =
|
|
183
|
+
var total = answers !== null ? (quizAnswers || []).reduce(function (points, _ref6) {
|
|
184
|
+
var _ref6$count = _ref6.count,
|
|
185
|
+
count = _ref6$count === void 0 ? 0 : _ref6$count;
|
|
179
186
|
return points + parseInt(count, 10);
|
|
180
187
|
}, userAnswerIndex !== null && userAnswerIndex > -1 ? 1 : 0) : 0;
|
|
181
188
|
var computed = answers !== null ? (answers || []).reduce(function (answersTotal, ans, i) {
|
|
182
|
-
var
|
|
183
|
-
|
|
184
|
-
label =
|
|
189
|
+
var _ref7 = ans || {},
|
|
190
|
+
_ref7$label = _ref7.label,
|
|
191
|
+
label = _ref7$label === void 0 ? {} : _ref7$label;
|
|
185
192
|
|
|
186
|
-
var
|
|
187
|
-
|
|
188
|
-
body =
|
|
193
|
+
var _ref8 = label || {},
|
|
194
|
+
_ref8$body = _ref8.body,
|
|
195
|
+
body = _ref8$body === void 0 ? null : _ref8$body;
|
|
189
196
|
|
|
190
|
-
var
|
|
197
|
+
var _ref9 = quizAnswers.find(function (qa) {
|
|
191
198
|
return qa.choice === body;
|
|
192
199
|
}) || {},
|
|
193
|
-
|
|
194
|
-
count =
|
|
200
|
+
_ref9$count = _ref9.count,
|
|
201
|
+
count = _ref9$count === void 0 ? 0 : _ref9$count;
|
|
195
202
|
|
|
196
203
|
var countWithUser = i === userAnswerIndex ? count + 1 : count;
|
|
197
204
|
|
|
@@ -241,9 +248,9 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
241
248
|
}
|
|
242
249
|
}, [isEdit, current, userAnswerIndex, setUserAnswerIndex]); // Call to Action
|
|
243
250
|
|
|
244
|
-
var
|
|
245
|
-
|
|
246
|
-
hasCallToAction =
|
|
251
|
+
var _ref10 = callToAction || {},
|
|
252
|
+
_ref10$active = _ref10.active,
|
|
253
|
+
hasCallToAction = _ref10$active === void 0 ? false : _ref10$active;
|
|
247
254
|
|
|
248
255
|
var _useDimensionObserver = useDimensionObserver(),
|
|
249
256
|
callToActionRef = _useDimensionObserver.ref,
|
|
@@ -257,8 +264,8 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
257
264
|
scrolledBottom = _useState4[0],
|
|
258
265
|
setScrolledBottom = _useState4[1];
|
|
259
266
|
|
|
260
|
-
var onScrolledBottom = useCallback(function (
|
|
261
|
-
var initial =
|
|
267
|
+
var onScrolledBottom = useCallback(function (_ref11) {
|
|
268
|
+
var initial = _ref11.initial;
|
|
262
269
|
|
|
263
270
|
if (initial) {
|
|
264
271
|
trackScreenEvent('scroll', 'Screen');
|
|
@@ -298,13 +305,13 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
298
305
|
|
|
299
306
|
var finalTransitionDuration = showInstantAnswer ? 0 : "".concat(resultTransitionDuration, "ms");
|
|
300
307
|
|
|
301
|
-
var
|
|
302
|
-
|
|
303
|
-
resultsBarColor =
|
|
304
|
-
|
|
305
|
-
resultsTextColor =
|
|
306
|
-
|
|
307
|
-
resultsPercentageTextStyle =
|
|
308
|
+
var _ref12 = resultsStyle || {},
|
|
309
|
+
_ref12$barColor = _ref12.barColor,
|
|
310
|
+
resultsBarColor = _ref12$barColor === void 0 ? null : _ref12$barColor,
|
|
311
|
+
_ref12$textColor = _ref12.textColor,
|
|
312
|
+
resultsTextColor = _ref12$textColor === void 0 ? null : _ref12$textColor,
|
|
313
|
+
_ref12$percentageText = _ref12.percentageTextStyle,
|
|
314
|
+
resultsPercentageTextStyle = _ref12$percentageText === void 0 ? null : _ref12$percentageText;
|
|
308
315
|
|
|
309
316
|
items.push( /*#__PURE__*/React.createElement("div", {
|
|
310
317
|
key: "answers",
|
|
@@ -314,38 +321,38 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
314
321
|
}, (isPlaceholder ? _toConsumableArray(new Array(3)) : answers).map(function (answer, answerIndex) {
|
|
315
322
|
var hasAnswer = answer !== null;
|
|
316
323
|
|
|
317
|
-
var
|
|
318
|
-
|
|
319
|
-
label =
|
|
320
|
-
|
|
321
|
-
answerButtonStyle =
|
|
322
|
-
|
|
323
|
-
answerButtonTextStyle =
|
|
324
|
-
|
|
325
|
-
answerResultStyle =
|
|
326
|
-
|
|
327
|
-
var
|
|
328
|
-
|
|
329
|
-
answerResultBarColor =
|
|
330
|
-
answerResultTextColor =
|
|
331
|
-
|
|
332
|
-
answerResultPercentageTextStyle =
|
|
333
|
-
|
|
334
|
-
var
|
|
335
|
-
|
|
336
|
-
body =
|
|
337
|
-
|
|
338
|
-
var
|
|
339
|
-
|
|
340
|
-
percent =
|
|
341
|
-
|
|
342
|
-
var
|
|
343
|
-
|
|
344
|
-
textStyle =
|
|
345
|
-
|
|
346
|
-
var
|
|
347
|
-
|
|
348
|
-
labelColor =
|
|
324
|
+
var _ref13 = answer || {},
|
|
325
|
+
_ref13$label = _ref13.label,
|
|
326
|
+
label = _ref13$label === void 0 ? null : _ref13$label,
|
|
327
|
+
_ref13$buttonStyle = _ref13.buttonStyle,
|
|
328
|
+
answerButtonStyle = _ref13$buttonStyle === void 0 ? null : _ref13$buttonStyle,
|
|
329
|
+
_ref13$textStyle = _ref13.textStyle,
|
|
330
|
+
answerButtonTextStyle = _ref13$textStyle === void 0 ? null : _ref13$textStyle,
|
|
331
|
+
_ref13$resultStyle = _ref13.resultStyle,
|
|
332
|
+
answerResultStyle = _ref13$resultStyle === void 0 ? null : _ref13$resultStyle;
|
|
333
|
+
|
|
334
|
+
var _ref14 = answerResultStyle || {},
|
|
335
|
+
_ref14$barColor = _ref14.barColor,
|
|
336
|
+
answerResultBarColor = _ref14$barColor === void 0 ? null : _ref14$barColor,
|
|
337
|
+
answerResultTextColor = _ref14.textColor,
|
|
338
|
+
_ref14$percentageText = _ref14.percentageTextStyle,
|
|
339
|
+
answerResultPercentageTextStyle = _ref14$percentageText === void 0 ? null : _ref14$percentageText;
|
|
340
|
+
|
|
341
|
+
var _ref15 = label || {},
|
|
342
|
+
_ref15$body = _ref15.body,
|
|
343
|
+
body = _ref15$body === void 0 ? null : _ref15$body;
|
|
344
|
+
|
|
345
|
+
var _ref16 = body !== null ? quizAnswersComputed[body] || {} : {},
|
|
346
|
+
_ref16$percent = _ref16.percent,
|
|
347
|
+
percent = _ref16$percent === void 0 ? 0 : _ref16$percent;
|
|
348
|
+
|
|
349
|
+
var _ref17 = label || {},
|
|
350
|
+
_ref17$textStyle = _ref17.textStyle,
|
|
351
|
+
textStyle = _ref17$textStyle === void 0 ? null : _ref17$textStyle;
|
|
352
|
+
|
|
353
|
+
var _ref18 = textStyle || {},
|
|
354
|
+
_ref18$color = _ref18.color,
|
|
355
|
+
labelColor = _ref18$color === void 0 ? null : _ref18$color;
|
|
349
356
|
|
|
350
357
|
var hasAnswerLabel = isTextFilled(label);
|
|
351
358
|
var userAnswer = userAnswerIndex === answerIndex;
|
|
@@ -420,11 +427,19 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
420
427
|
}) : null))))) : null));
|
|
421
428
|
})) : null));
|
|
422
429
|
return /*#__PURE__*/React.createElement("div", {
|
|
423
|
-
className: classNames([styles.container, (
|
|
424
|
-
}, /*#__PURE__*/React.createElement(
|
|
430
|
+
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)])
|
|
431
|
+
}, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
|
|
432
|
+
background: background,
|
|
425
433
|
width: width,
|
|
426
434
|
height: height,
|
|
427
|
-
|
|
435
|
+
resolution: resolution,
|
|
436
|
+
playing: backgroundPlaying,
|
|
437
|
+
muted: muted,
|
|
438
|
+
shouldLoad: mediaShouldLoad,
|
|
439
|
+
mediaRef: mediaRef
|
|
440
|
+
}) : null, /*#__PURE__*/React.createElement(Container, {
|
|
441
|
+
width: width,
|
|
442
|
+
height: height
|
|
428
443
|
}, /*#__PURE__*/React.createElement(Scroll, {
|
|
429
444
|
verticalAlign: verticalAlign,
|
|
430
445
|
disabled: scrollingDisabled,
|
|
@@ -435,7 +450,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
435
450
|
verticalAlign: verticalAlign,
|
|
436
451
|
style: !isPlaceholder ? {
|
|
437
452
|
padding: spacing,
|
|
438
|
-
paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
|
|
453
|
+
paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
|
|
439
454
|
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight + spacing)
|
|
440
455
|
} : null
|
|
441
456
|
}, items)), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
|
|
@@ -452,18 +467,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
452
467
|
animationDisabled: isPreview,
|
|
453
468
|
focusable: current && isView,
|
|
454
469
|
openWebView: openWebView
|
|
455
|
-
}))) : null)
|
|
456
|
-
background: background,
|
|
457
|
-
width: width,
|
|
458
|
-
height: height,
|
|
459
|
-
resolution: resolution,
|
|
460
|
-
playing: backgroundPlaying,
|
|
461
|
-
muted: muted,
|
|
462
|
-
shouldLoad: mediaShouldLoad,
|
|
463
|
-
mediaRef: mediaRef,
|
|
464
|
-
withoutVideo: isPreview,
|
|
465
|
-
className: styles.background
|
|
466
|
-
}) : null);
|
|
470
|
+
}))) : null));
|
|
467
471
|
};
|
|
468
472
|
|
|
469
473
|
SurveyScreen.propTypes = propTypes;
|
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","
|
|
46
|
+
var styles = {"container":"micromag-screen-survey-container","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"};
|
|
47
47
|
|
|
48
48
|
var propTypes = {
|
|
49
49
|
id: PropTypes__default["default"].string,
|
|
@@ -93,7 +93,7 @@ var defaultProps = {
|
|
|
93
93
|
};
|
|
94
94
|
|
|
95
95
|
var SurveyScreen = function SurveyScreen(_ref) {
|
|
96
|
-
var
|
|
96
|
+
var _ref20;
|
|
97
97
|
|
|
98
98
|
var id = _ref.id,
|
|
99
99
|
layout = _ref.layout,
|
|
@@ -115,6 +115,12 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
115
115
|
type = _ref.type,
|
|
116
116
|
className = _ref.className;
|
|
117
117
|
var screenId = id || 'screen-id';
|
|
118
|
+
var visitor = contexts.useVisitor();
|
|
119
|
+
|
|
120
|
+
var _ref2 = visitor || {},
|
|
121
|
+
_ref2$id = _ref2.id,
|
|
122
|
+
visitorId = _ref2$id === void 0 ? null : _ref2$id;
|
|
123
|
+
|
|
118
124
|
var trackScreenEvent = hooks.useTrackScreenEvent(type);
|
|
119
125
|
|
|
120
126
|
var _useScreenSize = contexts.useScreenSize(),
|
|
@@ -123,7 +129,8 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
123
129
|
resolution = _useScreenSize.resolution;
|
|
124
130
|
|
|
125
131
|
var _useQuizCreate = data.useQuizCreate({
|
|
126
|
-
screenId: screenId
|
|
132
|
+
screenId: screenId,
|
|
133
|
+
visitorId: visitorId
|
|
127
134
|
}),
|
|
128
135
|
submitQuiz = _useQuizCreate.create;
|
|
129
136
|
|
|
@@ -158,18 +165,18 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
158
165
|
allQuizAnswers = _useQuiz$quiz === void 0 ? [] : _useQuiz$quiz;
|
|
159
166
|
|
|
160
167
|
var quizAnswers = allQuizAnswers.filter(function (item) {
|
|
161
|
-
var
|
|
162
|
-
|
|
163
|
-
choice =
|
|
168
|
+
var _ref3 = item || {},
|
|
169
|
+
_ref3$choice = _ref3.choice,
|
|
170
|
+
choice = _ref3$choice === void 0 ? null : _ref3$choice;
|
|
164
171
|
|
|
165
172
|
var answersBody = answers.map(function (answer) {
|
|
166
|
-
var
|
|
167
|
-
|
|
168
|
-
label =
|
|
173
|
+
var _ref4 = answer || {},
|
|
174
|
+
_ref4$label = _ref4.label,
|
|
175
|
+
label = _ref4$label === void 0 ? null : _ref4$label;
|
|
169
176
|
|
|
170
|
-
var
|
|
171
|
-
|
|
172
|
-
body =
|
|
177
|
+
var _ref5 = label || {},
|
|
178
|
+
_ref5$body = _ref5.body,
|
|
179
|
+
body = _ref5$body === void 0 ? null : _ref5$body;
|
|
173
180
|
|
|
174
181
|
return body;
|
|
175
182
|
}).filter(function (body) {
|
|
@@ -195,25 +202,25 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
195
202
|
|
|
196
203
|
var answered = userAnswerIndex !== null;
|
|
197
204
|
var quizAnswersComputed = React.useMemo(function () {
|
|
198
|
-
var total = answers !== null ? (quizAnswers || []).reduce(function (points,
|
|
199
|
-
var
|
|
200
|
-
count =
|
|
205
|
+
var total = answers !== null ? (quizAnswers || []).reduce(function (points, _ref6) {
|
|
206
|
+
var _ref6$count = _ref6.count,
|
|
207
|
+
count = _ref6$count === void 0 ? 0 : _ref6$count;
|
|
201
208
|
return points + parseInt(count, 10);
|
|
202
209
|
}, userAnswerIndex !== null && userAnswerIndex > -1 ? 1 : 0) : 0;
|
|
203
210
|
var computed = answers !== null ? (answers || []).reduce(function (answersTotal, ans, i) {
|
|
204
|
-
var
|
|
205
|
-
|
|
206
|
-
label =
|
|
211
|
+
var _ref7 = ans || {},
|
|
212
|
+
_ref7$label = _ref7.label,
|
|
213
|
+
label = _ref7$label === void 0 ? {} : _ref7$label;
|
|
207
214
|
|
|
208
|
-
var
|
|
209
|
-
|
|
210
|
-
body =
|
|
215
|
+
var _ref8 = label || {},
|
|
216
|
+
_ref8$body = _ref8.body,
|
|
217
|
+
body = _ref8$body === void 0 ? null : _ref8$body;
|
|
211
218
|
|
|
212
|
-
var
|
|
219
|
+
var _ref9 = quizAnswers.find(function (qa) {
|
|
213
220
|
return qa.choice === body;
|
|
214
221
|
}) || {},
|
|
215
|
-
|
|
216
|
-
count =
|
|
222
|
+
_ref9$count = _ref9.count,
|
|
223
|
+
count = _ref9$count === void 0 ? 0 : _ref9$count;
|
|
217
224
|
|
|
218
225
|
var countWithUser = i === userAnswerIndex ? count + 1 : count;
|
|
219
226
|
|
|
@@ -263,9 +270,9 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
263
270
|
}
|
|
264
271
|
}, [isEdit, current, userAnswerIndex, setUserAnswerIndex]); // Call to Action
|
|
265
272
|
|
|
266
|
-
var
|
|
267
|
-
|
|
268
|
-
hasCallToAction =
|
|
273
|
+
var _ref10 = callToAction || {},
|
|
274
|
+
_ref10$active = _ref10.active,
|
|
275
|
+
hasCallToAction = _ref10$active === void 0 ? false : _ref10$active;
|
|
269
276
|
|
|
270
277
|
var _useDimensionObserver = hooks.useDimensionObserver(),
|
|
271
278
|
callToActionRef = _useDimensionObserver.ref,
|
|
@@ -279,8 +286,8 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
279
286
|
scrolledBottom = _useState4[0],
|
|
280
287
|
setScrolledBottom = _useState4[1];
|
|
281
288
|
|
|
282
|
-
var onScrolledBottom = React.useCallback(function (
|
|
283
|
-
var initial =
|
|
289
|
+
var onScrolledBottom = React.useCallback(function (_ref11) {
|
|
290
|
+
var initial = _ref11.initial;
|
|
284
291
|
|
|
285
292
|
if (initial) {
|
|
286
293
|
trackScreenEvent('scroll', 'Screen');
|
|
@@ -320,13 +327,13 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
320
327
|
|
|
321
328
|
var finalTransitionDuration = showInstantAnswer ? 0 : "".concat(resultTransitionDuration, "ms");
|
|
322
329
|
|
|
323
|
-
var
|
|
324
|
-
|
|
325
|
-
resultsBarColor =
|
|
326
|
-
|
|
327
|
-
resultsTextColor =
|
|
328
|
-
|
|
329
|
-
resultsPercentageTextStyle =
|
|
330
|
+
var _ref12 = resultsStyle || {},
|
|
331
|
+
_ref12$barColor = _ref12.barColor,
|
|
332
|
+
resultsBarColor = _ref12$barColor === void 0 ? null : _ref12$barColor,
|
|
333
|
+
_ref12$textColor = _ref12.textColor,
|
|
334
|
+
resultsTextColor = _ref12$textColor === void 0 ? null : _ref12$textColor,
|
|
335
|
+
_ref12$percentageText = _ref12.percentageTextStyle,
|
|
336
|
+
resultsPercentageTextStyle = _ref12$percentageText === void 0 ? null : _ref12$percentageText;
|
|
330
337
|
|
|
331
338
|
items.push( /*#__PURE__*/React__default["default"].createElement("div", {
|
|
332
339
|
key: "answers",
|
|
@@ -336,38 +343,38 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
336
343
|
}, (isPlaceholder ? _toConsumableArray__default["default"](new Array(3)) : answers).map(function (answer, answerIndex) {
|
|
337
344
|
var hasAnswer = answer !== null;
|
|
338
345
|
|
|
339
|
-
var
|
|
340
|
-
|
|
341
|
-
label =
|
|
342
|
-
|
|
343
|
-
answerButtonStyle =
|
|
344
|
-
|
|
345
|
-
answerButtonTextStyle =
|
|
346
|
-
|
|
347
|
-
answerResultStyle =
|
|
348
|
-
|
|
349
|
-
var
|
|
350
|
-
|
|
351
|
-
answerResultBarColor =
|
|
352
|
-
answerResultTextColor =
|
|
353
|
-
|
|
354
|
-
answerResultPercentageTextStyle =
|
|
355
|
-
|
|
356
|
-
var
|
|
357
|
-
|
|
358
|
-
body =
|
|
359
|
-
|
|
360
|
-
var
|
|
361
|
-
|
|
362
|
-
percent =
|
|
363
|
-
|
|
364
|
-
var
|
|
365
|
-
|
|
366
|
-
textStyle =
|
|
367
|
-
|
|
368
|
-
var
|
|
369
|
-
|
|
370
|
-
labelColor =
|
|
346
|
+
var _ref13 = answer || {},
|
|
347
|
+
_ref13$label = _ref13.label,
|
|
348
|
+
label = _ref13$label === void 0 ? null : _ref13$label,
|
|
349
|
+
_ref13$buttonStyle = _ref13.buttonStyle,
|
|
350
|
+
answerButtonStyle = _ref13$buttonStyle === void 0 ? null : _ref13$buttonStyle,
|
|
351
|
+
_ref13$textStyle = _ref13.textStyle,
|
|
352
|
+
answerButtonTextStyle = _ref13$textStyle === void 0 ? null : _ref13$textStyle,
|
|
353
|
+
_ref13$resultStyle = _ref13.resultStyle,
|
|
354
|
+
answerResultStyle = _ref13$resultStyle === void 0 ? null : _ref13$resultStyle;
|
|
355
|
+
|
|
356
|
+
var _ref14 = answerResultStyle || {},
|
|
357
|
+
_ref14$barColor = _ref14.barColor,
|
|
358
|
+
answerResultBarColor = _ref14$barColor === void 0 ? null : _ref14$barColor,
|
|
359
|
+
answerResultTextColor = _ref14.textColor,
|
|
360
|
+
_ref14$percentageText = _ref14.percentageTextStyle,
|
|
361
|
+
answerResultPercentageTextStyle = _ref14$percentageText === void 0 ? null : _ref14$percentageText;
|
|
362
|
+
|
|
363
|
+
var _ref15 = label || {},
|
|
364
|
+
_ref15$body = _ref15.body,
|
|
365
|
+
body = _ref15$body === void 0 ? null : _ref15$body;
|
|
366
|
+
|
|
367
|
+
var _ref16 = body !== null ? quizAnswersComputed[body] || {} : {},
|
|
368
|
+
_ref16$percent = _ref16.percent,
|
|
369
|
+
percent = _ref16$percent === void 0 ? 0 : _ref16$percent;
|
|
370
|
+
|
|
371
|
+
var _ref17 = label || {},
|
|
372
|
+
_ref17$textStyle = _ref17.textStyle,
|
|
373
|
+
textStyle = _ref17$textStyle === void 0 ? null : _ref17$textStyle;
|
|
374
|
+
|
|
375
|
+
var _ref18 = textStyle || {},
|
|
376
|
+
_ref18$color = _ref18.color,
|
|
377
|
+
labelColor = _ref18$color === void 0 ? null : _ref18$color;
|
|
371
378
|
|
|
372
379
|
var hasAnswerLabel = utils.isTextFilled(label);
|
|
373
380
|
var userAnswer = userAnswerIndex === answerIndex;
|
|
@@ -442,11 +449,19 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
442
449
|
}) : null))))) : null));
|
|
443
450
|
})) : null));
|
|
444
451
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
445
|
-
className: classNames__default["default"]([styles.container, (
|
|
446
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
452
|
+
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)])
|
|
453
|
+
}, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
|
|
454
|
+
background: background,
|
|
447
455
|
width: width,
|
|
448
456
|
height: height,
|
|
449
|
-
|
|
457
|
+
resolution: resolution,
|
|
458
|
+
playing: backgroundPlaying,
|
|
459
|
+
muted: muted,
|
|
460
|
+
shouldLoad: mediaShouldLoad,
|
|
461
|
+
mediaRef: mediaRef
|
|
462
|
+
}) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
|
|
463
|
+
width: width,
|
|
464
|
+
height: height
|
|
450
465
|
}, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
|
|
451
466
|
verticalAlign: verticalAlign,
|
|
452
467
|
disabled: scrollingDisabled,
|
|
@@ -457,7 +472,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
457
472
|
verticalAlign: verticalAlign,
|
|
458
473
|
style: !isPlaceholder ? {
|
|
459
474
|
padding: spacing,
|
|
460
|
-
paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
|
|
475
|
+
paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
|
|
461
476
|
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight + spacing)
|
|
462
477
|
} : null
|
|
463
478
|
}, items)), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
@@ -474,18 +489,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
474
489
|
animationDisabled: isPreview,
|
|
475
490
|
focusable: current && isView,
|
|
476
491
|
openWebView: openWebView
|
|
477
|
-
}))) : null)
|
|
478
|
-
background: background,
|
|
479
|
-
width: width,
|
|
480
|
-
height: height,
|
|
481
|
-
resolution: resolution,
|
|
482
|
-
playing: backgroundPlaying,
|
|
483
|
-
muted: muted,
|
|
484
|
-
shouldLoad: mediaShouldLoad,
|
|
485
|
-
mediaRef: mediaRef,
|
|
486
|
-
withoutVideo: isPreview,
|
|
487
|
-
className: styles.background
|
|
488
|
-
}) : null);
|
|
492
|
+
}))) : null));
|
|
489
493
|
};
|
|
490
494
|
|
|
491
495
|
SurveyScreen.propTypes = propTypes;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-survey",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.251",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -49,17 +49,17 @@
|
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@babel/runtime": "^7.13.10",
|
|
52
|
-
"@micromag/core": "^0.3.
|
|
53
|
-
"@micromag/data": "^0.3.
|
|
54
|
-
"@micromag/element-background": "^0.3.
|
|
55
|
-
"@micromag/element-button": "^0.3.
|
|
56
|
-
"@micromag/element-call-to-action": "^0.3.
|
|
57
|
-
"@micromag/element-container": "^0.3.
|
|
58
|
-
"@micromag/element-heading": "^0.3.
|
|
59
|
-
"@micromag/element-layout": "^0.3.
|
|
60
|
-
"@micromag/element-scroll": "^0.3.
|
|
61
|
-
"@micromag/element-text": "^0.3.
|
|
62
|
-
"@micromag/transforms": "^0.3.
|
|
52
|
+
"@micromag/core": "^0.3.251",
|
|
53
|
+
"@micromag/data": "^0.3.251",
|
|
54
|
+
"@micromag/element-background": "^0.3.251",
|
|
55
|
+
"@micromag/element-button": "^0.3.251",
|
|
56
|
+
"@micromag/element-call-to-action": "^0.3.251",
|
|
57
|
+
"@micromag/element-container": "^0.3.251",
|
|
58
|
+
"@micromag/element-heading": "^0.3.251",
|
|
59
|
+
"@micromag/element-layout": "^0.3.251",
|
|
60
|
+
"@micromag/element-scroll": "^0.3.251",
|
|
61
|
+
"@micromag/element-text": "^0.3.251",
|
|
62
|
+
"@micromag/transforms": "^0.3.251",
|
|
63
63
|
"classnames": "^2.2.6",
|
|
64
64
|
"lodash": "^4.17.21",
|
|
65
65
|
"prop-types": "^15.7.2",
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"publishConfig": {
|
|
70
70
|
"access": "public"
|
|
71
71
|
},
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "3b6fb00baaa7f3ab90684a88cbe4c30929b6b27d"
|
|
73
73
|
}
|