@micromag/screen-survey 0.3.425 → 0.3.429
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 +1 -2
- package/lib/index.js +54 -75
- package/package.json +22 -14
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
|
|
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{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;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:-webkit-box;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-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
|
@@ -74,7 +74,6 @@ var defaultProps = {
|
|
|
74
74
|
className: null
|
|
75
75
|
};
|
|
76
76
|
var SurveyScreen = function SurveyScreen(_ref) {
|
|
77
|
-
var _ref20;
|
|
78
77
|
var id = _ref.id,
|
|
79
78
|
layout = _ref.layout,
|
|
80
79
|
question = _ref.question,
|
|
@@ -407,7 +406,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
407
406
|
}) : null)))) : null));
|
|
408
407
|
})) : null));
|
|
409
408
|
return /*#__PURE__*/React.createElement("div", {
|
|
410
|
-
className: classNames([styles.container, (
|
|
409
|
+
className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.answered, answered), styles.withPercentage, !withoutPercentage), styles.isPlaceholder, isPlaceholder)])
|
|
411
410
|
}, /*#__PURE__*/React.createElement(Container, {
|
|
412
411
|
width: width,
|
|
413
412
|
height: height,
|
package/lib/index.js
CHANGED
|
@@ -27,53 +27,33 @@ var Layout = require('@micromag/element-layout');
|
|
|
27
27
|
var Scroll = require('@micromag/element-scroll');
|
|
28
28
|
var Text = require('@micromag/element-text');
|
|
29
29
|
|
|
30
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
31
|
-
|
|
32
|
-
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
|
|
33
|
-
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
34
|
-
var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
|
|
35
|
-
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
|
|
36
|
-
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
|
|
37
|
-
var isNumber__default = /*#__PURE__*/_interopDefaultLegacy(isNumber);
|
|
38
|
-
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
39
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
40
|
-
var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
|
|
41
|
-
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
|
|
42
|
-
var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
|
|
43
|
-
var Footer__default = /*#__PURE__*/_interopDefaultLegacy(Footer);
|
|
44
|
-
var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
|
|
45
|
-
var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
|
|
46
|
-
var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
|
|
47
|
-
var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
|
|
48
|
-
var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
|
|
49
|
-
|
|
50
30
|
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","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","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"};
|
|
51
31
|
|
|
52
32
|
var propTypes = {
|
|
53
|
-
id:
|
|
54
|
-
layout:
|
|
33
|
+
id: PropTypes.string,
|
|
34
|
+
layout: PropTypes.oneOf(['top', 'middle', 'bottom', 'split']),
|
|
55
35
|
question: core.PropTypes.textElement,
|
|
56
36
|
answers: core.PropTypes.answers,
|
|
57
37
|
buttonsStyle: core.PropTypes.boxStyle,
|
|
58
38
|
buttonsTextStyle: core.PropTypes.textStyle,
|
|
59
|
-
resultsStyle:
|
|
39
|
+
resultsStyle: PropTypes.shape({
|
|
60
40
|
barColor: core.PropTypes.color,
|
|
61
41
|
textColor: core.PropTypes.color,
|
|
62
42
|
percentageTextStyle: core.PropTypes.textStyle
|
|
63
43
|
}),
|
|
64
|
-
spacing:
|
|
44
|
+
spacing: PropTypes.number,
|
|
65
45
|
header: core.PropTypes.header,
|
|
66
46
|
footer: core.PropTypes.footer,
|
|
67
47
|
background: core.PropTypes.backgroundElement,
|
|
68
|
-
withoutPercentage:
|
|
69
|
-
withoutBar:
|
|
70
|
-
current:
|
|
71
|
-
active:
|
|
48
|
+
withoutPercentage: PropTypes.bool,
|
|
49
|
+
withoutBar: PropTypes.bool,
|
|
50
|
+
current: PropTypes.bool,
|
|
51
|
+
active: PropTypes.bool,
|
|
72
52
|
transitions: core.PropTypes.transitions,
|
|
73
53
|
// transitionStagger: PropTypes.number,
|
|
74
|
-
resultTransitionDuration:
|
|
75
|
-
type:
|
|
76
|
-
className:
|
|
54
|
+
resultTransitionDuration: PropTypes.number,
|
|
55
|
+
type: PropTypes.string,
|
|
56
|
+
className: PropTypes.string
|
|
77
57
|
};
|
|
78
58
|
var defaultProps = {
|
|
79
59
|
id: null,
|
|
@@ -98,7 +78,6 @@ var defaultProps = {
|
|
|
98
78
|
className: null
|
|
99
79
|
};
|
|
100
80
|
var SurveyScreen = function SurveyScreen(_ref) {
|
|
101
|
-
var _ref20;
|
|
102
81
|
var id = _ref.id,
|
|
103
82
|
layout = _ref.layout,
|
|
104
83
|
question = _ref.question,
|
|
@@ -178,7 +157,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
178
157
|
var hasQuestion = utils.isTextFilled(question);
|
|
179
158
|
var showInstantAnswer = isStatic || isCapture;
|
|
180
159
|
var _useState = React.useState(showInstantAnswer ? -1 : null),
|
|
181
|
-
_useState2 =
|
|
160
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
182
161
|
userAnswerIndex = _useState2[0],
|
|
183
162
|
setUserAnswerIndex = _useState2[1];
|
|
184
163
|
var answered = userAnswerIndex !== null;
|
|
@@ -202,7 +181,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
202
181
|
count = _ref8$count === void 0 ? 0 : _ref8$count;
|
|
203
182
|
var countWithUser = i === userAnswerIndex ? count + 1 : count;
|
|
204
183
|
if (body !== null) {
|
|
205
|
-
return
|
|
184
|
+
return _objectSpread(_objectSpread({}, answersTotal), {}, _defineProperty({}, body, {
|
|
206
185
|
percent: total > 0 ? countWithUser / total * 100 : 0,
|
|
207
186
|
count: countWithUser
|
|
208
187
|
}));
|
|
@@ -214,7 +193,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
214
193
|
}) : [];
|
|
215
194
|
var evenlySplit = utils.getLargestRemainderRound(quizAnswersPct, 100);
|
|
216
195
|
return Object.keys(computed).reduce(function (acc, key, i) {
|
|
217
|
-
return
|
|
196
|
+
return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, _objectSpread(_objectSpread({}, computed[key]), {}, {
|
|
218
197
|
percent: evenlySplit[i]
|
|
219
198
|
})));
|
|
220
199
|
}, {});
|
|
@@ -264,7 +243,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
264
243
|
footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
|
|
265
244
|
var scrollingDisabled = !isEdit && transitionDisabled || !current;
|
|
266
245
|
var _useState3 = React.useState(false),
|
|
267
|
-
_useState4 =
|
|
246
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
268
247
|
scrolledBottom = _useState4[0],
|
|
269
248
|
setScrolledBottom = _useState4[1];
|
|
270
249
|
var onScrolledBottom = React.useCallback(function (_ref9) {
|
|
@@ -278,7 +257,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
278
257
|
setScrolledBottom(false);
|
|
279
258
|
}, [setScrolledBottom]);
|
|
280
259
|
var _useState5 = React.useState(false),
|
|
281
|
-
_useState6 =
|
|
260
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
282
261
|
hasScroll = _useState6[0],
|
|
283
262
|
setHasScroll = _useState6[1];
|
|
284
263
|
var onScrollHeightChange = React.useCallback(function (_ref10) {
|
|
@@ -288,10 +267,10 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
288
267
|
}, [setHasScroll]);
|
|
289
268
|
|
|
290
269
|
// Question
|
|
291
|
-
var items = [/*#__PURE__*/
|
|
270
|
+
var items = [/*#__PURE__*/React.createElement(components.ScreenElement, {
|
|
292
271
|
key: "question",
|
|
293
272
|
placeholder: "title",
|
|
294
|
-
emptyLabel: /*#__PURE__*/
|
|
273
|
+
emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
|
|
295
274
|
id: "e1I+KU",
|
|
296
275
|
defaultMessage: [{
|
|
297
276
|
"type": 0,
|
|
@@ -300,15 +279,15 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
300
279
|
}),
|
|
301
280
|
emptyClassName: styles.emptyQuestion,
|
|
302
281
|
isEmpty: !hasQuestion
|
|
303
|
-
}, hasQuestion ? /*#__PURE__*/
|
|
282
|
+
}, hasQuestion ? /*#__PURE__*/React.createElement(components.Transitions, {
|
|
304
283
|
transitions: transitions,
|
|
305
284
|
playing: transitionPlaying,
|
|
306
285
|
disabled: transitionDisabled
|
|
307
|
-
}, /*#__PURE__*/
|
|
286
|
+
}, /*#__PURE__*/React.createElement(Heading, Object.assign({}, question, {
|
|
308
287
|
className: styles.question
|
|
309
288
|
}))) : null)];
|
|
310
289
|
if (isSplitted || !isPlaceholder && hasFooter && isMiddleLayout) {
|
|
311
|
-
items.push( /*#__PURE__*/
|
|
290
|
+
items.push( /*#__PURE__*/React.createElement(Layout.Spacer, {
|
|
312
291
|
key: "spacer"
|
|
313
292
|
}));
|
|
314
293
|
}
|
|
@@ -320,12 +299,12 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
320
299
|
resultsTextColor = _ref11$textColor === void 0 ? null : _ref11$textColor,
|
|
321
300
|
_ref11$percentageText = _ref11.percentageTextStyle,
|
|
322
301
|
resultsPercentageTextStyle = _ref11$percentageText === void 0 ? null : _ref11$percentageText;
|
|
323
|
-
items.push( /*#__PURE__*/
|
|
302
|
+
items.push( /*#__PURE__*/React.createElement("div", {
|
|
324
303
|
key: "answers",
|
|
325
304
|
className: styles.answers
|
|
326
|
-
}, answers !== null || isPlaceholder ? /*#__PURE__*/
|
|
305
|
+
}, answers !== null || isPlaceholder ? /*#__PURE__*/React.createElement("div", {
|
|
327
306
|
className: styles.items
|
|
328
|
-
}, (isPlaceholder ?
|
|
307
|
+
}, (isPlaceholder ? _toConsumableArray(new Array(3)) : answers).map(function (answer, answerIndex) {
|
|
329
308
|
var hasAnswer = answer !== null;
|
|
330
309
|
var _ref12 = answer || {},
|
|
331
310
|
_ref12$label = _ref12.label,
|
|
@@ -356,22 +335,22 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
356
335
|
labelColor = _ref17$color === void 0 ? null : _ref17$color;
|
|
357
336
|
var hasAnswerLabel = utils.isTextFilled(label);
|
|
358
337
|
var userAnswer = userAnswerIndex === answerIndex;
|
|
359
|
-
var buttonStyles =
|
|
338
|
+
var buttonStyles = _objectSpread(_objectSpread(_objectSpread({}, buttonsStyle), answerButtonStyle), answered ? {
|
|
360
339
|
textAlign: 'left'
|
|
361
340
|
} : null);
|
|
362
341
|
var _ref18 = buttonStyles || {},
|
|
363
342
|
_ref18$borderRadius = _ref18.borderRadius,
|
|
364
343
|
answerResultBorderRadius = _ref18$borderRadius === void 0 ? null : _ref18$borderRadius;
|
|
365
|
-
var finalBarBorderRadius = answerResultBorderRadius !== null &&
|
|
366
|
-
return /*#__PURE__*/
|
|
344
|
+
var finalBarBorderRadius = answerResultBorderRadius !== null && isNumber(answerResultBorderRadius) && answerResultBorderRadius > 2 ? answerResultBorderRadius - 2 : answerResultBorderRadius;
|
|
345
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
367
346
|
key: "answer-".concat(answerIndex),
|
|
368
|
-
className:
|
|
369
|
-
}, /*#__PURE__*/
|
|
347
|
+
className: classNames([styles.item, _defineProperty({}, styles.userAnswer, userAnswer)])
|
|
348
|
+
}, /*#__PURE__*/React.createElement(components.ScreenElement, {
|
|
370
349
|
placeholder: "surveyAnswer",
|
|
371
350
|
placeholderProps: {
|
|
372
351
|
className: styles.placeholderAnswer
|
|
373
352
|
},
|
|
374
|
-
emptyLabel: /*#__PURE__*/
|
|
353
|
+
emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
|
|
375
354
|
id: "+Ok+7S",
|
|
376
355
|
defaultMessage: [{
|
|
377
356
|
"type": 0,
|
|
@@ -380,15 +359,15 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
380
359
|
}),
|
|
381
360
|
emptyClassName: styles.emptyAnswer,
|
|
382
361
|
isEmpty: !hasAnswerLabel
|
|
383
|
-
}, hasAnswer ? /*#__PURE__*/
|
|
362
|
+
}, hasAnswer ? /*#__PURE__*/React.createElement("div", {
|
|
384
363
|
className: styles.itemContent
|
|
385
|
-
}, /*#__PURE__*/
|
|
364
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
386
365
|
className: styles.itemInner,
|
|
387
366
|
style: {
|
|
388
367
|
borderRadius: answerResultBorderRadius,
|
|
389
368
|
transitionDuration: finalTransitionDuration
|
|
390
369
|
}
|
|
391
|
-
}, /*#__PURE__*/
|
|
370
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
392
371
|
className: styles.button,
|
|
393
372
|
onPointerUp: function onPointerUp(e) {
|
|
394
373
|
if (e.pointerType !== 'mouse' || e.button === 0) {
|
|
@@ -398,28 +377,28 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
398
377
|
disabled: isPreview || userAnswerIndex !== null,
|
|
399
378
|
focusable: current && isView,
|
|
400
379
|
buttonStyle: buttonStyles,
|
|
401
|
-
textStyle:
|
|
402
|
-
}, /*#__PURE__*/
|
|
380
|
+
textStyle: _objectSpread(_objectSpread(_objectSpread({}, textStyle), buttonsTextStyle), answerButtonTextStyle)
|
|
381
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
403
382
|
className: styles.itemLabel
|
|
404
|
-
}, /*#__PURE__*/
|
|
405
|
-
textStyle:
|
|
383
|
+
}, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
|
|
384
|
+
textStyle: _objectSpread(_objectSpread(_objectSpread({}, textStyle), buttonsTextStyle), answerButtonTextStyle),
|
|
406
385
|
inline: true,
|
|
407
386
|
className: styles.itemText
|
|
408
|
-
})), !withoutPercentage ? /*#__PURE__*/
|
|
387
|
+
})), !withoutPercentage ? /*#__PURE__*/React.createElement("div", {
|
|
409
388
|
className: styles.resultLabel,
|
|
410
|
-
style:
|
|
389
|
+
style: _objectSpread(_objectSpread({}, utils.getStyleFromColor(answered ? answerResultTextColor || resultsTextColor || answerResultBarColor || resultsBarColor || labelColor : null, 'color')), answered ? {
|
|
411
390
|
opacity: 1
|
|
412
391
|
} : {
|
|
413
392
|
opacity: 0
|
|
414
393
|
})
|
|
415
|
-
}, /*#__PURE__*/
|
|
416
|
-
textStyle:
|
|
394
|
+
}, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
|
|
395
|
+
textStyle: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, textStyle), buttonsTextStyle), answerButtonTextStyle), resultsTextColor), resultsPercentageTextStyle), answerResultTextColor), answerResultPercentageTextStyle),
|
|
417
396
|
inline: true,
|
|
418
397
|
className: styles.resultText,
|
|
419
398
|
body: "".concat(percent, "%")
|
|
420
|
-
}))) : null, !withoutBar ? /*#__PURE__*/
|
|
399
|
+
}))) : null, !withoutBar ? /*#__PURE__*/React.createElement("div", {
|
|
421
400
|
className: styles.resultBar,
|
|
422
|
-
style:
|
|
401
|
+
style: _objectSpread(_objectSpread({
|
|
423
402
|
borderRadius: finalBarBorderRadius,
|
|
424
403
|
transitionDuration: finalTransitionDuration,
|
|
425
404
|
width: percent !== null ? "".concat(percent, "%") : '0%'
|
|
@@ -430,20 +409,20 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
430
409
|
})
|
|
431
410
|
}) : null)))) : null));
|
|
432
411
|
})) : null));
|
|
433
|
-
return /*#__PURE__*/
|
|
434
|
-
className:
|
|
435
|
-
}, /*#__PURE__*/
|
|
412
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
413
|
+
className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.answered, answered), styles.withPercentage, !withoutPercentage), styles.isPlaceholder, isPlaceholder)])
|
|
414
|
+
}, /*#__PURE__*/React.createElement(Container, {
|
|
436
415
|
width: width,
|
|
437
416
|
height: height,
|
|
438
417
|
className: styles.content
|
|
439
|
-
}, /*#__PURE__*/
|
|
418
|
+
}, /*#__PURE__*/React.createElement(Scroll, {
|
|
440
419
|
verticalAlign: verticalAlign,
|
|
441
420
|
disabled: scrollingDisabled,
|
|
442
421
|
onScrolledBottom: onScrolledBottom,
|
|
443
422
|
onScrolledNotBottom: onScrolledNotBottom,
|
|
444
423
|
onScrollHeightChange: onScrollHeightChange
|
|
445
|
-
}, !isPlaceholder && hasHeader ? /*#__PURE__*/
|
|
446
|
-
className:
|
|
424
|
+
}, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
|
|
425
|
+
className: classNames([styles.header, _defineProperty({}, styles.disabled, scrolledBottom && !scrollingDisabled && hasScroll)]),
|
|
447
426
|
ref: headerRef,
|
|
448
427
|
style: {
|
|
449
428
|
paddingTop: spacing / 2,
|
|
@@ -452,7 +431,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
452
431
|
paddingBottom: spacing,
|
|
453
432
|
transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
|
|
454
433
|
}
|
|
455
|
-
}, /*#__PURE__*/
|
|
434
|
+
}, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(Layout, {
|
|
456
435
|
className: styles.layout,
|
|
457
436
|
verticalAlign: verticalAlign,
|
|
458
437
|
style: !isPlaceholder ? {
|
|
@@ -460,9 +439,9 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
460
439
|
paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
|
|
461
440
|
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight + spacing)
|
|
462
441
|
} : null
|
|
463
|
-
}, items)), !isPlaceholder && hasFooter ? /*#__PURE__*/
|
|
442
|
+
}, items)), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
|
|
464
443
|
ref: footerRef,
|
|
465
|
-
className:
|
|
444
|
+
className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom)]),
|
|
466
445
|
style: {
|
|
467
446
|
transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
|
|
468
447
|
paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
|
|
@@ -470,7 +449,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
470
449
|
paddingTop: spacing / 2,
|
|
471
450
|
paddingBottom: spacing / 2
|
|
472
451
|
}
|
|
473
|
-
}, /*#__PURE__*/
|
|
452
|
+
}, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
|
|
474
453
|
background: background,
|
|
475
454
|
width: width,
|
|
476
455
|
height: height,
|
|
@@ -667,4 +646,4 @@ var definition = {
|
|
|
667
646
|
};
|
|
668
647
|
|
|
669
648
|
exports.SurveyScreen = SurveyScreen;
|
|
670
|
-
exports
|
|
649
|
+
exports.default = definition;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-survey",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.429",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [
|
|
@@ -32,6 +32,14 @@
|
|
|
32
32
|
"license": "ISC",
|
|
33
33
|
"main": "lib/index.js",
|
|
34
34
|
"module": "es/index.js",
|
|
35
|
+
"style": "assets/css/styles.css",
|
|
36
|
+
"exports": {
|
|
37
|
+
".": {
|
|
38
|
+
"require": "./lib/index.js",
|
|
39
|
+
"import": "./es/index.js"
|
|
40
|
+
},
|
|
41
|
+
"./assets/css/*.css": "./assets/css/*.css"
|
|
42
|
+
},
|
|
35
43
|
"files": [
|
|
36
44
|
"lib",
|
|
37
45
|
"es",
|
|
@@ -50,18 +58,18 @@
|
|
|
50
58
|
},
|
|
51
59
|
"dependencies": {
|
|
52
60
|
"@babel/runtime": "^7.13.10",
|
|
53
|
-
"@micromag/core": "^0.3.
|
|
54
|
-
"@micromag/data": "^0.3.
|
|
55
|
-
"@micromag/element-background": "^0.3.
|
|
56
|
-
"@micromag/element-button": "^0.3.
|
|
57
|
-
"@micromag/element-container": "^0.3.
|
|
58
|
-
"@micromag/element-footer": "^0.3.
|
|
59
|
-
"@micromag/element-header": "^0.3.
|
|
60
|
-
"@micromag/element-heading": "^0.3.
|
|
61
|
-
"@micromag/element-layout": "^0.3.
|
|
62
|
-
"@micromag/element-scroll": "^0.3.
|
|
63
|
-
"@micromag/element-text": "^0.3.
|
|
64
|
-
"@micromag/transforms": "^0.3.
|
|
61
|
+
"@micromag/core": "^0.3.429",
|
|
62
|
+
"@micromag/data": "^0.3.429",
|
|
63
|
+
"@micromag/element-background": "^0.3.429",
|
|
64
|
+
"@micromag/element-button": "^0.3.429",
|
|
65
|
+
"@micromag/element-container": "^0.3.429",
|
|
66
|
+
"@micromag/element-footer": "^0.3.429",
|
|
67
|
+
"@micromag/element-header": "^0.3.429",
|
|
68
|
+
"@micromag/element-heading": "^0.3.429",
|
|
69
|
+
"@micromag/element-layout": "^0.3.429",
|
|
70
|
+
"@micromag/element-scroll": "^0.3.429",
|
|
71
|
+
"@micromag/element-text": "^0.3.429",
|
|
72
|
+
"@micromag/transforms": "^0.3.429",
|
|
65
73
|
"classnames": "^2.2.6",
|
|
66
74
|
"lodash": "^4.17.21",
|
|
67
75
|
"prop-types": "^15.7.2",
|
|
@@ -72,5 +80,5 @@
|
|
|
72
80
|
"access": "public",
|
|
73
81
|
"registry": "https://registry.npmjs.org/"
|
|
74
82
|
},
|
|
75
|
-
"gitHead": "
|
|
83
|
+
"gitHead": "f15e72b88ecfda4c54b87626513149b58572c52b"
|
|
76
84
|
}
|