@mopinion/survey
Version:
Collect customer feedback with the Mopinion survey library
184 lines (183 loc) • 8.49 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = LanguageToggle;
var _preact = require("preact");
var _hooks = require("preact/hooks");
var _utils = require("../../../utils");
var _conversational = require("../../conversational");
var _elements = require("../../elements");
var _ConfigStore = require("../stores/ConfigStore");
var _FormStore = require("../stores/FormStore");
var _useJsEvents = _interopRequireDefault(require("../hooks/useJsEvents"));
var _SvgIcon = _interopRequireDefault(require("./SvgIcon"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function LanguageToggle() {
var _useFormProps = (0, _ConfigStore.useFormProps)(),
customDomain = _useFormProps.customDomain;
var _useFormStore = (0, _FormStore.useFormStore)(),
formType = _useFormStore.formType,
contentDivRef = _useFormStore.contentDivRef;
var _useConfigStore = (0, _ConfigStore.useConfigStore)(),
translationSet = _useConfigStore.translationSet,
translation = _useConfigStore.properties.translation,
actions = _useConfigStore.actions;
var triggerEvent = (0, _useJsEvents["default"])();
var toggleRef = (0, _hooks.useRef)(null);
var closeCrossRef = (0, _hooks.useRef)(null);
var _useState = (0, _hooks.useState)(false),
_useState2 = _slicedToArray(_useState, 2),
open = _useState2[0],
setOpen = _useState2[1];
var toggleList = (0, _hooks.useCallback)(function (f) {
return setOpen(function (prev) {
return typeof f === 'undefined' ? !prev : f;
});
}, []);
var setOption = function setOption(value) {
actions.setLanguage(value);
toggleList(false);
triggerEvent('language_changed');
};
var _useWcagKeyboardEvent = (0, _conversational.useWcagKeyboardEvents)({
onSpaceEnter: function onSpaceEnter(e, props) {
if (!open) {
e.preventDefault();
toggleList();
(0, _utils.tryFocus)(closeCrossRef.current);
}
},
onTabUp: function onTabUp(e, props) {
if (!props) {
e.preventDefault();
toggleList();
}
if (props !== null && props !== void 0 && props.isFirstOption) {
e.preventDefault();
(0, _utils.tryFocus)(closeCrossRef.current);
}
},
onTabDown: function onTabDown(e, props) {
if (props !== null && props !== void 0 && props.isLastOption) {
e.preventDefault();
(0, _utils.tryFocus)(closeCrossRef.current);
}
}
}),
_onKeyDown = _useWcagKeyboardEvent.onKeyDown;
(0, _hooks.useEffect)(function () {
var toggleListOuter = function toggleListOuter(e) {
var _toggleRef$current;
if (!((_toggleRef$current = toggleRef.current) !== null && _toggleRef$current !== void 0 && _toggleRef$current.contains(e.target))) {
toggleList(false);
}
};
var clickAwayElement = formType === 'embed' ? document : contentDivRef.current;
setTimeout(function () {
if (!open) {
clickAwayElement === null || clickAwayElement === void 0 || clickAwayElement.removeEventListener('click', toggleListOuter);
} else {
clickAwayElement === null || clickAwayElement === void 0 || clickAwayElement.addEventListener('click', toggleListOuter);
}
});
return function () {
clickAwayElement === null || clickAwayElement === void 0 || clickAwayElement.removeEventListener('click', toggleListOuter);
};
}, [open, formType, contentDivRef, toggleList]);
var defaultArray = [{
value: 'default',
label: 'Default language',
countrycode: ''
}];
var optionArray = defaultArray.concat(Object.keys(translation.toggleOptions).map(function (optionKey) {
return translation.toggleOptions[optionKey];
}));
var currentLanguage = optionArray.filter(function (option) {
return option.value === translationSet;
})[0];
var flagUrlBase = "https://".concat(customDomain, "/assets/img/countryflags");
return (0, _preact.h)("div", {
"class": 'language-toggle-wrap wcag'
}, (0, _preact.h)("div", {
className: "language-toggle ".concat(open ? 'open' : '', " ").concat(currentLanguage !== null && currentLanguage !== void 0 && currentLanguage.countrycode ? 'has-icon' : '')
}, (0, _preact.h)(_elements.HandleTabIndex, {
component: "button",
type: "button",
onClick: function onClick() {
toggleList();
},
onKeyDown: function onKeyDown(e) {
return _onKeyDown(e);
},
ref: toggleRef,
"aria-label": "choose language",
className: "toggle"
}, (0, _preact.h)(_SvgIcon["default"], {
icon: "language",
alt: "language select icon"
}), (0, _preact.h)("span", {
className: "current-flag"
}, currentLanguage !== null && currentLanguage !== void 0 && currentLanguage.countrycode ? (0, _preact.h)("img", {
src: "".concat(flagUrlBase, "/").concat(currentLanguage.countrycode, ".svg"),
alt: "".concat(currentLanguage.label, " flag")
}) : ''), (0, _preact.h)("span", {
className: "current"
}, (currentLanguage === null || currentLanguage === void 0 ? void 0 : currentLanguage.value) === 'default' ? '' : currentLanguage === null || currentLanguage === void 0 ? void 0 : currentLanguage.label), (0, _preact.h)("span", {
className: "caret"
})), (0, _preact.h)("div", {
className: "toggle-menu"
}, (0, _preact.h)("div", {
className: "toggle-caret"
}), (0, _preact.h)("div", {
className: "toggle-item-wrap"
}, (0, _preact.h)("span", {
className: "toggle-menu-close"
}, (0, _preact.h)(_elements.HandleTabIndex, {
component: "button",
type: "button",
onClick: function onClick() {
return toggleList();
},
ref: closeCrossRef,
onKeyDown: function onKeyDown(e) {
return _onKeyDown(e);
},
"aria-label": "close language selection",
className: "toggle-close"
})), optionArray.map(function (option, index) {
return (0, _preact.h)(_elements.HandleTabIndex, {
component: "button",
type: "button",
onClick: function onClick() {
return setOption(option.value);
},
onKeyDown: function onKeyDown(e) {
_onKeyDown(e, {
value: option.value,
isFirstOption: index === 0,
isLastOption: index === optionArray.length - 1
});
},
className: "toggle-menu-item ".concat(translationSet === option.value || !translationSet && option.value === 'default' ? 'selected' : '')
}, (0, _preact.h)("span", {
className: "toggle-menu-flag"
}, option.countrycode ? (0, _preact.h)("img", {
src: "".concat(flagUrlBase, "/").concat(option.countrycode, ".svg"),
alt: "".concat(option.label, " flag")
}) : '', ' '), (0, _preact.h)("span", {
className: "toggle-menu-label"
}, !option.countrycode ? (0, _preact.h)("span", {
style: {
fontStyle: 'italic'
}
}, option.label) : option.label));
})))));
}
//# sourceMappingURL=LanguageToggle.js.map