@micromag/screen-survey 0.4.48 → 0.4.50

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 (2) hide show
  1. package/es/index.js +240 -223
  2. package/package.json +15 -15
package/es/index.js CHANGED
@@ -8,7 +8,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
8
8
  import classNames from 'classnames';
9
9
  import DOMPurify from 'dompurify';
10
10
  import isNumber from 'lodash/isNumber';
11
- import React, { useState, useMemo, useCallback, useEffect } from 'react';
11
+ import { useState, useMemo, useCallback, useEffect } from 'react';
12
12
  import { ScreenElement, Transitions, CloseIcon } from '@micromag/core/components';
13
13
  import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
14
14
  import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
@@ -24,6 +24,7 @@ import Layout, { Spacer } from '@micromag/element-layout';
24
24
  import Scroll from '@micromag/element-scroll';
25
25
  import Text from '@micromag/element-text';
26
26
  import TextInput from '@micromag/element-text-input';
27
+ import { jsx, jsxs } from 'react/jsx-runtime';
27
28
 
28
29
  var styles = {"container":"micromag-screen-survey-container","background":"micromag-screen-survey-background","content":"micromag-screen-survey-content","question":"micromag-screen-survey-question","answers":"micromag-screen-survey-answers","items":"micromag-screen-survey-items","header":"micromag-screen-survey-header","disabled":"micromag-screen-survey-disabled","footer":"micromag-screen-survey-footer","item":"micromag-screen-survey-item","placeholderAnswer":"micromag-screen-survey-placeholderAnswer","itemContent":"micromag-screen-survey-itemContent","resultBar":"micromag-screen-survey-resultBar","resultLabel":"micromag-screen-survey-resultLabel","resultText":"micromag-screen-survey-resultText","itemInner":"micromag-screen-survey-itemInner","button":"micromag-screen-survey-button","itemLabel":"micromag-screen-survey-itemLabel","itemText":"micromag-screen-survey-itemText","emptyQuestion":"micromag-screen-survey-emptyQuestion","emptyAnswer":"micromag-screen-survey-emptyAnswer","userAnswer":"micromag-screen-survey-userAnswer","input":"micromag-screen-survey-input","textInput":"micromag-screen-survey-textInput","confirm":"micromag-screen-survey-confirm","selected":"micromag-screen-survey-selected","submit":"micromag-screen-survey-submit","focused":"micromag-screen-survey-focused","filled":"micromag-screen-survey-filled","multiline":"micromag-screen-survey-multiline","icon":"micromag-screen-survey-icon","answered":"micromag-screen-survey-answered","withPercentage":"micromag-screen-survey-withPercentage","withBar":"micromag-screen-survey-withBar","inputFocused":"micromag-screen-survey-inputFocused","isPlaceholder":"micromag-screen-survey-isPlaceholder","layout":"micromag-screen-survey-layout","reset":"micromag-screen-survey-reset"};
29
30
 
@@ -320,10 +321,9 @@ function SurveyScreen(_ref) {
320
321
  }, [setHasScroll]);
321
322
 
322
323
  // Question
