synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
38 lines • 1.93 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var react_bootstrap_1 = require("react-bootstrap");
var PageProgress = function (props) {
var barColor = props.barColor, barPercent = props.barPercent, backBtnLabel = props.backBtnLabel, forwardBtnLabel = props.forwardBtnLabel, forwardBtnActive = props.forwardBtnActive, backBtnCallback = props.backBtnCallback, forwardBtnCallback = props.forwardBtnCallback;
var _a = (0, react_1.useState)(0), progressPercent = _a[0], setProgressPercent = _a[1];
var mounted = true;
(0, react_1.useEffect)(function () {
if (mounted) {
setProgressPercent(barPercent);
}
return function () {
mounted = false;
};
}, [barPercent]);
var handleBackButtonClick = function (e) {
if (backBtnCallback) {
backBtnCallback();
}
};
var handleNextButtonClick = function (e) {
if (forwardBtnCallback && forwardBtnActive) {
forwardBtnCallback();
}
};
return (react_1.default.createElement("section", { className: "page-progress" },
react_1.default.createElement("div", { className: "page-progress-percent", style: {
width: progressPercent + "%",
backgroundColor: barColor
} }),
react_1.default.createElement("div", { className: "page-progress-action" },
react_1.default.createElement(react_bootstrap_1.Button, { className: "btn-progress-back", onClick: handleBackButtonClick }, backBtnLabel),
react_1.default.createElement(react_bootstrap_1.Button, { className: forwardBtnActive ? "btn-progress-next-active" : "btn-progress-next", onClick: handleNextButtonClick }, forwardBtnLabel))));
};
exports.default = PageProgress;
//# sourceMappingURL=PageProgress.js.map