@micromag/screen-survey 0.3.349 → 0.3.356
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 +73 -38
- package/lib/index.js +74 -38
- package/package.json +14 -13
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-
|
|
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;-o-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;-o-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{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.micromag-screen-survey-container .micromag-screen-survey-resultBar{background-color:hsla(0,0%,100%,.2);height:100%;left:0;position:absolute;top:0}.micromag-screen-survey-container .micromag-screen-survey-resultLabel{color:#fff;padding:0 8px;position:absolute;right:0;text-align:right;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:4em;z-index:1}.micromag-screen-survey-container .micromag-screen-survey-itemInner{width:100%}.micromag-screen-survey-container .micromag-screen-survey-button{display:-ms-flexbox;display:flex;overflow:hidden;padding:10px;position:relative;-webkit-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out;transition:opacity .5s ease-out;width:100%}.micromag-screen-survey-container .micromag-screen-survey-button:disabled{opacity:1;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-itemLabel{width:100%}.micromag-screen-survey-container .micromag-screen-survey-itemLabel,.micromag-screen-survey-container .micromag-screen-survey-itemText{display:inline-block;-webkit-transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;-o-transition:margin-left .3s ease-out,transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,-webkit-transform .3s ease-out}.micromag-screen-survey-container .micromag-screen-survey-itemText{position:relative;z-index:1}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{margin:0 auto;width:100%}.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{height:75px}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer{height:50px}.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-button,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-result,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-resultLabel{opacity:1!important}.micromag-screen-survey-container.micromag-screen-survey-answered{line-height:1}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContainer{padding-left:15px;padding-right:50px}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContent{opacity:1;width:100%}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button{background-color:transparent;border-color:transparent}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-result,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultLabel{opacity:.6}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-itemLabel{margin-left:0;margin-right:0;text-align:left}.micromag-screen-survey-container.micromag-screen-survey-answered.micromag-screen-survey-withPercentage .micromag-screen-survey-itemText{-webkit-transform:translate(-2em);-ms-transform:translate(-2em);transform:translate(-2em)}.micromag-screen-survey-container.micromag-screen-survey-withPercentage .micromag-screen-survey-itemLabel{margin-left:2em;margin-right:2em}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-layout{padding:10px}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-item{padding:1px 0}
|
package/es/index.js
CHANGED
|
@@ -11,18 +11,19 @@ import { PropTypes as PropTypes$1 } from '@micromag/core';
|
|
|
11
11
|
import { ScreenElement, Transitions } from '@micromag/core/components';
|
|
12
12
|
import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
|
|
13
13
|
import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
|
|
14
|
-
import { isTextFilled, getLargestRemainderRound, getStyleFromColor } from '@micromag/core/utils';
|
|
14
|
+
import { isTextFilled, getLargestRemainderRound, isHeaderFilled, isFooterFilled, getFooterProps, getStyleFromColor } from '@micromag/core/utils';
|
|
15
15
|
import { useQuizCreate, useQuiz } from '@micromag/data';
|
|
16
16
|
import Background from '@micromag/element-background';
|
|
17
17
|
import Button from '@micromag/element-button';
|
|
18
|
-
import CallToAction from '@micromag/element-call-to-action';
|
|
19
18
|
import Container from '@micromag/element-container';
|
|
19
|
+
import Footer from '@micromag/element-footer';
|
|
20
|
+
import Header from '@micromag/element-header';
|
|
20
21
|
import Heading from '@micromag/element-heading';
|
|
21
22
|
import Layout, { Spacer } from '@micromag/element-layout';
|
|
22
23
|
import Scroll from '@micromag/element-scroll';
|
|
23
24
|
import Text from '@micromag/element-text';
|
|
24
25
|
|
|
25
|
-
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","
|
|
26
|
+
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"};
|
|
26
27
|
|
|
27
28
|
var propTypes = {
|
|
28
29
|
id: PropTypes.string,
|
|
@@ -37,8 +38,9 @@ var propTypes = {
|
|
|
37
38
|
percentageTextStyle: PropTypes$1.textStyle
|
|
38
39
|
}),
|
|
39
40
|
spacing: PropTypes.number,
|
|
41
|
+
header: PropTypes$1.header,
|
|
42
|
+
footer: PropTypes$1.footer,
|
|
40
43
|
background: PropTypes$1.backgroundElement,
|
|
41
|
-
callToAction: PropTypes$1.callToAction,
|
|
42
44
|
withoutPercentage: PropTypes.bool,
|
|
43
45
|
withoutBar: PropTypes.bool,
|
|
44
46
|
current: PropTypes.bool,
|
|
@@ -58,8 +60,9 @@ var defaultProps = {
|
|
|
58
60
|
buttonsTextStyle: null,
|
|
59
61
|
resultsStyle: null,
|
|
60
62
|
spacing: 20,
|
|
63
|
+
header: null,
|
|
64
|
+
footer: null,
|
|
61
65
|
background: null,
|
|
62
|
-
callToAction: null,
|
|
63
66
|
withoutPercentage: false,
|
|
64
67
|
withoutBar: false,
|
|
65
68
|
current: true,
|
|
@@ -80,8 +83,9 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
80
83
|
buttonsTextStyle = _ref.buttonsTextStyle,
|
|
81
84
|
resultsStyle = _ref.resultsStyle,
|
|
82
85
|
spacing = _ref.spacing,
|
|
86
|
+
header = _ref.header,
|
|
87
|
+
footer = _ref.footer,
|
|
83
88
|
background = _ref.background,
|
|
84
|
-
callToAction = _ref.callToAction,
|
|
85
89
|
withoutPercentage = _ref.withoutPercentage,
|
|
86
90
|
withoutBar = _ref.withoutBar,
|
|
87
91
|
current = _ref.current,
|
|
@@ -218,22 +222,29 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
218
222
|
setUserAnswerIndex(null);
|
|
219
223
|
}
|
|
220
224
|
}, [isEdit, current, userAnswerIndex, setUserAnswerIndex]);
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
var
|
|
224
|
-
|
|
225
|
-
|
|
225
|
+
var hasHeader = isHeaderFilled(header);
|
|
226
|
+
var hasFooter = isFooterFilled(footer);
|
|
227
|
+
var footerProps = getFooterProps(footer, {
|
|
228
|
+
isView: isView,
|
|
229
|
+
current: current,
|
|
230
|
+
openWebView: openWebView,
|
|
231
|
+
isPreview: isPreview
|
|
232
|
+
});
|
|
226
233
|
var _useDimensionObserver = useDimensionObserver(),
|
|
227
|
-
|
|
234
|
+
headerRef = _useDimensionObserver.ref,
|
|
228
235
|
_useDimensionObserver2 = _useDimensionObserver.height,
|
|
229
|
-
|
|
236
|
+
headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
|
|
237
|
+
var _useDimensionObserver3 = useDimensionObserver(),
|
|
238
|
+
footerRef = _useDimensionObserver3.ref,
|
|
239
|
+
_useDimensionObserver4 = _useDimensionObserver3.height,
|
|
240
|
+
footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
|
|
230
241
|
var scrollingDisabled = !isEdit && transitionDisabled || !current;
|
|
231
242
|
var _useState3 = useState(false),
|
|
232
243
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
233
244
|
scrolledBottom = _useState4[0],
|
|
234
245
|
setScrolledBottom = _useState4[1];
|
|
235
|
-
var onScrolledBottom = useCallback(function (
|
|
236
|
-
var initial =
|
|
246
|
+
var onScrolledBottom = useCallback(function (_ref9) {
|
|
247
|
+
var initial = _ref9.initial;
|
|
237
248
|
if (initial) {
|
|
238
249
|
trackScreenEvent('scroll', 'Screen');
|
|
239
250
|
}
|
|
@@ -242,6 +253,15 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
242
253
|
var onScrolledNotBottom = useCallback(function () {
|
|
243
254
|
setScrolledBottom(false);
|
|
244
255
|
}, [setScrolledBottom]);
|
|
256
|
+
var _useState5 = useState(false),
|
|
257
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
258
|
+
hasScroll = _useState6[0],
|
|
259
|
+
setHasScroll = _useState6[1];
|
|
260
|
+
var onScrollHeightChange = useCallback(function (_ref10) {
|
|
261
|
+
var _ref10$canScroll = _ref10.canScroll,
|
|
262
|
+
canScroll = _ref10$canScroll === void 0 ? false : _ref10$canScroll;
|
|
263
|
+
setHasScroll(canScroll);
|
|
264
|
+
}, [setHasScroll]);
|
|
245
265
|
|
|
246
266
|
// Question
|
|
247
267
|
var items = [/*#__PURE__*/React.createElement(ScreenElement, {
|
|
@@ -263,7 +283,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
263
283
|
}, /*#__PURE__*/React.createElement(Heading, Object.assign({}, question, {
|
|
264
284
|
className: styles.question
|
|
265
285
|
}))) : null)];
|
|
266
|
-
if (isSplitted || !isPlaceholder &&
|
|
286
|
+
if (isSplitted || !isPlaceholder && hasFooter && isMiddleLayout) {
|
|
267
287
|
items.push( /*#__PURE__*/React.createElement(Spacer, {
|
|
268
288
|
key: "spacer"
|
|
269
289
|
}));
|
|
@@ -396,18 +416,29 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
396
416
|
verticalAlign: verticalAlign,
|
|
397
417
|
disabled: scrollingDisabled,
|
|
398
418
|
onScrolledBottom: onScrolledBottom,
|
|
399
|
-
onScrolledNotBottom: onScrolledNotBottom
|
|
400
|
-
|
|
419
|
+
onScrolledNotBottom: onScrolledNotBottom,
|
|
420
|
+
onScrollHeightChange: onScrollHeightChange
|
|
421
|
+
}, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
|
|
422
|
+
className: classNames([styles.header, _defineProperty({}, styles.disabled, scrolledBottom && !scrollingDisabled && hasScroll)]),
|
|
423
|
+
ref: headerRef,
|
|
424
|
+
style: {
|
|
425
|
+
paddingTop: spacing,
|
|
426
|
+
paddingLeft: spacing,
|
|
427
|
+
paddingRight: spacing,
|
|
428
|
+
paddingBottom: spacing,
|
|
429
|
+
transform: current && !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
|
|
430
|
+
}
|
|
431
|
+
}, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(Layout, {
|
|
401
432
|
className: styles.layout,
|
|
402
433
|
verticalAlign: verticalAlign,
|
|
403
434
|
style: !isPlaceholder ? {
|
|
404
435
|
padding: spacing,
|
|
405
|
-
paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
|
|
406
|
-
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (
|
|
436
|
+
paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
|
|
437
|
+
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight + spacing)
|
|
407
438
|
} : null
|
|
408
|
-
}, items)), !isPlaceholder &&
|
|
409
|
-
ref:
|
|
410
|
-
className: classNames([styles.
|
|
439
|
+
}, items)), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
|
|
440
|
+
ref: footerRef,
|
|
441
|
+
className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom)]),
|
|
411
442
|
style: {
|
|
412
443
|
transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
|
|
413
444
|
paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
|
|
@@ -415,11 +446,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
415
446
|
paddingTop: spacing / 2,
|
|
416
447
|
paddingBottom: spacing / 2
|
|
417
448
|
}
|
|
418
|
-
}, /*#__PURE__*/React.createElement(
|
|
419
|
-
animationDisabled: isPreview,
|
|
420
|
-
focusable: current && isView,
|
|
421
|
-
openWebView: openWebView
|
|
422
|
-
}))) : null), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
|
|
449
|
+
}, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
|
|
423
450
|
background: background,
|
|
424
451
|
width: width,
|
|
425
452
|
height: height,
|
|
@@ -577,17 +604,25 @@ var definition = {
|
|
|
577
604
|
}]
|
|
578
605
|
})
|
|
579
606
|
}, {
|
|
580
|
-
name: '
|
|
581
|
-
type: '
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
607
|
+
name: 'header',
|
|
608
|
+
type: 'header',
|
|
609
|
+
label: defineMessage({
|
|
610
|
+
id: "rhuDxI",
|
|
611
|
+
defaultMessage: [{
|
|
612
|
+
"type": 0,
|
|
613
|
+
"value": "Header"
|
|
614
|
+
}]
|
|
615
|
+
})
|
|
588
616
|
}, {
|
|
589
|
-
name: '
|
|
590
|
-
type: '
|
|
617
|
+
name: 'footer',
|
|
618
|
+
type: 'footer',
|
|
619
|
+
label: defineMessage({
|
|
620
|
+
id: "g4nybp",
|
|
621
|
+
defaultMessage: [{
|
|
622
|
+
"type": 0,
|
|
623
|
+
"value": "Footer"
|
|
624
|
+
}]
|
|
625
|
+
})
|
|
591
626
|
}]
|
|
592
627
|
};
|
|
593
628
|
|
package/lib/index.js
CHANGED
|
@@ -19,8 +19,9 @@ var utils = require('@micromag/core/utils');
|
|
|
19
19
|
var data = require('@micromag/data');
|
|
20
20
|
var Background = require('@micromag/element-background');
|
|
21
21
|
var Button = require('@micromag/element-button');
|
|
22
|
-
var CallToAction = require('@micromag/element-call-to-action');
|
|
23
22
|
var Container = require('@micromag/element-container');
|
|
23
|
+
var Footer = require('@micromag/element-footer');
|
|
24
|
+
var Header = require('@micromag/element-header');
|
|
24
25
|
var Heading = require('@micromag/element-heading');
|
|
25
26
|
var Layout = require('@micromag/element-layout');
|
|
26
27
|
var Scroll = require('@micromag/element-scroll');
|
|
@@ -38,14 +39,15 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
|
38
39
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
39
40
|
var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
|
|
40
41
|
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
|
|
41
|
-
var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
|
|
42
42
|
var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
|
|
43
|
+
var Footer__default = /*#__PURE__*/_interopDefaultLegacy(Footer);
|
|
44
|
+
var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
|
|
43
45
|
var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
|
|
44
46
|
var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
|
|
45
47
|
var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
|
|
46
48
|
var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
|
|
47
49
|
|
|
48
|
-
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","
|
|
50
|
+
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"};
|
|
49
51
|
|
|
50
52
|
var propTypes = {
|
|
51
53
|
id: PropTypes__default["default"].string,
|
|
@@ -60,8 +62,9 @@ var propTypes = {
|
|
|
60
62
|
percentageTextStyle: core.PropTypes.textStyle
|
|
61
63
|
}),
|
|
62
64
|
spacing: PropTypes__default["default"].number,
|
|
65
|
+
header: core.PropTypes.header,
|
|
66
|
+
footer: core.PropTypes.footer,
|
|
63
67
|
background: core.PropTypes.backgroundElement,
|
|
64
|
-
callToAction: core.PropTypes.callToAction,
|
|
65
68
|
withoutPercentage: PropTypes__default["default"].bool,
|
|
66
69
|
withoutBar: PropTypes__default["default"].bool,
|
|
67
70
|
current: PropTypes__default["default"].bool,
|
|
@@ -81,8 +84,9 @@ var defaultProps = {
|
|
|
81
84
|
buttonsTextStyle: null,
|
|
82
85
|
resultsStyle: null,
|
|
83
86
|
spacing: 20,
|
|
87
|
+
header: null,
|
|
88
|
+
footer: null,
|
|
84
89
|
background: null,
|
|
85
|
-
callToAction: null,
|
|
86
90
|
withoutPercentage: false,
|
|
87
91
|
withoutBar: false,
|
|
88
92
|
current: true,
|
|
@@ -103,8 +107,9 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
103
107
|
buttonsTextStyle = _ref.buttonsTextStyle,
|
|
104
108
|
resultsStyle = _ref.resultsStyle,
|
|
105
109
|
spacing = _ref.spacing,
|
|
110
|
+
header = _ref.header,
|
|
111
|
+
footer = _ref.footer,
|
|
106
112
|
background = _ref.background,
|
|
107
|
-
callToAction = _ref.callToAction,
|
|
108
113
|
withoutPercentage = _ref.withoutPercentage,
|
|
109
114
|
withoutBar = _ref.withoutBar,
|
|
110
115
|
current = _ref.current,
|
|
@@ -241,22 +246,29 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
241
246
|
setUserAnswerIndex(null);
|
|
242
247
|
}
|
|
243
248
|
}, [isEdit, current, userAnswerIndex, setUserAnswerIndex]);
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
var
|
|
247
|
-
|
|
248
|
-
|
|
249
|
+
var hasHeader = utils.isHeaderFilled(header);
|
|
250
|
+
var hasFooter = utils.isFooterFilled(footer);
|
|
251
|
+
var footerProps = utils.getFooterProps(footer, {
|
|
252
|
+
isView: isView,
|
|
253
|
+
current: current,
|
|
254
|
+
openWebView: openWebView,
|
|
255
|
+
isPreview: isPreview
|
|
256
|
+
});
|
|
249
257
|
var _useDimensionObserver = hooks.useDimensionObserver(),
|
|
250
|
-
|
|
258
|
+
headerRef = _useDimensionObserver.ref,
|
|
251
259
|
_useDimensionObserver2 = _useDimensionObserver.height,
|
|
252
|
-
|
|
260
|
+
headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
|
|
261
|
+
var _useDimensionObserver3 = hooks.useDimensionObserver(),
|
|
262
|
+
footerRef = _useDimensionObserver3.ref,
|
|
263
|
+
_useDimensionObserver4 = _useDimensionObserver3.height,
|
|
264
|
+
footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
|
|
253
265
|
var scrollingDisabled = !isEdit && transitionDisabled || !current;
|
|
254
266
|
var _useState3 = React.useState(false),
|
|
255
267
|
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
256
268
|
scrolledBottom = _useState4[0],
|
|
257
269
|
setScrolledBottom = _useState4[1];
|
|
258
|
-
var onScrolledBottom = React.useCallback(function (
|
|
259
|
-
var initial =
|
|
270
|
+
var onScrolledBottom = React.useCallback(function (_ref9) {
|
|
271
|
+
var initial = _ref9.initial;
|
|
260
272
|
if (initial) {
|
|
261
273
|
trackScreenEvent('scroll', 'Screen');
|
|
262
274
|
}
|
|
@@ -265,6 +277,15 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
265
277
|
var onScrolledNotBottom = React.useCallback(function () {
|
|
266
278
|
setScrolledBottom(false);
|
|
267
279
|
}, [setScrolledBottom]);
|
|
280
|
+
var _useState5 = React.useState(false),
|
|
281
|
+
_useState6 = _slicedToArray__default["default"](_useState5, 2),
|
|
282
|
+
hasScroll = _useState6[0],
|
|
283
|
+
setHasScroll = _useState6[1];
|
|
284
|
+
var onScrollHeightChange = React.useCallback(function (_ref10) {
|
|
285
|
+
var _ref10$canScroll = _ref10.canScroll,
|
|
286
|
+
canScroll = _ref10$canScroll === void 0 ? false : _ref10$canScroll;
|
|
287
|
+
setHasScroll(canScroll);
|
|
288
|
+
}, [setHasScroll]);
|
|
268
289
|
|
|
269
290
|
// Question
|
|
270
291
|
var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
@@ -286,7 +307,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
286
307
|
}, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({}, question, {
|
|
287
308
|
className: styles.question
|
|
288
309
|
}))) : null)];
|
|
289
|
-
if (isSplitted || !isPlaceholder &&
|
|
310
|
+
if (isSplitted || !isPlaceholder && hasFooter && isMiddleLayout) {
|
|
290
311
|
items.push( /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
|
|
291
312
|
key: "spacer"
|
|
292
313
|
}));
|
|
@@ -419,18 +440,29 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
419
440
|
verticalAlign: verticalAlign,
|
|
420
441
|
disabled: scrollingDisabled,
|
|
421
442
|
onScrolledBottom: onScrolledBottom,
|
|
422
|
-
onScrolledNotBottom: onScrolledNotBottom
|
|
423
|
-
|
|
443
|
+
onScrolledNotBottom: onScrolledNotBottom,
|
|
444
|
+
onScrollHeightChange: onScrollHeightChange
|
|
445
|
+
}, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
446
|
+
className: classNames__default["default"]([styles.header, _defineProperty__default["default"]({}, styles.disabled, scrolledBottom && !scrollingDisabled && hasScroll)]),
|
|
447
|
+
ref: headerRef,
|
|
448
|
+
style: {
|
|
449
|
+
paddingTop: spacing,
|
|
450
|
+
paddingLeft: spacing,
|
|
451
|
+
paddingRight: spacing,
|
|
452
|
+
paddingBottom: spacing,
|
|
453
|
+
transform: current && !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
|
|
454
|
+
}
|
|
455
|
+
}, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
|
|
424
456
|
className: styles.layout,
|
|
425
457
|
verticalAlign: verticalAlign,
|
|
426
458
|
style: !isPlaceholder ? {
|
|
427
459
|
padding: spacing,
|
|
428
|
-
paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
|
|
429
|
-
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (
|
|
460
|
+
paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
|
|
461
|
+
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight + spacing)
|
|
430
462
|
} : null
|
|
431
|
-
}, items)), !isPlaceholder &&
|
|
432
|
-
ref:
|
|
433
|
-
className: classNames__default["default"]([styles.
|
|
463
|
+
}, items)), !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
464
|
+
ref: footerRef,
|
|
465
|
+
className: classNames__default["default"]([styles.footer, _defineProperty__default["default"]({}, styles.disabled, !scrolledBottom)]),
|
|
434
466
|
style: {
|
|
435
467
|
transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
|
|
436
468
|
paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
|
|
@@ -438,11 +470,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
|
|
|
438
470
|
paddingTop: spacing / 2,
|
|
439
471
|
paddingBottom: spacing / 2
|
|
440
472
|
}
|
|
441
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
442
|
-
animationDisabled: isPreview,
|
|
443
|
-
focusable: current && isView,
|
|
444
|
-
openWebView: openWebView
|
|
445
|
-
}))) : null), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
|
|
473
|
+
}, /*#__PURE__*/React__default["default"].createElement(Footer__default["default"], footerProps)) : null), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
|
|
446
474
|
background: background,
|
|
447
475
|
width: width,
|
|
448
476
|
height: height,
|
|
@@ -600,17 +628,25 @@ var definition = {
|
|
|
600
628
|
}]
|
|
601
629
|
})
|
|
602
630
|
}, {
|
|
603
|
-
name: '
|
|
604
|
-
type: '
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
631
|
+
name: 'header',
|
|
632
|
+
type: 'header',
|
|
633
|
+
label: reactIntl.defineMessage({
|
|
634
|
+
id: "rhuDxI",
|
|
635
|
+
defaultMessage: [{
|
|
636
|
+
"type": 0,
|
|
637
|
+
"value": "Header"
|
|
638
|
+
}]
|
|
639
|
+
})
|
|
611
640
|
}, {
|
|
612
|
-
name: '
|
|
613
|
-
type: '
|
|
641
|
+
name: 'footer',
|
|
642
|
+
type: 'footer',
|
|
643
|
+
label: reactIntl.defineMessage({
|
|
644
|
+
id: "g4nybp",
|
|
645
|
+
defaultMessage: [{
|
|
646
|
+
"type": 0,
|
|
647
|
+
"value": "Footer"
|
|
648
|
+
}]
|
|
649
|
+
})
|
|
614
650
|
}]
|
|
615
651
|
};
|
|
616
652
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-survey",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.356",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -49,17 +49,18 @@
|
|
|
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-
|
|
57
|
-
"@micromag/element-
|
|
58
|
-
"@micromag/element-
|
|
59
|
-
"@micromag/element-
|
|
60
|
-
"@micromag/element-
|
|
61
|
-
"@micromag/element-
|
|
62
|
-
"@micromag/
|
|
52
|
+
"@micromag/core": "^0.3.354",
|
|
53
|
+
"@micromag/data": "^0.3.354",
|
|
54
|
+
"@micromag/element-background": "^0.3.354",
|
|
55
|
+
"@micromag/element-button": "^0.3.354",
|
|
56
|
+
"@micromag/element-container": "^0.3.354",
|
|
57
|
+
"@micromag/element-footer": "^0.3.354",
|
|
58
|
+
"@micromag/element-header": "^0.3.356",
|
|
59
|
+
"@micromag/element-heading": "^0.3.354",
|
|
60
|
+
"@micromag/element-layout": "^0.3.354",
|
|
61
|
+
"@micromag/element-scroll": "^0.3.354",
|
|
62
|
+
"@micromag/element-text": "^0.3.354",
|
|
63
|
+
"@micromag/transforms": "^0.3.354",
|
|
63
64
|
"classnames": "^2.2.6",
|
|
64
65
|
"lodash": "^4.17.21",
|
|
65
66
|
"prop-types": "^15.7.2",
|
|
@@ -69,5 +70,5 @@
|
|
|
69
70
|
"publishConfig": {
|
|
70
71
|
"access": "public"
|
|
71
72
|
},
|
|
72
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "683c410d9fc568658e5907fb0a8fa470cb04f6eb"
|
|
73
74
|
}
|