@micromag/screen-survey 0.3.86 → 0.3.90

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +60 -77
  3. package/lib/index.js +59 -76
  4. package/package.json +13 -13
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-survey-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-survey-disabled.micromag-screen-survey-container{overflow:hidden;pointer-events:none}.micromag-screen-survey-hidden.micromag-screen-survey-container{display:none;visibility:hidden}.micromag-screen-survey-placeholder.micromag-screen-survey-container .micromag-screen-survey-content{position:relative;padding:6px}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-survey-container .micromag-screen-survey-question{margin-bottom:20px}.micromag-screen-survey-container .micromag-screen-survey-answers,.micromag-screen-survey-container .micromag-screen-survey-items{position:relative}.micromag-screen-survey-container .micromag-screen-survey-item{padding:5px 0}.micromag-screen-survey-container .micromag-screen-survey-item:first-child .micromag-screen-survey-placeholderAnswer{width:80%}.micromag-screen-survey-container .micromag-screen-survey-item:last-child .micromag-screen-survey-placeholderAnswer{width:90%}.micromag-screen-survey-container .micromag-screen-survey-itemContent{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.micromag-screen-survey-container .micromag-screen-survey-resultContainer{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;padding:15px 0;-webkit-transition-property:padding;-o-transition-property:padding;transition-property:padding;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-survey-container .micromag-screen-survey-resultContent{width:0;height:1em;-webkit-transition-property:width opacity;-o-transition-property:width opacity;transition-property:width opacity;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease;opacity:0}.micromag-screen-survey-container .micromag-screen-survey-result{position:relative;height:100%;background-color:#fff}.micromag-screen-survey-container .micromag-screen-survey-resultLabel{position:absolute;top:50%;left:100%;margin-left:5px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);color:#fff}.micromag-screen-survey-container .micromag-screen-survey-itemInner{width:100%;-webkit-transition-property:width;-o-transition-property:width;transition-property:width;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-survey-container .micromag-screen-survey-button{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;width:100%;padding:0;-webkit-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out;transition:opacity .5s ease-out}.micromag-screen-survey-container .micromag-screen-survey-button:disabled{opacity:1;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-itemLabel{display:inline-block;padding:10px;-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-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{width:100%;margin:0 auto}.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{height:75px}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer{height:50px}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContainer{padding-right:50px;padding-left:15px}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContent{width:100%;opacity:1}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button{border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0)}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-result,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultLabel{opacity:.6}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-itemLabel{margin-left:0;-webkit-transform:translate(-10px);-ms-transform:translate(-10px);transform:translate(-10px);text-align:left}.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}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-layout{padding:10px}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-item{padding:1px 0}
1
+ .micromag-screen-survey-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-survey-disabled.micromag-screen-survey-container{overflow:hidden;pointer-events:none}.micromag-screen-survey-hidden.micromag-screen-survey-container{display:none;visibility:hidden}.micromag-screen-survey-placeholder.micromag-screen-survey-container .micromag-screen-survey-content{position:relative;padding:6px}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-survey-container .micromag-screen-survey-question{margin-bottom:20px}.micromag-screen-survey-container .micromag-screen-survey-answers,.micromag-screen-survey-container .micromag-screen-survey-items{position:relative}.micromag-screen-survey-container .micromag-screen-survey-item{padding:5px 0}.micromag-screen-survey-container .micromag-screen-survey-item:first-child .micromag-screen-survey-placeholderAnswer{width:80%}.micromag-screen-survey-container .micromag-screen-survey-item:last-child .micromag-screen-survey-placeholderAnswer{width:90%}.micromag-screen-survey-container .micromag-screen-survey-itemContent{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.micromag-screen-survey-container .micromag-screen-survey-resultBar{position:absolute;top:0;left:0;height:100%;background-color:hsla(0,0%,100%,.2)}.micromag-screen-survey-container .micromag-screen-survey-resultLabel{position:absolute;top:50%;right:0;width:4em;padding:0 5px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);color:#fff;text-align:right}.micromag-screen-survey-container .micromag-screen-survey-itemInner{width:100%}.micromag-screen-survey-container .micromag-screen-survey-button{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;width:100%;padding:0;-webkit-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out;transition:opacity .5s ease-out}.micromag-screen-survey-container .micromag-screen-survey-button:disabled{opacity:1;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-itemLabel{width:100%;padding:10px}.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-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{width:100%;margin:0 auto}.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{height:75px}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer{height:50px}.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-button,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-result,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-resultLabel{opacity:1!important}.micromag-screen-survey-container.micromag-screen-survey-answered{line-height:1}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContainer{padding-right:50px;padding-left:15px}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContent{width:100%;opacity:1}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button{border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0)}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-result,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultLabel{opacity:.6}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-itemLabel{margin-right:0;margin-left:0;text-align:left}.micromag-screen-survey-container.micromag-screen-survey-answered.micromag-screen-survey-withPercentage .micromag-screen-survey-itemText{-webkit-transform:translate(-2em);-ms-transform:translate(-2em);transform:translate(-2em)}.micromag-screen-survey-container.micromag-screen-survey-withPercentage .micromag-screen-survey-itemLabel{margin-right:2em;margin-left:2em}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-layout{padding:10px}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-item{padding:1px 0}
package/es/index.js CHANGED
@@ -5,7 +5,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
5
5
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
6
6
  import classNames from 'classnames';
7
7
  import PropTypes from 'prop-types';
8
- import React, { useState, useMemo, useCallback, useEffect, useRef } from 'react';
8
+ import React, { useState, useMemo, useCallback, useEffect } from 'react';
9
9
  import { PropTypes as PropTypes$1 } from '@micromag/core';
10
10
  import { ScreenElement, Transitions } from '@micromag/core/components';
11
11
  import { useScreenSize, useViewer, useScreenRenderContext } from '@micromag/core/contexts';
@@ -20,7 +20,7 @@ import Heading from '@micromag/element-heading';
20
20
  import Layout, { Spacer } from '@micromag/element-layout';
21
21
  import Text from '@micromag/element-text';
22
22
 
23
- var styles = {"container":"micromag-screen-survey-container","disabled":"micromag-screen-survey-disabled","hidden":"micromag-screen-survey-hidden","placeholder":"micromag-screen-survey-placeholder","content":"micromag-screen-survey-content","emptyAnswer":"micromag-screen-survey-emptyAnswer","emptyQuestion":"micromag-screen-survey-emptyQuestion","question":"micromag-screen-survey-question","answers":"micromag-screen-survey-answers","items":"micromag-screen-survey-items","item":"micromag-screen-survey-item","placeholderAnswer":"micromag-screen-survey-placeholderAnswer","itemContent":"micromag-screen-survey-itemContent","resultContainer":"micromag-screen-survey-resultContainer","resultContent":"micromag-screen-survey-resultContent","result":"micromag-screen-survey-result","resultLabel":"micromag-screen-survey-resultLabel","itemInner":"micromag-screen-survey-itemInner","button":"micromag-screen-survey-button","itemLabel":"micromag-screen-survey-itemLabel","answered":"micromag-screen-survey-answered","userAnswer":"micromag-screen-survey-userAnswer","isPlaceholder":"micromag-screen-survey-isPlaceholder","layout":"micromag-screen-survey-layout"};
23
+ var styles = {"container":"micromag-screen-survey-container","disabled":"micromag-screen-survey-disabled","hidden":"micromag-screen-survey-hidden","placeholder":"micromag-screen-survey-placeholder","content":"micromag-screen-survey-content","emptyAnswer":"micromag-screen-survey-emptyAnswer","emptyQuestion":"micromag-screen-survey-emptyQuestion","question":"micromag-screen-survey-question","answers":"micromag-screen-survey-answers","items":"micromag-screen-survey-items","item":"micromag-screen-survey-item","placeholderAnswer":"micromag-screen-survey-placeholderAnswer","itemContent":"micromag-screen-survey-itemContent","resultBar":"micromag-screen-survey-resultBar","resultLabel":"micromag-screen-survey-resultLabel","itemInner":"micromag-screen-survey-itemInner","button":"micromag-screen-survey-button","itemLabel":"micromag-screen-survey-itemLabel","itemText":"micromag-screen-survey-itemText","userAnswer":"micromag-screen-survey-userAnswer","result":"micromag-screen-survey-result","answered":"micromag-screen-survey-answered","resultContainer":"micromag-screen-survey-resultContainer","resultContent":"micromag-screen-survey-resultContent","withPercentage":"micromag-screen-survey-withPercentage","isPlaceholder":"micromag-screen-survey-isPlaceholder","layout":"micromag-screen-survey-layout"};
24
24
 
25
25
  var propTypes = {
26
26
  id: PropTypes.string,
@@ -35,14 +35,16 @@ var propTypes = {
35
35
  spacing: PropTypes.number,
36
36
  background: PropTypes$1.backgroundElement,
37
37
  callToAction: PropTypes$1.callToAction,
38
- withPercentLabels: PropTypes.bool,
39
- withoutResults: PropTypes.bool,
38
+ withoutPercentage: PropTypes.bool,
39
+ withoutBar: PropTypes.bool,
40
40
  current: PropTypes.bool,
41
41
  active: PropTypes.bool,
42
42
  transitions: PropTypes$1.transitions,
43
43
  transitionStagger: PropTypes.number,
44
44
  resultTransitionDuration: PropTypes.number,
45
45
  type: PropTypes.string,
46
+ enableInteraction: PropTypes.func,
47
+ disableInteraction: PropTypes.func,
46
48
  className: PropTypes.string
47
49
  };
48
50
  var defaultProps = {
@@ -55,14 +57,16 @@ var defaultProps = {
55
57
  spacing: 20,
56
58
  background: null,
57
59
  callToAction: null,
58
- withPercentLabels: true,
59
- withoutResults: false,
60
+ withoutPercentage: false,
61
+ withoutBar: false,
60
62
  current: true,
61
63
  active: true,
62
64
  transitions: null,
63
65
  transitionStagger: 100,
64
66
  resultTransitionDuration: 500,
65
67
  type: null,
68
+ enableInteraction: null,
69
+ disableInteraction: null,
66
70
  className: null
67
71
  };
68
72
 
@@ -78,14 +82,16 @@ var SurveyScreen = function SurveyScreen(_ref) {
78
82
  spacing = _ref.spacing,
79
83
  background = _ref.background,
80
84
  callToAction = _ref.callToAction,
81
- withPercentLabels = _ref.withPercentLabels,
82
- withoutResults = _ref.withoutResults,
85
+ withoutPercentage = _ref.withoutPercentage,
86
+ withoutBar = _ref.withoutBar,
83
87
  current = _ref.current,
84
88
  active = _ref.active,
85
89
  transitions = _ref.transitions,
86
90
  transitionStagger = _ref.transitionStagger,
87
91
  resultTransitionDuration = _ref.resultTransitionDuration,
88
92
  type = _ref.type,
93
+ enableInteraction = _ref.enableInteraction,
94
+ disableInteraction = _ref.disableInteraction,
89
95
  className = _ref.className;
90
96
  var screenId = id || 'screen-id';
91
97
  var trackScreenEvent = useTrackScreenEvent(type);
@@ -226,44 +232,10 @@ var SurveyScreen = function SurveyScreen(_ref) {
226
232
  items.push( /*#__PURE__*/React.createElement(Spacer, {
227
233
  key: "spacer"
228
234
  }));
229
- } // Answer
230
-
231
-
232
- var buttonsRefs = useRef([]);
233
- var labelsRefs = useRef([]);
234
-
235
- var _useState3 = useState(null),
236
- _useState4 = _slicedToArray(_useState3, 2),
237
- buttonMaxWidth = _useState4[0],
238
- setButtonMaxWidth = _useState4[1];
235
+ }
239
236
 
240
237
  var finalTransitionDuration = showInstantAnswer ? 0 : "".concat(resultTransitionDuration, "ms");
241
238
 
242
- var _useState5 = useState(false),
243
- _useState6 = _slicedToArray(_useState5, 2),
244
- ready = _useState6[0],
245
- setReady = _useState6[1];
246
-
247
- useEffect(function () {
248
- if (answers === null || isPlaceholder) {
249
- return;
250
- } // const maxWidth = answers.reduce((currentMaxWidth, answer, answerI) => {
251
- // const button = buttonsRefs.current[answerI] || null;
252
- // const label = labelsRefs.current[answerI] || null;
253
- // if (button !== null && label !== null) {
254
- // const borderWidth = button.offsetWidth - button.clientWidth;
255
- // const totalWidth = borderWidth + label.getBoundingClientRect().width + 20;
256
- // return Math.max(currentMaxWidth, totalWidth);
257
- // }
258
- // return currentMaxWidth;
259
- // }, 0);
260
- // setButtonMaxWidth(Math.min(width * 0.75, Math.max(width * 0.2, maxWidth)));
261
-
262
-
263
- setButtonMaxWidth(withoutResults ? '100%' : width * 0.75);
264
- setReady(true);
265
- }, [answers, width, height, setButtonMaxWidth, finalTransitionDuration, isPlaceholder, withoutResults]);
266
-
267
239
  var _ref6 = resultsStyle || {},
268
240
  _ref6$barColor = _ref6.barColor,
269
241
  resultsBarColor = _ref6$barColor === void 0 ? null : _ref6$barColor,
@@ -336,7 +308,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
336
308
  }, /*#__PURE__*/React.createElement("div", {
337
309
  className: styles.itemInner,
338
310
  style: {
339
- width: buttonMaxWidth,
311
+ // width: buttonMaxWidth,
340
312
  transitionDuration: finalTransitionDuration
341
313
  }
342
314
  }, /*#__PURE__*/React.createElement(Button, {
@@ -344,41 +316,40 @@ var SurveyScreen = function SurveyScreen(_ref) {
344
316
  onClick: function onClick() {
345
317
  return onAnswerClick(answerIndex);
346
318
  },
347
- refButton: function refButton(el) {
348
- buttonsRefs.current[answerIndex] = el;
349
- },
350
319
  disabled: isPreview || userAnswerIndex !== null,
351
320
  focusable: current && isView,
352
- buttonStyle: !answered ? _objectSpread(_objectSpread({}, getStyleFromBox(buttonsStyle)), getStyleFromBox(answerButtonStyle)) : null
321
+ buttonStyle: _objectSpread(_objectSpread(_objectSpread({}, getStyleFromBox(buttonsStyle)), getStyleFromBox(answerButtonStyle)), answered ? {
322
+ textAlign: 'left'
323
+ } : null)
353
324
  }, /*#__PURE__*/React.createElement("span", {
354
- className: styles.itemLabel,
355
- ref: function ref(el) {
356
- labelsRefs.current[answerIndex] = el;
357
- }
325
+ className: styles.itemLabel
358
326
  }, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
359
327
  textStyle: textStyle,
360
328
  inline: true,
361
329
  className: styles.itemText
362
- }))))), !withoutResults ? /*#__PURE__*/React.createElement("div", {
363
- className: styles.resultContainer,
364
- style: {
365
- transitionDuration: finalTransitionDuration
366
- }
367
- }, /*#__PURE__*/React.createElement("div", {
368
- className: styles.resultContent,
369
- style: {
370
- transitionDelay: finalTransitionDuration,
371
- transitionDuration: finalTransitionDuration
372
- }
373
- }, /*#__PURE__*/React.createElement("div", {
374
- className: styles.result,
375
- style: _objectSpread({
376
- width: percent !== null ? "".concat(percent, "%") : null
377
- }, getStyleFromColor(answered ? answerResultBarColor || resultsBarColor || labelColor : null, 'backgroundColor'))
378
- }, withPercentLabels ? /*#__PURE__*/React.createElement("div", {
330
+ })), !withoutPercentage ? /*#__PURE__*/React.createElement("div", {
379
331
  className: styles.resultLabel,
380
- style: _objectSpread({}, getStyleFromColor(answered ? answerResultTextColor || resultsTextColor || answerResultBarColor || resultsBarColor || labelColor : null, 'color'))
381
- }, "".concat(percent, "%")) : null))) : null)) : null));
332
+ style: _objectSpread(_objectSpread({}, getStyleFromColor(answered ? answerResultTextColor || resultsTextColor || answerResultBarColor || resultsBarColor || labelColor : null, 'color')), answered ? {
333
+ opacity: 1
334
+ } : {
335
+ opacity: 0
336
+ })
337
+ }, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
338
+ textStyle: textStyle,
339
+ inline: true,
340
+ className: styles.resultText,
341
+ body: "".concat(percent, "%")
342
+ }))) : null, !withoutBar ? /*#__PURE__*/React.createElement("div", {
343
+ className: styles.resultBar,
344
+ style: _objectSpread(_objectSpread({
345
+ transitionDuration: finalTransitionDuration,
346
+ width: percent !== null ? "".concat(percent, "%") : null
347
+ }, getStyleFromColor(answered ? answerResultBarColor || resultsBarColor || labelColor : null, 'backgroundColor')), answered ? {
348
+ opacity: 1
349
+ } : {
350
+ opacity: 0
351
+ })
352
+ }) : null))))) : null));
382
353
  })) : null)); // Call to Action
