@micromag/screen-survey 0.3.84 → 0.3.89

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 +55 -77
  3. package/lib/index.js +54 -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%,.3)}.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 .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,35 @@ 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
+ }, "".concat(percent, "%")) : null, !withoutBar ? /*#__PURE__*/React.createElement("div", {
338
+ className: styles.resultBar,
339
+ style: _objectSpread(_objectSpread({
340
+ transitionDuration: finalTransitionDuration,
341
+ width: percent !== null ? "".concat(percent, "%") : null
342
+ }, getStyleFromColor(answered ? answerResultBarColor || resultsBarColor || labelColor : null, 'backgroundColor')), answered ? {
343
+ opacity: 1
344
+ } : {
345
+ opacity: 0
346
+ })
347
+ }) : null))))) : null));
382
348
  })) : null)); // Call to Action
383
349
 
384
350
  if (!isPlaceholder && hasCallToAction) {
@@ -402,13 +368,14 @@ var SurveyScreen = function SurveyScreen(_ref) {
402
368
  screenSize: {
403
369
  width: width,
404
370
  height: height
405
- }
371
+ },
372
+ enableInteraction: enableInteraction,
373
+ disableInteraction: disableInteraction
406
374
  })));
407
375
  }
408
376
 
409
377
  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
378
+ 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
379
  }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
413
380
  background: background,
414
381
  width: width,
@@ -495,14 +462,25 @@ var definition = {
495
462
  }]
496
463
  })
497
464
  }, {
498
- name: 'withoutResults',
465
+ name: 'withoutPercentage',
466
+ type: 'toggle',
467
+ defaultValue: false,
468
+ label: defineMessage({
469
+ id: "crLqJd",
470
+ defaultMessage: [{
471
+ "type": 0,
472
+ "value": "Without percentage"
473
+ }]
474
+ })
475
+ }, {
476
+ name: 'withoutBar',
499
477
  type: 'toggle',
500
478
  defaultValue: false,
501
479
  label: defineMessage({
502
- id: "W3aj7x",
480
+ id: "D7kxD3",
503
481
  defaultMessage: [{
504
482
  "type": 0,
505
- "value": "Without results"
483
+ "value": "Without bar"
506
484
  }]
507
485
  })
508
486
  }, {
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,35 @@ 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
+ }, "".concat(percent, "%")) : null, !withoutBar ? /*#__PURE__*/React__default["default"].createElement("div", {
359
+ className: styles.resultBar,
360
+ style: _objectSpread__default["default"](_objectSpread__default["default"]({
361
+ transitionDuration: finalTransitionDuration,
362
+ width: percent !== null ? "".concat(percent, "%") : null
363
+ }, utils.getStyleFromColor(answered ? answerResultBarColor || resultsBarColor || labelColor : null, 'backgroundColor')), answered ? {
364
+ opacity: 1
365
+ } : {
366
+ opacity: 0
367
+ })
368
+ }) : null))))) : null));
403
369
  })) : null)); // Call to Action
404
370
 
405
371
  if (!isPlaceholder && hasCallToAction) {
@@ -423,13 +389,14 @@ var SurveyScreen = function SurveyScreen(_ref) {
423
389
  screenSize: {
424
390
  width: width,
425
391
  height: height
426
- }
392
+ },
393
+ enableInteraction: enableInteraction,
394
+ disableInteraction: disableInteraction
427
395
  })));
428
396
  }
429
397
 
430
398
  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
399
+ 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
400
  }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
434
401
  background: background,
435
402
  width: width,
@@ -516,14 +483,25 @@ var definition = {
516
483
  }]
517
484
  })
518
485
  }, {
519
- name: 'withoutResults',
486
+ name: 'withoutPercentage',
487
+ type: 'toggle',
488
+ defaultValue: false,
489
+ label: reactIntl.defineMessage({
490
+ id: "crLqJd",
491
+ defaultMessage: [{
492
+ "type": 0,
493
+ "value": "Without percentage"
494
+ }]
495
+ })
496
+ }, {
497
+ name: 'withoutBar',
520
498
  type: 'toggle',
521
499
  defaultValue: false,
522
500
  label: reactIntl.defineMessage({
523
- id: "W3aj7x",
501
+ id: "D7kxD3",
524
502
  defaultMessage: [{
525
503
  "type": 0,
526
- "value": "Without results"
504
+ "value": "Without bar"
527
505
  }]
528
506
  })
529
507
  }, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-survey",
3
- "version": "0.3.84",
3
+ "version": "0.3.89",
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.81",
53
- "@micromag/data": "^0.3.81",
54
- "@micromag/element-background": "^0.3.81",
55
- "@micromag/element-button": "^0.3.81",
56
- "@micromag/element-call-to-action": "^0.3.81",
57
- "@micromag/element-container": "^0.3.81",
58
- "@micromag/element-heading": "^0.3.81",
59
- "@micromag/element-layout": "^0.3.81",
60
- "@micromag/element-scroll": "^0.3.81",
61
- "@micromag/element-text": "^0.3.81",
62
- "@micromag/transforms": "^0.3.81",
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": "0368383e7699c0223de5344ec861cc6ff6318393"
72
+ "gitHead": "b79d346163c149050ed713e8162675f11b8baf4b"
73
73
  }