@micromag/screen-survey 0.3.673 → 0.3.679
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 +110 -94
- package/package.json +15 -15
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
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-header{left:0;position:absolute;top:0;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-survey-container .micromag-screen-survey-header.micromag-screen-survey-disabled{opacity:0;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-footer{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-survey-container .micromag-screen-survey-footer a{padding:0}.micromag-screen-survey-container .micromag-screen-survey-footer.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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.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-resultText{margin-top:10px}.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;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;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-input{margin:5px 0;position:relative}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-disabled{opacity:.5}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-disabled .micromag-screen-survey-confirm,.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-disabled .micromag-screen-survey-textInput{background:transparent}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-selected{opacity:1!important}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-selected .micromag-screen-survey-confirm{opacity:0}.micromag-screen-survey-container .micromag-screen-survey-textInput{color:#fff;display:-ms-flexbox;display:flex;margin:0;overflow:hidden;padding:10px 40px
|
|
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-header{left:0;position:absolute;top:0;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-survey-container .micromag-screen-survey-header.micromag-screen-survey-disabled{opacity:0;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-footer{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-survey-container .micromag-screen-survey-footer a{padding:0}.micromag-screen-survey-container .micromag-screen-survey-footer.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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.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-resultText{margin-top:10px}.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;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;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-input{margin:5px 0;position:relative}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-disabled{opacity:.5}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-disabled .micromag-screen-survey-confirm,.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-disabled .micromag-screen-survey-textInput{background:transparent}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-selected{opacity:1!important}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-selected .micromag-screen-survey-confirm{opacity:0}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-focused .micromag-screen-survey-confirm{opacity:1}.micromag-screen-survey-container .micromag-screen-survey-textInput{color:#fff;display:-ms-flexbox;display:flex;margin:0;overflow:hidden;padding:10px 40px;position:relative;text-align:center;-webkit-transition:margin-left .3s ease-out,opacity .5s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,opacity .5s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,opacity .5s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,opacity .5s ease-out,-webkit-transform .3s ease-out;width:100%;z-index:0}.micromag-screen-survey-container .micromag-screen-survey-confirm{bottom:0;opacity:0;position:absolute;right:0;top:0;-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out;z-index:1}.micromag-screen-survey-container .micromag-screen-survey-confirm.micromag-screen-survey-disabled .micromag-screen-survey-icon{opacity:.5}.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-textInput{padding:10px;pointer-events:none;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-answered.micromag-screen-survey-withPercentage .micromag-screen-survey-textInput{-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0)}.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-inputFocused .micromag-screen-survey-answers,.micromag-screen-survey-container.micromag-screen-survey-inputFocused .micromag-screen-survey-question{opacity:.5}.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}.micromag-screen-survey-reset{background-color:transparent;border:0;padding:10px;position:absolute;right:0;top:0;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out,-webkit-transform .15s ease-out;z-index:1000}.micromag-screen-survey-reset:hover{border:0;opacity:.8}.micromag-screen-survey-reset:hover:active{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}
|
package/es/index.js
CHANGED
|
@@ -26,7 +26,7 @@ import Scroll from '@micromag/element-scroll';
|
|
|
26
26
|
import Text from '@micromag/element-text';
|
|
27
27
|
import TextInput from '@micromag/element-text-input';
|
|
28
28
|
|
|
29
|
-
var styles = {"container":"micromag-screen-survey-container","background":"micromag-screen-survey-background","disabled":"micromag-screen-survey-disabled","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","header":"micromag-screen-survey-header","footer":"micromag-screen-survey-footer","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","resultText":"micromag-screen-survey-resultText","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","input":"micromag-screen-survey-input","textInput":"micromag-screen-survey-textInput","confirm":"micromag-screen-survey-confirm","selected":"micromag-screen-survey-selected","answered":"micromag-screen-survey-answered","withPercentage":"micromag-screen-survey-withPercentage","inputFocused":"micromag-screen-survey-inputFocused","isPlaceholder":"micromag-screen-survey-isPlaceholder","layout":"micromag-screen-survey-layout","reset":"micromag-screen-survey-reset"};
|
|
29
|
+
var styles = {"container":"micromag-screen-survey-container","background":"micromag-screen-survey-background","disabled":"micromag-screen-survey-disabled","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","header":"micromag-screen-survey-header","footer":"micromag-screen-survey-footer","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","resultText":"micromag-screen-survey-resultText","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","input":"micromag-screen-survey-input","textInput":"micromag-screen-survey-textInput","confirm":"micromag-screen-survey-confirm","selected":"micromag-screen-survey-selected","focused":"micromag-screen-survey-focused","icon":"micromag-screen-survey-icon","answered":"micromag-screen-survey-answered","withPercentage":"micromag-screen-survey-withPercentage","inputFocused":"micromag-screen-survey-inputFocused","isPlaceholder":"micromag-screen-survey-isPlaceholder","layout":"micromag-screen-survey-layout","reset":"micromag-screen-survey-reset"};
|
|
30
30
|
|
|
31
31
|
var propTypes = {
|
|
32
32
|
id: PropTypes.string,
|
|
@@ -45,14 +45,13 @@ var propTypes = {
|
|
|
45
45
|
header: PropTypes$1.header,
|
|
46
46
|
footer: PropTypes$1.footer,
|
|
47
47
|
background: PropTypes$1.backgroundElement,
|
|
48
|
-
|
|
48
|
+
customAnswer: PropTypes.bool,
|
|
49
49
|
showCount: PropTypes.bool,
|
|
50
50
|
withoutPercentage: PropTypes.bool,
|
|
51
51
|
withoutBar: PropTypes.bool,
|
|
52
52
|
current: PropTypes.bool,
|
|
53
53
|
preload: PropTypes.bool,
|
|
54
54
|
transitions: PropTypes$1.transitions,
|
|
55
|
-
// transitionStagger: PropTypes.number,
|
|
56
55
|
resultTransitionDuration: PropTypes.number,
|
|
57
56
|
type: PropTypes.string,
|
|
58
57
|
className: PropTypes.string
|
|
@@ -70,14 +69,13 @@ var defaultProps = {
|
|
|
70
69
|
header: null,
|
|
71
70
|
footer: null,
|
|
72
71
|
background: null,
|
|
73
|
-
|
|
72
|
+
customAnswer: false,
|
|
74
73
|
showCount: false,
|
|
75
74
|
withoutPercentage: false,
|
|
76
75
|
withoutBar: false,
|
|
77
76
|
current: true,
|
|
78
77
|
preload: true,
|
|
79
78
|
transitions: null,
|
|
80
|
-
// transitionStagger: 100,
|
|
81
79
|
resultTransitionDuration: 500,
|
|
82
80
|
type: null,
|
|
83
81
|
className: null
|
|
@@ -95,7 +93,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
95
93
|
header = _ref.header,
|
|
96
94
|
footer = _ref.footer,
|
|
97
95
|
background = _ref.background,
|
|
98
|
-
|
|
96
|
+
customAnswer = _ref.customAnswer,
|
|
99
97
|
showCount = _ref.showCount,
|
|
100
98
|
withoutPercentage = _ref.withoutPercentage,
|
|
101
99
|
withoutBar = _ref.withoutBar,
|
|
@@ -164,6 +162,20 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
164
162
|
});
|
|
165
163
|
var hasQuestion = isTextFilled(question);
|
|
166
164
|
var hasDefaultResult = isTextFilled(result);
|
|
165
|
+
var _ref5 = customAnswer || {},
|
|
166
|
+
_ref5$active = _ref5.active,
|
|
167
|
+
allowCustomAnswer = _ref5$active === void 0 ? false : _ref5$active,
|
|
168
|
+
_ref5$placeholder = _ref5.placeholder,
|
|
169
|
+
placeholder = _ref5$placeholder === void 0 ? null : _ref5$placeholder,
|
|
170
|
+
_ref5$textStyle = _ref5.textStyle,
|
|
171
|
+
customAnswerTextStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle,
|
|
172
|
+
_ref5$boxStyle = _ref5.boxStyle,
|
|
173
|
+
customAnswerBoxStyle = _ref5$boxStyle === void 0 ? null : _ref5$boxStyle;
|
|
174
|
+
var _ref6 = placeholder || {},
|
|
175
|
+
_ref6$body = _ref6.body,
|
|
176
|
+
placeholderBody = _ref6$body === void 0 ? null : _ref6$body,
|
|
177
|
+
_ref6$textStyle = _ref6.textStyle,
|
|
178
|
+
placeholderTextStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle;
|
|
167
179
|
var showInstantAnswer = isStatic || isCapture;
|
|
168
180
|
var _useState = useState(showInstantAnswer ? -1 : null),
|
|
169
181
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -171,23 +183,23 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
171
183
|
setUserAnswerIndex = _useState2[1];
|
|
172
184
|
var answered = userAnswerIndex !== null;
|
|
173
185
|
var quizAnswersComputed = useMemo(function () {
|
|
174
|
-
var total = answers !== null ? (quizAnswers || []).reduce(function (points,
|
|
175
|
-
var
|
|
176
|
-
count =
|
|
186
|
+
var total = answers !== null ? (quizAnswers || []).reduce(function (points, _ref7) {
|
|
187
|
+
var _ref7$count = _ref7.count,
|
|
188
|
+
count = _ref7$count === void 0 ? 0 : _ref7$count;
|
|
177
189
|
return points + parseInt(count, 10);
|
|
178
190
|
}, userAnswerIndex !== null && userAnswerIndex > -1 ? 1 : 0) : 0;
|
|
179
191
|
var computed = answers !== null ? (answers || []).reduce(function (answersTotal, ans, i) {
|
|
180
|
-
var
|
|
181
|
-
|
|
182
|
-
label =
|
|
183
|
-
var
|
|
184
|
-
|
|
185
|
-
body =
|
|
186
|
-
var
|
|
192
|
+
var _ref8 = ans || {},
|
|
193
|
+
_ref8$label = _ref8.label,
|
|
194
|
+
label = _ref8$label === void 0 ? {} : _ref8$label;
|
|
195
|
+
var _ref9 = label || {},
|
|
196
|
+
_ref9$body = _ref9.body,
|
|
197
|
+
body = _ref9$body === void 0 ? null : _ref9$body;
|
|
198
|
+
var _ref10 = quizAnswers.find(function (qa) {
|
|
187
199
|
return qa.choice === body;
|
|
188
200
|
}) || {},
|
|
189
|
-
|
|
190
|
-
count =
|
|
201
|
+
_ref10$count = _ref10.count,
|
|
202
|
+
count = _ref10$count === void 0 ? 0 : _ref10$count;
|
|
191
203
|
var countWithUser = i === userAnswerIndex ? count + 1 : count;
|
|
192
204
|
if (body !== null) {
|
|
193
205
|
return _objectSpread(_objectSpread({}, answersTotal), {}, _defineProperty({}, body, {
|
|
@@ -208,7 +220,6 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
208
220
|
}, {});
|
|
209
221
|
}, [answers, quizAnswers, userAnswerIndex]);
|
|
210
222
|
var isSplitted = layout === 'split';
|
|
211
|
-
// const isTopLayout = layout === 'top';
|
|
212
223
|
var isMiddleLayout = layout === 'middle';
|
|
213
224
|
var verticalAlign = isSplitted ? null : layout;
|
|
214
225
|
var transitionPlaying = current;
|
|
@@ -225,7 +236,8 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
225
236
|
});
|
|
226
237
|
trackScreenEvent('click_answer', "Answer ".concat(userAnswerIndex + 1, ": ").concat(answer.label.body), {
|
|
227
238
|
answer: answer,
|
|
228
|
-
answerIndex: answerIndex
|
|
239
|
+
answerIndex: answerIndex,
|
|
240
|
+
answerType: 'button'
|
|
229
241
|
});
|
|
230
242
|
}
|
|
231
243
|
}, [userAnswerIndex, setUserAnswerIndex, trackScreenEvent, submitQuiz]);
|
|
@@ -257,25 +269,25 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
257
269
|
setInputFocused(false);
|
|
258
270
|
}, [setInputFocused]);
|
|
259
271
|
var onTextInputChange = useCallback(function (e) {
|
|
260
|
-
var
|
|
261
|
-
|
|
262
|
-
value =
|
|
263
|
-
setTextInput(value);
|
|
272
|
+
var _ref11 = e.target || {},
|
|
273
|
+
_ref11$value = _ref11.value,
|
|
274
|
+
value = _ref11$value === void 0 ? null : _ref11$value;
|
|
275
|
+
setTextInput(value !== '' ? value : null);
|
|
264
276
|
}, [setTextInput]);
|
|
265
277
|
var onSubmitSuggestion = useCallback(function (e) {
|
|
266
278
|
e.preventDefault();
|
|
267
279
|
e.stopPropagation();
|
|
268
280
|
if (textInput !== null && textInput !== '' && !answered) {
|
|
269
|
-
// console.log('submitting survey suggestion', textInput);
|
|
270
281
|
submitQuiz({
|
|
271
282
|
choice: textInput,
|
|
272
283
|
value: 1
|
|
273
284
|
});
|
|
274
285
|
setUserAnswerIndex('input');
|
|
275
286
|
setInputFocused(false);
|
|
276
|
-
trackScreenEvent('
|
|
287
|
+
trackScreenEvent('click_answer', "Answer: ".concat(textInput), {
|
|
277
288
|
textInput: textInput,
|
|
278
|
-
answerIndex:
|
|
289
|
+
answerIndex: null,
|
|
290
|
+
answerType: 'custom'
|
|
279
291
|
});
|
|
280
292
|
}
|
|
281
293
|
}, [textInput, submitQuiz, answered, setUserAnswerIndex, setInputFocused, trackScreenEvent]);
|
|
@@ -300,8 +312,8 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
300
312
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
301
313
|
scrolledBottom = _useState8[0],
|
|
302
314
|
setScrolledBottom = _useState8[1];
|
|
303
|
-
var onScrolledBottom = useCallback(function (
|
|
304
|
-
var initial =
|
|
315
|
+
var onScrolledBottom = useCallback(function (_ref12) {
|
|
316
|
+
var initial = _ref12.initial;
|
|
305
317
|
if (initial) {
|
|
306
318
|
trackScreenEvent('scroll', 'Screen');
|
|
307
319
|
}
|
|
@@ -314,9 +326,9 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
314
326
|
_useState10 = _slicedToArray(_useState9, 2),
|
|
315
327
|
hasScroll = _useState10[0],
|
|
316
328
|
setHasScroll = _useState10[1];
|
|
317
|
-
var onScrollHeightChange = useCallback(function (
|
|
318
|
-
var
|
|
319
|
-
canScroll =
|
|
329
|
+
var onScrollHeightChange = useCallback(function (_ref13) {
|
|
330
|
+
var _ref13$canScroll = _ref13.canScroll,
|
|
331
|
+
canScroll = _ref13$canScroll === void 0 ? false : _ref13$canScroll;
|
|
320
332
|
setHasScroll(canScroll);
|
|
321
333
|
}, [setHasScroll]);
|
|
322
334
|
|
|
@@ -348,19 +360,19 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
348
360
|
var finalTransitionDuration = useMemo(function () {
|
|
349
361
|
return showInstantAnswer ? 0 : "".concat(resultTransitionDuration, "ms");
|
|
350
362
|
}, [showInstantAnswer, resultTransitionDuration]);
|
|
351
|
-
var
|
|
352
|
-
|
|
353
|
-
resultsBarColor =
|
|
354
|
-
|
|
355
|
-
resultsTextColor =
|
|
356
|
-
|
|
357
|
-
resultsPercentageTextStyle =
|
|
363
|
+
var _ref14 = resultsStyle || {},
|
|
364
|
+
_ref14$barColor = _ref14.barColor,
|
|
365
|
+
resultsBarColor = _ref14$barColor === void 0 ? null : _ref14$barColor,
|
|
366
|
+
_ref14$textColor = _ref14.textColor,
|
|
367
|
+
resultsTextColor = _ref14$textColor === void 0 ? null : _ref14$textColor,
|
|
368
|
+
_ref14$percentageText = _ref14.percentageTextStyle,
|
|
369
|
+
resultsPercentageTextStyle = _ref14$percentageText === void 0 ? null : _ref14$percentageText;
|
|
358
370
|
var finalResult = useMemo(function () {
|
|
359
371
|
var defaultResult = hasDefaultResult ? result : null;
|
|
360
372
|
var answer = userAnswerIndex !== null ? answers[userAnswerIndex] : null;
|
|
361
|
-
var
|
|
362
|
-
|
|
363
|
-
answerResult =
|
|
373
|
+
var _ref15 = answer || {},
|
|
374
|
+
_ref15$result = _ref15.result,
|
|
375
|
+
answerResult = _ref15$result === void 0 ? null : _ref15$result;
|
|
364
376
|
return answerResult || defaultResult;
|
|
365
377
|
}, [hasDefaultResult, result, answers, userAnswerIndex]);
|
|
366
378
|
var showReset = isEdit && userAnswerIndex !== null;
|
|
@@ -371,46 +383,46 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
371
383
|
className: styles.items
|
|
372
384
|
}, (isPlaceholder ? _toConsumableArray(new Array(3)) : answers).map(function (answer, answerIndex) {
|
|
373
385
|
var hasAnswer = answer !== null;
|
|
374
|
-
var
|
|
375
|
-
|
|
376
|
-
label =
|
|
377
|
-
|
|
378
|
-
answerButtonStyle =
|
|
379
|
-
|
|
380
|
-
answerButtonTextStyle =
|
|
381
|
-
|
|
382
|
-
answerResultStyle =
|
|
383
|
-
var
|
|
384
|
-
|
|
385
|
-
answerResultBarColor =
|
|
386
|
-
answerResultTextColor =
|
|
387
|
-
|
|
388
|
-
answerResultPercentageTextStyle =
|
|
389
|
-
var _ref16 = label || {},
|
|
390
|
-
_ref16$body = _ref16.body,
|
|
391
|
-
body = _ref16$body === void 0 ? null : _ref16$body;
|
|
392
|
-
var _ref17 = body !== null ? quizAnswersComputed[body] || {} : {},
|
|
393
|
-
_ref17$percent = _ref17.percent,
|
|
394
|
-
percent = _ref17$percent === void 0 ? 0 : _ref17$percent,
|
|
395
|
-
_ref17$count = _ref17.count,
|
|
396
|
-
count = _ref17$count === void 0 ? 0 : _ref17$count;
|
|
386
|
+
var _ref16 = answer || {},
|
|
387
|
+
_ref16$label = _ref16.label,
|
|
388
|
+
label = _ref16$label === void 0 ? null : _ref16$label,
|
|
389
|
+
_ref16$buttonStyle = _ref16.buttonStyle,
|
|
390
|
+
answerButtonStyle = _ref16$buttonStyle === void 0 ? null : _ref16$buttonStyle,
|
|
391
|
+
_ref16$textStyle = _ref16.textStyle,
|
|
392
|
+
answerButtonTextStyle = _ref16$textStyle === void 0 ? null : _ref16$textStyle,
|
|
393
|
+
_ref16$resultStyle = _ref16.resultStyle,
|
|
394
|
+
answerResultStyle = _ref16$resultStyle === void 0 ? null : _ref16$resultStyle;
|
|
395
|
+
var _ref17 = answerResultStyle || {},
|
|
396
|
+
_ref17$barColor = _ref17.barColor,
|
|
397
|
+
answerResultBarColor = _ref17$barColor === void 0 ? null : _ref17$barColor,
|
|
398
|
+
answerResultTextColor = _ref17.textColor,
|
|
399
|
+
_ref17$percentageText = _ref17.percentageTextStyle,
|
|
400
|
+
answerResultPercentageTextStyle = _ref17$percentageText === void 0 ? null : _ref17$percentageText;
|
|
397
401
|
var _ref18 = label || {},
|
|
398
|
-
_ref18$
|
|
399
|
-
|
|
400
|
-
var _ref19 =
|
|
401
|
-
_ref19$
|
|
402
|
-
|
|
402
|
+
_ref18$body = _ref18.body,
|
|
403
|
+
body = _ref18$body === void 0 ? null : _ref18$body;
|
|
404
|
+
var _ref19 = body !== null ? quizAnswersComputed[body] || {} : {},
|
|
405
|
+
_ref19$percent = _ref19.percent,
|
|
406
|
+
percent = _ref19$percent === void 0 ? 0 : _ref19$percent,
|
|
407
|
+
_ref19$count = _ref19.count,
|
|
408
|
+
count = _ref19$count === void 0 ? 0 : _ref19$count;
|
|
409
|
+
var _ref20 = label || {},
|
|
410
|
+
_ref20$textStyle = _ref20.textStyle,
|
|
411
|
+
textStyle = _ref20$textStyle === void 0 ? null : _ref20$textStyle;
|
|
412
|
+
var _ref21 = textStyle || {},
|
|
413
|
+
_ref21$color = _ref21.color,
|
|
414
|
+
labelColor = _ref21$color === void 0 ? null : _ref21$color;
|
|
403
415
|
var hasAnswerLabel = isTextFilled(label);
|
|
404
416
|
var userAnswer = userAnswerIndex === answerIndex;
|
|
405
417
|
var buttonStyles = _objectSpread(_objectSpread(_objectSpread({}, buttonsStyle), answerButtonStyle), answered ? {
|
|
406
418
|
textAlign: 'left'
|
|
407
419
|
} : null);
|
|
408
|
-
var
|
|
409
|
-
|
|
410
|
-
answerResultBorderRadius =
|
|
420
|
+
var _ref22 = buttonStyles || {},
|
|
421
|
+
_ref22$borderRadius = _ref22.borderRadius,
|
|
422
|
+
answerResultBorderRadius = _ref22$borderRadius === void 0 ? null : _ref22$borderRadius;
|
|
411
423
|
var finalBarBorderRadius = answerResultBorderRadius !== null && isNumber(answerResultBorderRadius) && answerResultBorderRadius > 2 ? answerResultBorderRadius - 2 : answerResultBorderRadius;
|
|
412
424
|
return /*#__PURE__*/React.createElement("div", {
|
|
413
|
-
key: "answer-".concat(answerIndex),
|
|
425
|
+
key: "answer-".concat(answerIndex + 1),
|
|
414
426
|
className: classNames([styles.item, _defineProperty({}, styles.userAnswer, userAnswer)])
|
|
415
427
|
}, /*#__PURE__*/React.createElement(ScreenElement, {
|
|
416
428
|
placeholder: "surveyAnswer",
|
|
@@ -444,11 +456,11 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
444
456
|
disabled: isPreview || userAnswerIndex !== null,
|
|
445
457
|
focusable: current && isView,
|
|
446
458
|
buttonStyle: buttonStyles,
|
|
447
|
-
textStyle: _objectSpread(_objectSpread(_objectSpread({},
|
|
459
|
+
textStyle: _objectSpread(_objectSpread(_objectSpread({}, buttonsTextStyle), textStyle), answerButtonTextStyle)
|
|
448
460
|
}, /*#__PURE__*/React.createElement("span", {
|
|
449
461
|
className: styles.itemLabel
|
|
450
462
|
}, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
|
|
451
|
-
textStyle: _objectSpread(_objectSpread(_objectSpread({},
|
|
463
|
+
textStyle: _objectSpread(_objectSpread(_objectSpread({}, buttonsTextStyle), textStyle), answerButtonTextStyle),
|
|
452
464
|
inline: true,
|
|
453
465
|
className: styles.itemText
|
|
454
466
|
})), !withoutPercentage ? /*#__PURE__*/React.createElement("div", {
|
|
@@ -459,7 +471,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
459
471
|
opacity: 0
|
|
460
472
|
})
|
|
461
473
|
}, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
|
|
462
|
-
textStyle: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({},
|
|
474
|
+
textStyle: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, buttonsTextStyle), textStyle), answerButtonTextStyle), resultsTextColor), resultsPercentageTextStyle), answerResultTextColor), answerResultPercentageTextStyle),
|
|
463
475
|
inline: true,
|
|
464
476
|
className: styles.resultText,
|
|
465
477
|
body: showCount ? count : "".concat(percent, "%")
|
|
@@ -514,24 +526,28 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
514
526
|
paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
|
|
515
527
|
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight + spacing)
|
|
516
528
|
} : null
|
|
517
|
-
}, items, !isPlaceholder &&
|
|
529
|
+
}, items, !isPlaceholder && allowCustomAnswer ? /*#__PURE__*/React.createElement("form", {
|
|
518
530
|
className: classNames([styles.input, _defineProperty(_defineProperty(_defineProperty({}, styles.focused, inputFocused), styles.disabled, inputDisabled), styles.selected, userAnswerIndex === 'input')]),
|
|
519
531
|
onSubmit: onSubmitSuggestion
|
|
520
532
|
}, /*#__PURE__*/React.createElement(TextInput, {
|
|
521
533
|
className: styles.textInput,
|
|
522
534
|
disabled: inputDisabled,
|
|
523
535
|
focusable: current && isView,
|
|
524
|
-
buttonStyle: buttonsStyle,
|
|
525
|
-
textStyle: _objectSpread({}, buttonsTextStyle),
|
|
536
|
+
buttonStyle: _objectSpread(_objectSpread({}, buttonsStyle), customAnswerBoxStyle),
|
|
537
|
+
textStyle: _objectSpread(_objectSpread({}, buttonsTextStyle), customAnswerTextStyle),
|
|
538
|
+
placeholderTextStyle: _objectSpread(_objectSpread(_objectSpread({}, buttonsTextStyle), customAnswerTextStyle), placeholderTextStyle),
|
|
526
539
|
value: textInput,
|
|
540
|
+
label: placeholderBody,
|
|
527
541
|
onChange: onTextInputChange,
|
|
528
542
|
onFocus: onInputFocused,
|
|
529
543
|
onBlur: onInputBlurred
|
|
530
544
|
}), /*#__PURE__*/React.createElement(Button, {
|
|
531
|
-
className: styles.confirm,
|
|
545
|
+
className: classNames([styles.confirm, _defineProperty({}, styles.disabled, inputDisabled || textInput === null || textInput === '')]),
|
|
532
546
|
type: "submit",
|
|
533
|
-
disabled: inputDisabled
|
|
534
|
-
}, /*#__PURE__*/React.createElement(ArrowIcon,
|
|
547
|
+
disabled: inputDisabled || textInput === null || textInput === ''
|
|
548
|
+
}, /*#__PURE__*/React.createElement(ArrowIcon, {
|
|
549
|
+
className: styles.icon
|
|
550
|
+
}))) : null, userAnswerIndex !== null && finalResult !== null ? /*#__PURE__*/React.createElement(Transitions, {
|
|
535
551
|
transitions: transitions,
|
|
536
552
|
playing: transitionPlaying,
|
|
537
553
|
disabled: transitionDisabled
|
|
@@ -637,6 +653,17 @@ var definition = {
|
|
|
637
653
|
"value": "Default feedback"
|
|
638
654
|
}]
|
|
639
655
|
})
|
|
656
|
+
}, {
|
|
657
|
+
name: 'customAnswer',
|
|
658
|
+
type: 'custom-answer',
|
|
659
|
+
defaultValue: false,
|
|
660
|
+
isList: true,
|
|
661
|
+
theme: {
|
|
662
|
+
textStyle: 'button'
|
|
663
|
+
// placeholder: {
|
|
664
|
+
// textStyle: 'text',
|
|
665
|
+
// },
|
|
666
|
+
}
|
|
640
667
|
}, {
|
|
641
668
|
type: 'fields',
|
|
642
669
|
isList: true,
|
|
@@ -648,17 +675,6 @@ var definition = {
|
|
|
648
675
|
}]
|
|
649
676
|
}),
|
|
650
677
|
fields: [{
|
|
651
|
-
name: 'showInput',
|
|
652
|
-
type: 'toggle',
|
|
653
|
-
defaultValue: false,
|
|
654
|
-
label: defineMessage({
|
|
655
|
-
id: "sLskqO",
|
|
656
|
-
defaultMessage: [{
|
|
657
|
-
"type": 0,
|
|
658
|
-
"value": "Show input answer"
|
|
659
|
-
}]
|
|
660
|
-
})
|
|
661
|
-
}, {
|
|
662
678
|
name: 'showCount',
|
|
663
679
|
type: 'toggle',
|
|
664
680
|
defaultValue: false,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-survey",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.679",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [
|
|
@@ -63,19 +63,19 @@
|
|
|
63
63
|
"@fortawesome/fontawesome-svg-core": "^6.5.2",
|
|
64
64
|
"@fortawesome/free-solid-svg-icons": "^6.5.2",
|
|
65
65
|
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
66
|
-
"@micromag/core": "^0.3.
|
|
67
|
-
"@micromag/data": "^0.3.
|
|
68
|
-
"@micromag/element-background": "^0.3.
|
|
69
|
-
"@micromag/element-button": "^0.3.
|
|
70
|
-
"@micromag/element-container": "^0.3.
|
|
71
|
-
"@micromag/element-footer": "^0.3.
|
|
72
|
-
"@micromag/element-header": "^0.3.
|
|
73
|
-
"@micromag/element-heading": "^0.3.
|
|
74
|
-
"@micromag/element-layout": "^0.3.
|
|
75
|
-
"@micromag/element-scroll": "^0.3.
|
|
76
|
-
"@micromag/element-text": "^0.3.
|
|
77
|
-
"@micromag/element-text-input": "^0.3.
|
|
78
|
-
"@micromag/transforms": "^0.3.
|
|
66
|
+
"@micromag/core": "^0.3.679",
|
|
67
|
+
"@micromag/data": "^0.3.679",
|
|
68
|
+
"@micromag/element-background": "^0.3.679",
|
|
69
|
+
"@micromag/element-button": "^0.3.679",
|
|
70
|
+
"@micromag/element-container": "^0.3.679",
|
|
71
|
+
"@micromag/element-footer": "^0.3.679",
|
|
72
|
+
"@micromag/element-header": "^0.3.679",
|
|
73
|
+
"@micromag/element-heading": "^0.3.679",
|
|
74
|
+
"@micromag/element-layout": "^0.3.679",
|
|
75
|
+
"@micromag/element-scroll": "^0.3.679",
|
|
76
|
+
"@micromag/element-text": "^0.3.679",
|
|
77
|
+
"@micromag/element-text-input": "^0.3.679",
|
|
78
|
+
"@micromag/transforms": "^0.3.679",
|
|
79
79
|
"classnames": "^2.2.6",
|
|
80
80
|
"lodash": "^4.17.21",
|
|
81
81
|
"prop-types": "^15.7.2",
|
|
@@ -86,5 +86,5 @@
|
|
|
86
86
|
"access": "public",
|
|
87
87
|
"registry": "https://registry.npmjs.org/"
|
|
88
88
|
},
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "ed32123e4d66d2cfe32ec1fecaf1a435e1b04bbf"
|
|
90
90
|
}
|