383
354
 
384
355
  if (!isPlaceholder && hasCallToAction) {
@@ -402,13 +373,14 @@ var SurveyScreen = function SurveyScreen(_ref) {
402
373
  screenSize: {
403
374
  width: width,
404
375
  height: height
405
- }
376
+ },
377
+ enableInteraction: enableInteraction,
378
+ disableInteraction: disableInteraction
406
379
  })));
407
380
  }
408
381
 
409
382
  return /*#__PURE__*/React.createElement("div", {
410
- className: classNames([styles.container, (_ref14 = {}, _defineProperty(_ref14, className, className !== null), _defineProperty(_ref14, styles.answered, answered), _defineProperty(_ref14, styles.isPlaceholder, isPlaceholder), _ref14)]),
411
- "data-screen-ready": ready
383
+ className: classNames([styles.container, (_ref14 = {}, _defineProperty(_ref14, className, className !== null), _defineProperty(_ref14, styles.answered, answered), _defineProperty(_ref14, styles.withPercentage, !withoutPercentage), _defineProperty(_ref14, styles.isPlaceholder, isPlaceholder), _ref14)])
412
384
  }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
413
385
  background: background,
414
386
  width: width,
@@ -495,14 +467,25 @@ var definition = {
495
467
  }]
496
468
  })
