@mopinion/survey/features/form/components/ModalForm.js

Collect customer feedback with the Mopinion survey library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = ModalForm;
var _preact = require("preact");
var _hooks = require("preact/hooks");
var _components = require("../../../components");
var _ConfigStore = require("../stores/ConfigStore");
var _FormStore = require("../stores/FormStore");
var _Form = require("./Form");
var _FormWindow = _interopRequireDefault(require("./FormWindow"));
var _FeedbackButton = _interopRequireDefault(require("./FeedbackButton"));
var _CloseButton = _interopRequireDefault(require("./CloseButton"));
var _BaseForm = _interopRequireDefault(require("./BaseForm"));
var _LanguageToggle = _interopRequireDefault(require("./LanguageToggle"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function ModalForm() {
  var _useFormStore = (0, _FormStore.useFormStore)(),
    feedbackButtonRef = _useFormStore.feedbackButtonRef,
    closeButtonRef = _useFormStore.closeButtonRef,
    formBodyRef = _useFormStore.formBodyRef,
    frameRef = _useFormStore.frameRef,
    wrapStyle = _useFormStore.wrapStyle,
    formOpen = _useFormStore.formOpen,
    screenshotActive = _useFormStore.screenshotActive,
    formType = _useFormStore.formType,
    formActions = _useFormStore.actions;
  var _useProperties = (0, _ConfigStore.useProperties)(),
    _useProperties$transl = _useProperties.translation,
    translation = _useProperties$transl === void 0 ? {} : _useProperties$transl;
  var _useFormProps = (0, _ConfigStore.useFormProps)(),
    formKey = _useFormProps.formKey;
  var _useConfigStore = (0, _ConfigStore.useConfigStore)(),
    themeClass = _useConfigStore.themeClass;
  var wrapRef = (0, _hooks.useRef)(null);
  var isIOS = navigator.userAgent.match(/(iPod|iPhone|iPad)/gi) || navigator.userAgent.match(/safari/gi) && navigator.maxTouchPoints > 1;
  return (0, _preact.h)("div", {
    className: "mopinion-survey-content wcag ".concat(themeClass),
    "data-mop-form-type": formType
  }, (0, _preact.h)(_components.Portal, {
    into: document.body
  }, (0, _preact.h)("div", {
    className: "mopinion-survey-content ".concat(themeClass),
    "data-mop-form-type": formType
  }, (0, _preact.h)("div", {
    ref: wrapRef,
    id: "surveyWindowWrap",
    className: "surveyWindowWrap ".concat(screenshotActive ? 'screen-capture-active' : ''),
    "data-parent-for": formKey,
    style: wrapStyle,
    onClick: function onClick(e) {
      if (e.target.isEqualNode(wrapRef.current)) {
        formActions.toggleForm();
      }
    },
    onKeyDown: function onKeyDown(e) {
      return formActions.handleWCAGkeyEvents(e);
    }
  }, (0, _preact.h)(_FormWindow["default"], {
    style: {
      position: 'absolute',
      top: '50px',
      left: 0,
      right: 0,
      marginLeft: 'auto',
      marginRight: 'auto',
      maxWidth: '480px',
      marginBottom: 50,
      boxShadow: _Form.windowBoxShadow,
      background: 'rgb(255,255,255)',
      transition: 'transform .225s, opacity .225s, height .175s',
      transform: formOpen ? 'scale(1)' : 'scale(.95)',
      opacity: formOpen ? 1 : 0
    },
    ref: frameRef
  }, (0, _preact.h)("div", {
    id: "surveyBody",
    style: {
      overflow: 'hidden'
    },
    role: "dialog",
    "aria-labelledby": "surveyTitle-".concat(formKey),
    ref: formBodyRef
  }, (0, _preact.h)(_CloseButton["default"], {
    ref: closeButtonRef
  }), (translation === null || translation === void 0 ? void 0 : translation.useTranslation) && (translation === null || translation === void 0 ? void 0 : translation.useToggle) && (0, _preact.h)(_LanguageToggle["default"], null), (0, _preact.h)(_BaseForm["default"], null))), (0, _preact.h)("div", {
    style: isIOS ? {
      height: 'calc(100vh + 1px)'
    } : {}
  })))), (0, _preact.h)(_FeedbackButton["default"], {
    ref: feedbackButtonRef
  }), (0, _preact.h)(_components.Portal, {
    into: document.body
  }, (0, _preact.h)("div", {
    "data-mask-for": formKey,
    "class": "mopinion-survey-mask wcag ".concat(screenshotActive ? 'screen-capture-active' : ''),
    id: "surveyMask",
    style: {
      pointerEvents: formOpen ? 'auto' : 'none',
      opacity: formOpen ? 0.15 : 0,
      visibility: formOpen ? 'visible' : 'hidden',
      transition: 'opacity .225s, visibility .225s',
      zIndex: !formOpen ? -1 : 1999999998
    }
  })));
}
//# sourceMappingURL=ModalForm.js.map