323
- var items = [/*#__PURE__*/React.createElement(ScreenElement, {
324
- key: "question",
324
+ var items = [/*#__PURE__*/jsx(ScreenElement, {
325
325
  placeholder: "title",
326
- emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
326
+ emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
327
327
  id: "e1I+KU",
328
328
  defaultMessage: [{
329
329
  "type": 0,
@@ -331,18 +331,18 @@ function SurveyScreen(_ref) {
331
331
  }]
332
332
  }),
333
333
  emptyClassName: styles.emptyQuestion,
334
- isEmpty: !hasQuestion
335
- }, hasQuestion ? /*#__PURE__*/React.createElement(Transitions, {
336
- transitions: transitions,
337
- playing: transitionPlaying,
338
- disabled: transitionDisabled
339
- }, /*#__PURE__*/React.createElement(Heading, Object.assign({}, question, {
340
- className: styles.question
341
- }))) : null)];
334
+ isEmpty: !hasQuestion,
335
+ children: hasQuestion ? /*#__PURE__*/jsx(Transitions, {
336
+ transitions: transitions,
337
+ playing: transitionPlaying,
338
+ disabled: transitionDisabled,
339
+ children: /*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({}, question), {}, {
340
+ className: styles.question
341
+ }))
342
+ }) : null
343
+ }, "question")];
342
344
  if (isSplitted || !isPlaceholder && hasFooter && isMiddleLayout) {
343
- items.push(/*#__PURE__*/React.createElement(Spacer, {
344
- key: "spacer"
345
- }));
345
+ items.push(/*#__PURE__*/jsx(Spacer, {}, "spacer"));
346
346
  }
347
347
  var finalTransitionDuration = useMemo(function () {
348
348
  return showInstantAnswer ? 0 : "".concat(resultTransitionDuration, "ms");
@@ -363,215 +363,232 @@ function SurveyScreen(_ref) {
363
363
  return answerResult || defaultResult;
364
364
  }, [hasDefaultResult, result, answers, userAnswerIndex]);
365
365
  var showReset = isEdit && userAnswerIndex !== null;
366
- items.push(/*#__PURE__*/React.createElement("div", {
367
- key: "answers",
368
- className: styles.answers
369
- }, answers !== null || isPlaceholder ? /*#__PURE__*/React.createElement("div", {
370
- className: styles.items
371
- }, (isPlaceholder ? _toConsumableArray(new Array(3)) : answers).map(function (answer, answerIndex) {
372
- var hasAnswer = answer !== null;
373
- var _ref13 = answer || {},
374
- _ref13$label = _ref13.label,
375
- label = _ref13$label === void 0 ? null : _ref13$label,
376
- _ref13$buttonStyle = _ref13.buttonStyle,
377
- answerButtonStyle = _ref13$buttonStyle === void 0 ? null : _ref13$buttonStyle,
378
- _ref13$textStyle = _ref13.textStyle,
379
- answerButtonTextStyle = _ref13$textStyle === void 0 ? null : _ref13$textStyle,
380
- _ref13$resultStyle = _ref13.resultStyle,
381
- answerResultStyle = _ref13$resultStyle === void 0 ? null : _ref13$resultStyle;
382
- var _ref14 = answerResultStyle || {},
383
- _ref14$barColor = _ref14.barColor,
384
- answerResultBarColor = _ref14$barColor === void 0 ? null : _ref14$barColor,
385
- answerResultTextColor = _ref14.textColor,
386
- _ref14$percentageText = _ref14.percentageTextStyle,
387
- answerResultPercentageTextStyle = _ref14$percentageText === void 0 ? null : _ref14$percentageText;
388
- var _ref15 = label || {},
389
- _ref15$body = _ref15.body,
390
- body = _ref15$body === void 0 ? null : _ref15$body;
391
- var _ref16 = body !== null ? quizAnswersComputed[body] || {} : {},
392
- _ref16$percent = _ref16.percent,
393
- percent = _ref16$percent === void 0 ? 0 : _ref16$percent,
394
- _ref16$count = _ref16.count,
395
- count = _ref16$count === void 0 ? 0 : _ref16$count;
396
- var _ref17 = label || {},
397
- _ref17$textStyle = _ref17.textStyle,
398
- textStyle = _ref17$textStyle === void 0 ? null : _ref17$textStyle;
399
- var _ref18 = textStyle || {},
400
- _ref18$color = _ref18.color,
401
- labelColor = _ref18$color === void 0 ? null : _ref18$color;
402
- var hasAnswerLabel = isTextFilled(label);
403
- var userAnswer = userAnswerIndex === answerIndex;
404
- var buttonStyles = _objectSpread(_objectSpread(_objectSpread({}, buttonsStyle), answerButtonStyle), answered ? {
405
- textAlign: 'left'
406
- } : null);
407
- var _ref19 = buttonStyles || {},
408
- _ref19$borderRadius = _ref19.borderRadius,
409
- answerResultBorderRadius = _ref19$borderRadius === void 0 ? null : _ref19$borderRadius;
410
- var finalBarBorderRadius = answerResultBorderRadius !== null && isNumber(answerResultBorderRadius) && answerResultBorderRadius > 2 ? answerResultBorderRadius - 2 : answerResultBorderRadius;
411
- return /*#__PURE__*/React.createElement("div", {
412
- key: "answer-".concat(answerIndex + 1),
413
- className: classNames([styles.item, _defineProperty({}, styles.userAnswer, userAnswer)])
414
- }, /*#__PURE__*/React.createElement(ScreenElement, {
415
- placeholder: "surveyAnswer",
416
- placeholderProps: {
417
- className: styles.placeholderAnswer
418
- },
419
- emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
420
- id: "+Ok+7S",
421
- defaultMessage: [{
422
- "type": 0,
423
- "value": "Answer"
424
- }]
425
- }),
426
- emptyClassName: styles.emptyAnswer,
427
- isEmpty: !hasAnswerLabel
428
- }, hasAnswer ? /*#__PURE__*/React.createElement("div", {
429
- className: styles.itemContent
430
- }, /*#__PURE__*/React.createElement("div", {
431
- className: styles.itemInner,
432
- style: {
433
- borderRadius: answerResultBorderRadius,
434
- transitionDuration: finalTransitionDuration
435
- }
436
- }, /*#__PURE__*/React.createElement(Button, {
437
- className: styles.button,
438
- onPointerUp: function onPointerUp(e) {
439
- if (e.pointerType !== 'mouse' || e.button === 0) {
440
- onAnswerClick(answerIndex);
441
- }
442
- },
443
- disabled: isPreview || userAnswerIndex !== null,
444
- focusable: current && isView,
445
- buttonStyle: buttonStyles,
446
- textStyle: _objectSpread(_objectSpread(_objectSpread({}, buttonsTextStyle), textStyle), answerButtonTextStyle)
447
- }, /*#__PURE__*/React.createElement("span", {
448
- className: styles.itemLabel
449
- }, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
450
- textStyle: _objectSpread(_objectSpread(_objectSpread({}, buttonsTextStyle), textStyle), answerButtonTextStyle),
451
- inline: true,
452
- className: styles.itemText
453
- })), !withoutPercentage ? /*#__PURE__*/React.createElement("div", {
454
- className: styles.resultLabel,
455
- style: _objectSpread(_objectSpread({}, getStyleFromColor(answered ? answerResultTextColor || resultsTextColor || answerResultBarColor || resultsBarColor || labelColor : null, 'color')), answered ? {
456
- opacity: 1
457
- } : {
458
- opacity: 0
459
- })
460
- }, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
461
- textStyle: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, buttonsTextStyle), textStyle), answerButtonTextStyle), resultsTextColor), resultsPercentageTextStyle), answerResultTextColor), answerResultPercentageTextStyle),
462
- inline: true,
463
- className: styles.resultText,
464
- body: showCount ? count : "".concat(percent, "%")
465
- }))) : null, !withoutBar ? /*#__PURE__*/React.createElement("div", {
466
- className: styles.resultBar,
467
- style: _objectSpread(_objectSpread({
468
- borderRadius: finalBarBorderRadius,
469
- transitionDuration: finalTransitionDuration,
470
- width: percent !== null ? "".concat(percent, "%") : '0%'
471
- }, getStyleFromColor(answerResultBarColor || resultsBarColor || labelColor, 'backgroundColor')), answered ? {
472
- opacity: 0.5
473
- } : {
474
- opacity: 0
366
+ items.push(/*#__PURE__*/jsx("div", {
367
+ className: styles.answers,
368
+ children: answers !== null || isPlaceholder ? /*#__PURE__*/jsx("div", {
369
+ className: styles.items,
370
+ children: (isPlaceholder ? _toConsumableArray(new Array(3)) : answers).map(function (answer, answerIndex) {
371
+ var hasAnswer = answer !== null;
372
+ var _ref13 = answer || {},
373
+ _ref13$label = _ref13.label,
374
+ label = _ref13$label === void 0 ? null : _ref13$label,
375
+ _ref13$buttonStyle = _ref13.buttonStyle,
376
+ answerButtonStyle = _ref13$buttonStyle === void 0 ? null : _ref13$buttonStyle,
377
+ _ref13$textStyle = _ref13.textStyle,
378
+ answerButtonTextStyle = _ref13$textStyle === void 0 ? null : _ref13$textStyle,
379
+ _ref13$resultStyle = _ref13.resultStyle,
380
+ answerResultStyle = _ref13$resultStyle === void 0 ? null : _ref13$resultStyle;
381
+ var _ref14 = answerResultStyle || {},
382
+ _ref14$barColor = _ref14.barColor,
383
+ answerResultBarColor = _ref14$barColor === void 0 ? null : _ref14$barColor,
384
+ answerResultTextColor = _ref14.textColor,
385
+ _ref14$percentageText = _ref14.percentageTextStyle,
386
+ answerResultPercentageTextStyle = _ref14$percentageText === void 0 ? null : _ref14$percentageText;
387
+ var _ref15 = label || {},
388
+ _ref15$body = _ref15.body,
389
+ body = _ref15$body === void 0 ? null : _ref15$body;
390
+ var _ref16 = body !== null ? quizAnswersComputed[body] || {} : {},
391
+ _ref16$percent = _ref16.percent,
392
+ percent = _ref16$percent === void 0 ? 0 : _ref16$percent,
393
+ _ref16$count = _ref16.count,
394
+ count = _ref16$count === void 0 ? 0 : _ref16$count;
395
+ var _ref17 = label || {},
396
+ _ref17$textStyle = _ref17.textStyle,
397
+ textStyle = _ref17$textStyle === void 0 ? null : _ref17$textStyle;
398
+ var _ref18 = textStyle || {},
399
+ _ref18$color = _ref18.color,
400
+ labelColor = _ref18$color === void 0 ? null : _ref18$color;
401
+ var hasAnswerLabel = isTextFilled(label);
402
+ var userAnswer = userAnswerIndex === answerIndex;
403
+ var buttonStyles = _objectSpread(_objectSpread(_objectSpread({}, buttonsStyle), answerButtonStyle), answered ? {
404
+ textAlign: 'left'
405
+ } : null);
406
+ var _ref19 = buttonStyles || {},
407
+ _ref19$borderRadius = _ref19.borderRadius,
408
+ answerResultBorderRadius = _ref19$borderRadius === void 0 ? null : _ref19$borderRadius;
409
+ var finalBarBorderRadius = answerResultBorderRadius !== null && isNumber(answerResultBorderRadius) && answerResultBorderRadius > 2 ? answerResultBorderRadius - 2 : answerResultBorderRadius;
410
+ return /*#__PURE__*/jsx("div", {
411
+ className: classNames([styles.item, _defineProperty({}, styles.userAnswer, userAnswer)]),
412
+ children: /*#__PURE__*/jsx(ScreenElement, {
413
+ placeholder: "surveyAnswer",
414
+ placeholderProps: {
415
+ className: styles.placeholderAnswer
416
+ },
417
+ emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
418
+ id: "+Ok+7S",
419
+ defaultMessage: [{
420
+ "type": 0,
421
+ "value": "Answer"
422
+ }]
423
+ }),
424
+ emptyClassName: styles.emptyAnswer,
425
+ isEmpty: !hasAnswerLabel,
426
+ children: hasAnswer ? /*#__PURE__*/jsx("div", {
427
+ className: styles.itemContent,
428
+ children: /*#__PURE__*/jsx("div", {
429
+ className: styles.itemInner,
430
+ style: {
431
+ borderRadius: answerResultBorderRadius,
432
+ transitionDuration: finalTransitionDuration
433
+ },
434
+ children: /*#__PURE__*/jsx(Button, {
435
+ className: styles.button,
436
+ onPointerUp: function onPointerUp(e) {
437
+ if (e.pointerType !== 'mouse' || e.button === 0) {
438
+ onAnswerClick(answerIndex);
439
+ }
440
+ },
441
+ disabled: isPreview || userAnswerIndex !== null,
442
+ focusable: current && isView,
443
+ buttonStyle: buttonStyles,
444
+ textStyle: _objectSpread(_objectSpread(_objectSpread({}, buttonsTextStyle), textStyle), answerButtonTextStyle),
445
+ children: /*#__PURE__*/jsxs("span", {
446
+ className: styles.itemLabel,
447
+ children: [/*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, label), {}, {
448
+ textStyle: _objectSpread(_objectSpread(_objectSpread({}, buttonsTextStyle), textStyle), answerButtonTextStyle),
449
+ inline: true,
450
+ className: styles.itemText
451
+ })), !withoutPercentage ? /*#__PURE__*/jsx("div", {
452
+ className: styles.resultLabel,
453
+ style: _objectSpread(_objectSpread({}, getStyleFromColor(answered ? answerResultTextColor || resultsTextColor || answerResultBarColor || resultsBarColor || labelColor : null, 'color')), answered ? {
454
+ opacity: 1
455
+ } : {
456
+ opacity: 0
457
+ }),
458
+ children: /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, label), {}, {
459
+ textStyle: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, buttonsTextStyle), textStyle), answerButtonTextStyle), resultsTextColor), resultsPercentageTextStyle), answerResultTextColor), answerResultPercentageTextStyle),
460
+ inline: true,
461
+ className: styles.resultText,
462
+ body: showCount ? count : "".concat(percent, "%")
463
+ }))
464
+ }) : null, !withoutBar ? /*#__PURE__*/jsx("div", {
465
+ className: styles.resultBar,
466
+ style: _objectSpread(_objectSpread({
467
+ borderRadius: finalBarBorderRadius,
468
+ transitionDuration: finalTransitionDuration,
469
+ width: percent !== null ? "".concat(percent, "%") : '0%'
470
+ }, getStyleFromColor(answerResultBarColor || resultsBarColor || labelColor, 'backgroundColor')), answered ? {
471
+ opacity: 0.5
472
+ } : {
473
+ opacity: 0
474
+ })
475
+ }) : null]
476
+ })
477
+ })
478
+ })
479
+ }) : null
480
+ })
481
+ }, "answer-".concat(answerIndex + 1));
475
482
  })