497
469
  }, {
498
- name: 'withoutResults',
470
+ name: 'withoutPercentage',
471
+ type: 'toggle',
472
+ defaultValue: false,
473
+ label: defineMessage({
474
+ id: "crLqJd",
475
+ defaultMessage: [{
476
+ "type": 0,
477
+ "value": "Without percentage"
478
+ }]
479
+ })
480
+ }, {
481
+ name: 'withoutBar',
499
482
  type: 'toggle',
500
483
  defaultValue: false,
501
484
  label: defineMessage({
502
- id: "W3aj7x",
485
+ id: "D7kxD3",
503
486
  defaultMessage: [{
504
487
  "type": 0,
505
- "value": "Without results"
488
+ "value": "Without bar"
506
489
  }]
507
490
  })
508
491
  }, {
package/lib/index.js CHANGED
@@ -41,7 +41,7 @@ var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
41
41
  var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
42
42
  var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
43
43
 
44
- var styles = {"container":"micromag-screen-survey-container","disabled":"micromag-screen-survey-disabled","hidden":"micromag-screen-survey-hidden","placeholder":"micromag-screen-survey-placeholder","content":"micromag-screen-survey-content","emptyAnswer":"micromag-screen-survey-emptyAnswer","emptyQuestion":"micromag-screen-survey-emptyQuestion","question":"micromag-screen-survey-question","answers":"micromag-screen-survey-answers","items":"micromag-screen-survey-items","item":"micromag-screen-survey-item","placeholderAnswer":"micromag-screen-survey-placeholderAnswer","itemContent":"micromag-screen-survey-itemContent","resultContainer":"micromag-screen-survey-resultContainer","resultContent":"micromag-screen-survey-resultContent","result":"micromag-screen-survey-result","resultLabel":"micromag-screen-survey-resultLabel","itemInner":"micromag-screen-survey-itemInner","button":"micromag-screen-survey-button","itemLabel":"micromag-screen-survey-itemLabel","answered":"micromag-screen-survey-answered","userAnswer":"micromag-screen-survey-userAnswer","isPlaceholder":"micromag-screen-survey-isPlaceholder","layout":"micromag-screen-survey-layout"};
44
+ var styles = {"container":"micromag-screen-survey-container","disabled":"micromag-screen-survey-disabled","hidden":"micromag-screen-survey-hidden","placeholder":"micromag-screen-survey-placeholder","content":"micromag-screen-survey-content","emptyAnswer":"micromag-screen-survey-emptyAnswer","emptyQuestion":"micromag-screen-survey-emptyQuestion","question":"micromag-screen-survey-question","answers":"micromag-screen-survey-answers","items":"micromag-screen-survey-items","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"};
45
45
 
46
46
  var propTypes = {
47
47
  id: PropTypes__default["default"].string,
@@ -56,14 +56,16 @@ var propTypes = {
56
56
  spacing: PropTypes__default["default"].number,
57
57
  background: core.PropTypes.backgroundElement,
58
58
  callToAction: core.PropTypes.callToAction,
59
- withPercentLabels: PropTypes__default["default"].bool,
60
- withoutResults: PropTypes__default["default"].bool,
59
+ withoutPercentage: PropTypes__default["default"].bool,
60
+ withoutBar: PropTypes__default["default"].bool,
61
61
  current: PropTypes__default["default"].bool,
62
62
  active: PropTypes__default["default"].bool,
63
63
  transitions: core.PropTypes.transitions,
64
64
  transitionStagger: PropTypes__default["default"].number,
65
65
  resultTransitionDuration: PropTypes__default["default"].number,
66
66
  type: PropTypes__default["default"].string,
67
+ enableInteraction: PropTypes__default["default"].func,
68
+ disableInteraction: PropTypes__default["default"].func,
67
69
  className: PropTypes__default["default"].string
68
70
  };
69
71
  var defaultProps = {
@@ -76,14 +78,16 @@ var defaultProps = {
76
78
  spacing: 20,
77
79
  background: null,
78
80
  callToAction: null,
79
- withPercentLabels: true,
80
- withoutResults: false,
81
+ withoutPercentage: false,
82
+ withoutBar: false,
81
83
  current: true,
82
84
  active: true,
83
85
  transitions: null,
84
86
  transitionStagger: 100,
85
87
  resultTransitionDuration: 500,
86
88
  type: null,
89
+ enableInteraction: null,
90
+ disableInteraction: null,
87
91
  className: null
88
92
  };
89
93
 
@@ -99,14 +103,16 @@ var SurveyScreen = function SurveyScreen(_ref) {
99
103
  spacing = _ref.spacing,
100
104
  background = _ref.background,
101
105
  callToAction = _ref.callToAction,
102
- withPercentLabels = _ref.withPercentLabels,
103
- withoutResults = _ref.withoutResults,
106
+ withoutPercentage = _ref.withoutPercentage,
107
+ withoutBar = _ref.withoutBar,
104
108
  current = _ref.current,
105
109
  active = _ref.active,
106
110
  transitions = _ref.transitions,
107
111
  transitionStagger = _ref.transitionStagger,
108
112
  resultTransitionDuration = _ref.resultTransitionDuration,
109
113
  type = _ref.type,
114
+ enableInteraction = _ref.enableInteraction,
115
+ disableInteraction = _ref.disableInteraction,
110
116
  className = _ref.className;
111
117
  var screenId = id || 'screen-id';
112
118
  var trackScreenEvent = hooks.useTrackScreenEvent(type);
@@ -247,44 +253,10 @@ var SurveyScreen = function SurveyScreen(_ref) {
247
253
  items.push( /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
248
254
  key: "spacer"
249
255
  }));
250
- } // Answer
251
-
252
-
253
- var buttonsRefs = React.useRef([]);
254
- var labelsRefs = React.useRef([]);
255
-
256
- var _useState3 = React.useState(null),
257
- _useState4 = _slicedToArray__default["default"](_useState3, 2),
258
- buttonMaxWidth = _useState4[0],
259
- setButtonMaxWidth = _useState4[1];
256
+ }
260
257
 
261
258
  var finalTransitionDuration = showInstantAnswer ? 0 : "".concat(resultTransitionDuration, "ms");
262
259
 
263
- var _useState5 = React.useState(false),
264
- _useState6 = _slicedToArray__default["default"](_useState5, 2),
265
- ready = _useState6[0],
266
- setReady = _useState6[1];
267
-
268
- React.useEffect(function () {
269
- if (answers === null || isPlaceholder) {
270
- return;
271
- } // const maxWidth = answers.reduce((currentMaxWidth, answer, answerI) => {
272
- // const button = buttonsRefs.current[answerI] || null;
273
- // const label = labelsRefs.current[answerI] || null;
274
- // if (button !== null && label !== null) {
275
- // const borderWidth = button.offsetWidth - button.clientWidth;
276
- // const totalWidth = borderWidth + label.getBoundingClientRect().width + 20;
277
- // return Math.max(currentMaxWidth, totalWidth);
278
- // }
279
- // return currentMaxWidth;
280
- // }, 0);
281
- // setButtonMaxWidth(Math.min(width * 0.75, Math.max(width * 0.2, maxWidth)));
282
-
283
-
284
- setButtonMaxWidth(withoutResults ? '100%' : width * 0.75);
285
- setReady(true);
286
- }, [answers, width, height, setButtonMaxWidth, finalTransitionDuration, isPlaceholder, withoutResults]);
287
-
288
260
  var _ref6 = resultsStyle || {},
289
261
  _ref6$barColor = _ref6.barColor,
290
262
  resultsBarColor = _ref6$barColor === void 0 ? null : _ref6$barColor,
@@ -357,7 +329,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
357
329
  }, /*#__PURE__*/React__default["default"].createElement("div", {
358
330
  className: styles.itemInner,
359
331
  style: {
360
- width: buttonMaxWidth,
332
+ // width: buttonMaxWidth,
361
333
  transitionDuration: finalTransitionDuration
362
334
  }
363
335
  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
@@ -365,41 +337,40 @@ var SurveyScreen = function SurveyScreen(_ref) {
365
337
  onClick: function onClick() {
366
338
  return onAnswerClick(answerIndex);
367
339
  },
368
- refButton: function refButton(el) {
369
- buttonsRefs.current[answerIndex] = el;
370
- },
371
340
  disabled: isPreview || userAnswerIndex !== null,
372
341
  focusable: current && isView,
373
- buttonStyle: !answered ? _objectSpread__default["default"](_objectSpread__default["default"]({}, utils.getStyleFromBox(buttonsStyle)), utils.getStyleFromBox(answerButtonStyle)) : null
342
+ buttonStyle: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, utils.getStyleFromBox(buttonsStyle)), utils.getStyleFromBox(answerButtonStyle)), answered ? {
343
+ textAlign: 'left'
344
+ } : null)
374
345
  }, /*#__PURE__*/React__default["default"].createElement("span", {
375
- className: styles.itemLabel,
376
- ref: function ref(el) {
377
- labelsRefs.current[answerIndex] = el;
378
- }
346
+ className: styles.itemLabel
379
347
  }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, label, {
380
348
  textStyle: textStyle,
381
349
  inline: true,
382
350
  className: styles.itemText
383
- }))))), !withoutResults ? /*#__PURE__*/React__default["default"].createElement("div", {
384
- className: styles.resultContainer,
385
- style: {
386
- transitionDuration: finalTransitionDuration
387
- }
388
- }, /*#__PURE__*/React__default["default"].createElement("div", {
389
- className: styles.resultContent,
390
- style: {
391
- transitionDelay: finalTransitionDuration,
392
- transitionDuration: finalTransitionDuration
393
- }
394
- }, /*#__PURE__*/React__default["default"].createElement("div", {
395
- className: styles.result,
396
- style: _objectSpread__default["default"]({
397
- width: percent !== null ? "".concat(percent, "%") : null
398
- }, utils.getStyleFromColor(answered ? answerResultBarColor || resultsBarColor || labelColor : null, 'backgroundColor'))
399
- }, withPercentLabels ? /*#__PURE__*/React__default["default"].createElement("div", {
351
+ })), !withoutPercentage ? /*#__PURE__*/React__default["default"].createElement("div", {
400
352
  className: styles.resultLabel,
401
- style: _objectSpread__default["default"]({}, utils.getStyleFromColor(answered ? answerResultTextColor || resultsTextColor || answerResultBarColor || resultsBarColor || labelColor : null, 'color'))
402
- }, "".concat(percent, "%")) : null))) : null)) : null));
353
+ style: _objectSpread__default["default"](_objectSpread__default["default"]({}, utils.getStyleFromColor(answered ? answerResultTextColor || resultsTextColor || answerResultBarColor || resultsBarColor || labelColor : null, 'color')), answered ? {
354
+ opacity: 1
355
+ } : {
356
+ opacity: 0
357
+ })
358
+ }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, label, {
359
+ textStyle: textStyle,
360
+ inline: true,
361
+ className: styles.resultText,
362
+ body: "".concat(percent, "%")
363
+ }))) : null, !withoutBar ? /*#__PURE__*/React__default["default"].createElement("div", {
364
+ className: styles.resultBar,
365
+ style: _objectSpread__default["default"](_objectSpread__default["default"]({
366
+ transitionDuration: finalTransitionDuration,
367
+ width: percent !== null ? "".concat(percent, "%") : null
368
+ }, utils.getStyleFromColor(answered ? answerResultBarColor || resultsBarColor || labelColor : null, 'backgroundColor')), answered ? {
369
+ opacity: 1
370
+ } : {
371
+ opacity: 0
372
+ })
373
+ }) : null))))) : null));
403
374
  })) : null)); // Call to Action
