@mopinion/survey
Version:
Collect customer feedback with the Mopinion survey library
145 lines (144 loc) • 6.93 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = Page;
var _preact = require("preact");
var _elements = require("../../elements");
var _constants = require("../../../constants");
var _utils = require("../../../utils");
var _ConfigStore = require("../stores/ConfigStore");
var _FormStore = require("../stores/FormStore");
var _useBlock2 = _interopRequireDefault(require("../hooks/useBlock"));
var _usePages = _interopRequireDefault(require("../hooks/usePages"));
var _useValidatedBlocks2 = _interopRequireDefault(require("../hooks/useValidatedBlocks"));
var _SvgIcon = _interopRequireDefault(require("./SvgIcon"));
var _FormBlock = _interopRequireDefault(require("./FormBlock"));
var _ActionButton = _interopRequireDefault(require("./ActionButton"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function Page(_ref) {
var _ref2, _block$properties$nex, _block$properties, _ref3, _ref4, _block$properties$pre, _block$properties2, _block$properties3, _block$id;
var pageNumber = _ref.pageNumber;
var _useFormProps = (0, _ConfigStore.useFormProps)(),
formKey = _useFormProps.formKey;
var _useFormStore = (0, _FormStore.useFormStore)(),
activePage = _useFormStore.activePage,
loading = _useFormStore.loading,
postFeedbackError = _useFormStore.postFeedbackError,
showErrors = _useFormStore.showErrors,
showNavAutopostPages = _useFormStore.showNavAutopostPages,
actions = _useFormStore.actions,
actionButtonRef = _useFormStore.actionButtonRef,
firstFocusableBlockRef = _useFormStore.firstFocusableBlockRef;
var _useConfigStore = (0, _ConfigStore.useConfigStore)(),
text = _useConfigStore.text,
pageMap = _useConfigStore.pageMap,
advanced = _useConfigStore.properties.advanced,
blocks = _useConfigStore.blocks;
var pageLayout = (0, _usePages["default"])(pageNumber);
var _useValidatedBlocks = (0, _useValidatedBlocks2["default"])(pageLayout, showErrors),
pageValid = _useValidatedBlocks.pageValid,
firstInvalid = _useValidatedBlocks.firstInvalid;
var _useBlock = (0, _useBlock2["default"])({
typeName: 'page_break',
typeOf: pageNumber - 1
}),
_useBlock$block = _useBlock.block,
block = _useBlock$block === void 0 ? {} : _useBlock$block;
var nextLabel = (_ref2 = (_block$properties$nex = (_block$properties = block.properties) === null || _block$properties === void 0 ? void 0 : _block$properties.nextLabel) !== null && _block$properties$nex !== void 0 ? _block$properties$nex : block === null || block === void 0 ? void 0 : block.nextLabel) !== null && _ref2 !== void 0 ? _ref2 : 'Next';
var prevLabel = (_ref3 = (_ref4 = (_block$properties$pre = (_block$properties2 = block.properties) === null || _block$properties2 === void 0 ? void 0 : _block$properties2.prevLabel) !== null && _block$properties$pre !== void 0 ? _block$properties$pre : block === null || block === void 0 ? void 0 : block.prevLabel) !== null && _ref4 !== void 0 ? _ref4 : text.btnLastBackText) !== null && _ref3 !== void 0 ? _ref3 : 'Back';
var isActive = activePage === Number(pageNumber);
var pageCount = Number(Object.keys(pageMap).pop());
var isFirstPage = pageNumber === 1;
var isLastPage = pageCount === pageNumber;
var showPrev = !isFirstPage && !advanced.hideSubNavigation;
var showNext = !isLastPage && pageCount > 1 && !advanced.hideSubNavigation && (!((_block$properties3 = block.properties) !== null && _block$properties3 !== void 0 && _block$properties3.autopost) || showNavAutopostPages.indexOf(activePage) > -1);
var showSubmit = isLastPage && !advanced.hideNavigation && (!advanced.lastPageAutoPost || showNavAutopostPages.indexOf(activePage) > -1);
var firstFocusableBlockId = isActive ? pageLayout.find(function (id) {
var block = Object.values(blocks !== null && blocks !== void 0 ? blocks : {}).find(function (block) {
var _block$properties4;
return Number(block.id) === id && (block === null || block === void 0 || (_block$properties4 = block.properties) === null || _block$properties4 === void 0 ? void 0 : _block$properties4.hide_on_init) !== true;
});
if (!block) {
return null;
}
return _constants.focusableBlocks.indexOf(block.typeName) > -1;
}) : null;
var focusableNavigation = isActive && !firstFocusableBlockId;
return (0, _preact.h)("div", {
id: "page".concat(pageNumber, "-").concat(formKey),
style: {
display: isActive ? 'block' : 'none'
},
"data-testid": "page-".concat(pageNumber)
}, (0, _preact.h)(_FormBlock["default"], {
id: _constants.honeyBotId
}), pageLayout.map(function (id) {
return (0, _preact.h)("div", {
ref: isActive && firstFocusableBlockId === id ? firstFocusableBlockRef : null
}, (0, _preact.h)(_FormBlock["default"], {
id: id,
showErrors: showErrors,
firstInvalid: isActive && firstInvalid && id === firstInvalid
}));
}), (0, _preact.h)("div", {
className: (0, _utils.makeClassName)({
prefix: false,
className: 'form-actions'
}, !showPrev && 'row-reverse'),
"data-testid": "page_break-group",
ref: isActive && focusableNavigation ? firstFocusableBlockRef : null,
"aria-live": "polite"
}, (0, _preact.h)(_preact.Fragment, null, showPrev && (0, _preact.h)(_ActionButton["default"], {
type: "prev",
id: (_block$id = block.id) !== null && _block$id !== void 0 ? _block$id : formKey,
onClick: function onClick() {
return actions.prevPage();
}
}, (0, _preact.h)(_SvgIcon["default"], {
icon: "angle-left",
className: "is-context-icon"
}), ' ', prevLabel), showNext && (0, _preact.h)(_ActionButton["default"], {
type: "next",
id: block.id,
ref: isActive ? actionButtonRef : null,
loading: loading,
onClick: function onClick() {
if (!pageValid) {
actions.dispatch({
type: 'set_show_errors',
payload: {
pageLayout: pageLayout
}
});
return;
}
actions.nextPage();
}
}, nextLabel, ' ', (0, _preact.h)(_SvgIcon["default"], {
icon: "angle-right",
className: "is-context-icon"
})), showSubmit && (0, _preact.h)(_ActionButton["default"], {
type: "submit",
ref: isActive ? actionButtonRef : null,
loading: loading,
onClick: function onClick() {
if (!pageValid) {
actions.dispatch({
type: 'set_show_errors',
payload: {
pageLayout: pageLayout
}
});
return;
}
actions.postFeedback();
}
}, (0, _preact.h)("div", null, text.btnSubmitText, ' ', (0, _preact.h)(_SvgIcon["default"], {
icon: "paper-plane-o",
className: "is-context-icon"
}))), postFeedbackError && (0, _preact.h)(_elements.ErrorMessage, {
showErrors: true
}, "Something went wrong, please try again"))));
}
//# sourceMappingURL=Page.js.map