476
- }) : null)))) : null));
477
- })) : null));
478
- return /*#__PURE__*/React.createElement("div", {
479
- className: classNames([styles.container, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.answered, answered), styles.inputFocused, inputFocused), styles.withPercentage, !withoutPercentage), styles.withBar, !withoutBar), styles.isPlaceholder, isPlaceholder)])
480
- }, /*#__PURE__*/React.createElement(Container, {
481
- width: width,
482
- height: height,
483
- className: styles.content
484
- }, /*#__PURE__*/React.createElement(Scroll, {
485
- verticalAlign: verticalAlign,
486
- disabled: scrollingDisabled,
487
- onScrolledTrigger: onScrolledTrigger,
488
- onScrolledBottom: onScrolledBottom,
489
- onScrolledNotBottom: onScrolledNotBottom,
490
- onScrollHeightChange: onScrollHeightChange,
491
- withShadow: true
492
- }, showReset ? /*#__PURE__*/React.createElement(Button, {
493
- className: styles.reset,
494
- icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
495
- icon: faRedo,
496
- size: "md"
497
- }),
498
- onClick: onQuizReset
499
- }) : null, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
500
- className: classNames([styles.header, _defineProperty({}, styles.disabled, scrolledBottom && !scrollingDisabled && hasScroll)]),
501
- ref: headerRef,
502
- style: {
503
- paddingTop: spacing / 2,
504
- paddingLeft: spacing,
505
- paddingRight: spacing,
506
- paddingBottom: spacing,
507
- transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
508
- }
509
- }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(Layout, {
510
- className: styles.layout,
511
- verticalAlign: verticalAlign,
512
- style: !isPlaceholder ? {
513
- padding: spacing,
514
- paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
515
- paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight + spacing)
516
- } : null
517
- }, items, !isPlaceholder && allowCustomAnswer ? /*#__PURE__*/React.createElement("form", {
518
- className: classNames([styles.input, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.focused, inputFocused), styles.filled, textInput !== null && textInput !== ''), styles.disabled, inputDisabled), styles.selected, userAnswerIndex === 'input'), styles.multiline, customAnswerMultiline)]),
519
- onSubmit: onSubmitSuggestion
520
- }, /*#__PURE__*/React.createElement(TextInput, {
521
- className: styles.textInput,
522
- disabled: inputDisabled,
523
- focusable: current && isView,
524
- buttonStyle: _objectSpread(_objectSpread({}, buttonsStyle), customAnswerBoxStyle),
525
- textStyle: _objectSpread(_objectSpread({}, buttonsTextStyle), customAnswerTextStyle),
526
- placeholderTextStyle: _objectSpread(_objectSpread(_objectSpread({}, buttonsTextStyle), customAnswerTextStyle), placeholderTextStyle),
527
- value: textInput,
528
- label: placeholderBody,
529
- onChange: onTextInputChange,
530
- onFocus: onInputFocused,
531
- onBlur: onInputBlurred,
532
- multiline: customAnswerMultiline
533
- }), !answered ? /*#__PURE__*/React.createElement(Button, {
534
- className: classNames([styles.confirm, _defineProperty({}, styles.disabled, inputDisabled || textInput === null || textInput === '')]),
535
- type: "button",
536
- onClick: onTextInputClear,
537
- disabled: inputDisabled || textInput === null || textInput === ''
538
- }, /*#__PURE__*/React.createElement(CloseIcon, {
539
- className: styles.icon
540
- })) : null, !answered ? /*#__PURE__*/React.createElement(Button, {
541
- className: classNames([styles.submit, _defineProperty({}, styles.disabled, inputDisabled || textInput === null || textInput === '')]),
542
- type: "submit",
543
- buttonStyle: customAnswerSubmit === null || customAnswerSubmit === void 0 ? void 0 : customAnswerSubmit.buttonStyle,
544
- disabled: inputDisabled || textInput === null || textInput === ''
545
- }, /*#__PURE__*/React.createElement(Text, Object.assign({}, customAnswerSubmit, {
546
- inline: true
547
- }))) : null) : null, userAnswerIndex !== null && finalResult !== null ? /*#__PURE__*/React.createElement(Transitions, {
548
- transitions: transitions,
549
- playing: transitionPlaying,
550
- disabled: transitionDisabled
551
- }, /*#__PURE__*/React.createElement(Text, Object.assign({}, finalResult || {}, {
552
- className: styles.resultText
553
- }))) : null)), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
554
- ref: footerRef,
555
- className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom)]),
556
- style: {
557
- transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
558
- paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
559
- paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
560
- paddingTop: spacing / 2,
561
- paddingBottom: spacing / 2
562
- }
563
- }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
564
- background: background,
565
- width: width,
566
- height: height,
567
- resolution: resolution,
568
- playing: backgroundPlaying,
569
- muted: muted,
570
- shouldLoad: mediaShouldLoad,
571
- mediaRef: mediaRef,
572
- withoutVideo: isPreview,
573
- className: styles.background
574
- }) : null);
483
+ }) : null
484
+ }, "answers"));
485
+ return /*#__PURE__*/jsxs("div", {
486
+ className: classNames([styles.container, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.answered, answered), styles.inputFocused, inputFocused), styles.withPercentage, !withoutPercentage), styles.withBar, !withoutBar), styles.isPlaceholder, isPlaceholder)]),
487
+ children: [/*#__PURE__*/jsxs(Container, {
488
+ width: width,
489
+ height: height,
490
+ className: styles.content,
491
+ children: [/*#__PURE__*/jsxs(Scroll, {
492
+ verticalAlign: verticalAlign,
493
+ disabled: scrollingDisabled,
494
+ onScrolledTrigger: onScrolledTrigger,
495
+ onScrolledBottom: onScrolledBottom,
496
+ onScrolledNotBottom: onScrolledNotBottom,
497
+ onScrollHeightChange: onScrollHeightChange,
498
+ withShadow: true,
499
+ children: [showReset ? /*#__PURE__*/jsx(Button, {
500
+ className: styles.reset,
501
+ icon: /*#__PURE__*/jsx(FontAwesomeIcon, {
502
+ icon: faRedo,
503
+ size: "md"
504
+ }),
505
+ onClick: onQuizReset
506
+ }) : null, !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
507
+ className: classNames([styles.header, _defineProperty({}, styles.disabled, scrolledBottom && !scrollingDisabled && hasScroll)]),
508
+ ref: headerRef,
509
+ style: {
510
+ paddingTop: spacing / 2,
511
+ paddingLeft: spacing,
512
+ paddingRight: spacing,
513
+ paddingBottom: spacing,
514
+ transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
515
+ },
516
+ children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
517
+ }) : null, /*#__PURE__*/jsxs(Layout, {
518
+ className: styles.layout,
519
+ verticalAlign: verticalAlign,
520
+ style: !isPlaceholder ? {
521
+ padding: spacing,
522
+ paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
523
+ paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight + spacing)
524
+ } : null,
525
+ children: [items, !isPlaceholder && allowCustomAnswer ? /*#__PURE__*/jsxs("form", {
526
+ className: classNames([styles.input, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.focused, inputFocused), styles.filled, textInput !== null && textInput !== ''), styles.disabled, inputDisabled), styles.selected, userAnswerIndex === 'input'), styles.multiline, customAnswerMultiline)]),
527
+ onSubmit: onSubmitSuggestion,
528
+ children: [/*#__PURE__*/jsx(TextInput, {
529
+ className: styles.textInput,
530
+ disabled: inputDisabled,
531
+ focusable: current && isView,
532
+ buttonStyle: _objectSpread(_objectSpread({}, buttonsStyle), customAnswerBoxStyle),
533
+ textStyle: _objectSpread(_objectSpread({}, buttonsTextStyle), customAnswerTextStyle),
534
+ placeholderTextStyle: _objectSpread(_objectSpread(_objectSpread({}, buttonsTextStyle), customAnswerTextStyle), placeholderTextStyle),
535
+ value: textInput,
536
+ label: placeholderBody,
537
+ onChange: onTextInputChange,
538
+ onFocus: onInputFocused,
539
+ onBlur: onInputBlurred,
540
+ multiline: customAnswerMultiline
541
+ }), !answered ? /*#__PURE__*/jsx(Button, {
542
+ className: classNames([styles.confirm, _defineProperty({}, styles.disabled, inputDisabled || textInput === null || textInput === '')]),
543
+ type: "button",
544
+ onClick: onTextInputClear,
545
+ disabled: inputDisabled || textInput === null || textInput === '',
546
+ children: /*#__PURE__*/jsx(CloseIcon, {
547
+ className: styles.icon
548
+ })
549
+ }) : null, !answered ? /*#__PURE__*/jsx(Button, {
550
+ className: classNames([styles.submit, _defineProperty({}, styles.disabled, inputDisabled || textInput === null || textInput === '')]),
551
+ type: "submit",
552
+ buttonStyle: customAnswerSubmit === null || customAnswerSubmit === void 0 ? void 0 : customAnswerSubmit.buttonStyle,
553
+ disabled: inputDisabled || textInput === null || textInput === '',
554
+ children: /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, customAnswerSubmit), {}, {
555
+ inline: true
556
+ }))
557
+ }) : null]
558
+ }) : null, userAnswerIndex !== null && finalResult !== null ? /*#__PURE__*/jsx(Transitions, {
559
+ transitions: transitions,
560
+ playing: transitionPlaying,
561
+ disabled: transitionDisabled,
562
+ children: /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, finalResult || {}), {}, {
563
+ className: styles.resultText
564
+ }))
565
+ }) : null]
566
+ })]
567
+ }), !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
568
+ ref: footerRef,
569
+ className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom)]),
570
+ style: {
571
+ transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
572
+ paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
573
+ paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
574
+ paddingTop: spacing / 2,
575
+ paddingBottom: spacing / 2
576
+ },
577
+ children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
578
+ }) : null]
579
+ }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
580
+ background: background,
581
+ width: width,
582
+ height: height,
583
+ resolution: resolution,
584
+ playing: backgroundPlaying,
585
+ muted: muted,
586
+ shouldLoad: mediaShouldLoad,
587
+ mediaRef: mediaRef,
588
+ withoutVideo: isPreview,
589
+ className: styles.background
590
+ }) : null]
591
+ });
575
592
  }