404
375
 
405
376
  if (!isPlaceholder && hasCallToAction) {
@@ -423,13 +394,14 @@ var SurveyScreen = function SurveyScreen(_ref) {
423
394
  screenSize: {
424
395
  width: width,
425
396
  height: height
426
- }
397
+ },
398
+ enableInteraction: enableInteraction,
399
+ disableInteraction: disableInteraction
427
400
  })));
428
401
  }
429
402
 
430
403
  return /*#__PURE__*/React__default["default"].createElement("div", {
431
- className: classNames__default["default"]([styles.container, (_ref14 = {}, _defineProperty__default["default"](_ref14, className, className !== null), _defineProperty__default["default"](_ref14, styles.answered, answered), _defineProperty__default["default"](_ref14, styles.isPlaceholder, isPlaceholder), _ref14)]),
432
- "data-screen-ready": ready
404
+ className: classNames__default["default"]([styles.container, (_ref14 = {}, _defineProperty__default["default"](_ref14, className, className !== null), _defineProperty__default["default"](_ref14, styles.answered, answered), _defineProperty__default["default"](_ref14, styles.withPercentage, !withoutPercentage), _defineProperty__default["default"](_ref14, styles.isPlaceholder, isPlaceholder), _ref14)])
433
405
  }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
434
406
  background: background,
435
407
  width: width,
@@ -516,14 +488,25 @@ var definition = {
516
488
  }]
