@mopinion/survey
Version:
Collect customer feedback with the Mopinion survey library
67 lines (66 loc) • 2.88 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = Progress;
var _preact = require("preact");
var _hooks = require("preact/hooks");
var _ConfigStore = require("../stores/ConfigStore");
var _FormStore = require("../stores/FormStore");
var _useFormCompletionPercentage = _interopRequireDefault(require("../hooks/useFormCompletionPercentage"));
var _SvgIcon = _interopRequireDefault(require("./SvgIcon"));
var _utils = require("../../../utils");
var _elements = require("../../elements");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function Progress() {
var _properties$advanced, _properties$advanced2;
var _useFormStore = (0, _FormStore.useFormStore)(),
activePage = _useFormStore.activePage,
formType = _useFormStore.formType;
var _useConfigStore = (0, _ConfigStore.useConfigStore)(),
properties = _useConfigStore.properties,
pageMap = _useConfigStore.pageMap;
var pageCount = Number(Object.keys(pageMap).pop());
var formCompletionPercentage = (0, _useFormCompletionPercentage["default"])();
var progressDivRef = (0, _hooks.useRef)(null);
(0, _hooks.useEffect)(function () {
if (activePage !== 1) {
(0, _utils.tryFocus)(progressDivRef.current, 100);
}
}, [activePage]);
if ((_properties$advanced = properties.advanced) !== null && _properties$advanced !== void 0 && _properties$advanced.showProgressbar && (_properties$advanced2 = properties.advanced) !== null && _properties$advanced2 !== void 0 && _properties$advanced2.toggleDotview) {
return (0, _preact.h)(_elements.HandleTabIndex, {
className: "progress dot-layout",
id: "progress",
"aria-label": "Page ".concat(activePage, " of ").concat(pageCount),
ref: progressDivRef
}, Object.keys(pageMap).map(function (pageKey) {
var pageNumber = Number(pageKey);
return (0, _preact.h)("div", {
style: {
width: "".concat(Math.floor(100 / (pageCount - 1)), "%")
},
className: "progress-wrap ".concat(activePage > pageNumber ? 'completed' : '', " ").concat(pageNumber === activePage ? 'active' : '', " ").concat(pageNumber === pageCount ? 'last' : ''),
"data-pagecount": pageNumber
}, (0, _preact.h)("div", {
className: "progress-dot"
}, activePage > pageNumber ? (0, _preact.h)(_SvgIcon["default"], {
icon: "check",
alt: "check icon"
}) : pageNumber));
}));
}
return (0, _preact.h)("div", {
id: "progress",
className: "progress bar-layout"
}, (0, _preact.h)(_elements.HandleTabIndex, {
ref: progressDivRef,
id: "progressBar",
"aria-label": "Page ".concat(activePage, " of ").concat(pageCount),
className: "bar",
style: {
width: "".concat(formCompletionPercentage, "%")
}
}));
}
//# sourceMappingURL=Progress.js.map