576
593
 
577
594
  var definition = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-survey",
3
- "version": "0.4.48",
3
+ "version": "0.4.50",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -64,19 +64,19 @@
64
64
  "@fortawesome/fontawesome-svg-core": "^7.2.0",
65
65
  "@fortawesome/free-solid-svg-icons": "^7.2.0",
66
66
  "@fortawesome/react-fontawesome": "^3.2.0",
67
- "@micromag/core": "^0.4.48",
68
- "@micromag/data": "^0.4.48",
69
- "@micromag/element-background": "^0.4.48",
70
- "@micromag/element-button": "^0.4.48",
71
- "@micromag/element-container": "^0.4.48",
72
- "@micromag/element-footer": "^0.4.48",
73
- "@micromag/element-header": "^0.4.48",
74
- "@micromag/element-heading": "^0.4.48",
75
- "@micromag/element-layout": "^0.4.48",
76
- "@micromag/element-scroll": "^0.4.48",
77
- "@micromag/element-text": "^0.4.48",
78
- "@micromag/element-text-input": "^0.4.48",
79
- "@micromag/transforms": "^0.4.48",
67
+ "@micromag/core": "^0.4.50",
68
+ "@micromag/data": "^0.4.50",
69
+ "@micromag/element-background": "^0.4.50",
70
+ "@micromag/element-button": "^0.4.50",
71
+ "@micromag/element-container": "^0.4.50",
72
+ "@micromag/element-footer": "^0.4.50",
73
+ "@micromag/element-header": "^0.4.50",
74
+ "@micromag/element-heading": "^0.4.50",
75
+ "@micromag/element-layout": "^0.4.50",
76
+ "@micromag/element-scroll": "^0.4.50",
77
+ "@micromag/element-text": "^0.4.50",
78
+ "@micromag/element-text-input": "^0.4.50",
79
+ "@micromag/transforms": "^0.4.50",
80
80
  "classnames": "^2.2.6",
81
81
  "dompurify": "^3.2.6",
82
82
  "lodash": "^4.17.23",
@@ -87,6 +87,6 @@
87
87
  "access": "public",
88
88
  "registry": "https://registry.npmjs.org/"
89
89
  },
90
- "gitHead": "d6772865be1ee3f2d19288ebfbf4b9b6860f4cd7",
90
+ "gitHead": "940d5ca98f8f448b79eaa3e2fa685c3ee95185b8",
91
91
  "types": "es/index.d.ts"
92
92
  }