517
489
  })
518
490
  }, {
519
- name: 'withoutResults',
491
+ name: 'withoutPercentage',
492
+ type: 'toggle',
493
+ defaultValue: false,
494
+ label: reactIntl.defineMessage({
495
+ id: "crLqJd",
496
+ defaultMessage: [{
497
+ "type": 0,
498
+ "value": "Without percentage"
499
+ }]
500
+ })
501
+ }, {
502
+ name: 'withoutBar',
520
503
  type: 'toggle',
521
504
  defaultValue: false,
522
505
  label: reactIntl.defineMessage({
523
- id: "W3aj7x",
506
+ id: "D7kxD3",
524
507
  defaultMessage: [{
525
508
  "type": 0,
526
- "value": "Without results"
509
+ "value": "Without bar"
527
510
  }]
528
511
  })
529
512
  }, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-survey",
3
- "version": "0.3.86",
3
+ "version": "0.3.90",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -49,17 +49,17 @@
49
49
  },
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
- "@micromag/core": "^0.3.86",
53
- "@micromag/data": "^0.3.86",
54
- "@micromag/element-background": "^0.3.86",
55
- "@micromag/element-button": "^0.3.86",
56
- "@micromag/element-call-to-action": "^0.3.86",
57
- "@micromag/element-container": "^0.3.86",
58
- "@micromag/element-heading": "^0.3.86",
59
- "@micromag/element-layout": "^0.3.86",
60
- "@micromag/element-scroll": "^0.3.86",
61
- "@micromag/element-text": "^0.3.86",
62
- "@micromag/transforms": "^0.3.86",
52
+ "@micromag/core": "^0.3.88",
53
+ "@micromag/data": "^0.3.88",
54
+ "@micromag/element-background": "^0.3.88",
55
+ "@micromag/element-button": "^0.3.88",
56
+ "@micromag/element-call-to-action": "^0.3.89",
57
+ "@micromag/element-container": "^0.3.88",
58
+ "@micromag/element-heading": "^0.3.88",
59
+ "@micromag/element-layout": "^0.3.88",
60
+ "@micromag/element-scroll": "^0.3.88",
61
+ "@micromag/element-text": "^0.3.88",
62
+ "@micromag/transforms": "^0.3.88",
63
63
  "classnames": "^2.2.6",
64
64
  "lodash": "^4.17.21",
65
65
  "prop-types": "^15.7.2",
@@ -69,5 +69,5 @@
69
69
  "publishConfig": {
70
70
  "access": "public"
71
71
  },
72
- "gitHead": "063af274982885b7696d265e6567ab8d44c8b9ad"
72
+ "gitHead": "347556649f4402c7bbdb183beb41eb48ec1c059c"
73
73
  }