@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
58 lines • 4.12 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ProgressStepsIndicator = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var strings = tslib_1.__importStar(require("ControlStrings"));
var Utilities_1 = require("@fluentui/react/lib/Utilities");
var Stack_1 = require("@fluentui/react/lib/Stack");
var Icon_1 = require("@fluentui/react/lib/Icon");
var Label_1 = require("@fluentui/react/lib/Label");
var MessageBar_1 = require("@fluentui/react/lib/MessageBar");
var ProgressStepsIndicatorStyles_1 = require("./ProgressStepsIndicatorStyles");
var ProgressStepsIndicator = function (props) {
var _a = React.useState([]), renderSteps = _a[0], setRenderSteps = _a[1];
var _b = React.useState([]), renderStepsTitle = _b[0], setRenderStepsTitle = _b[1];
var steps = props.steps, currentStep = props.currentStep, themeVariant = props.themeVariant;
var _c = (0, ProgressStepsIndicatorStyles_1.getProgressStepsIndicatorStyles)(themeVariant, currentStep, steps.length), labelStepTitleCurrentStyle = _c.labelStepTitleCurrentStyle, labelStepTitleStyle = _c.labelStepTitleStyle, labelStepStyles = _c.labelStepStyles, stackStepsStyles = _c.stackStepsStyles, componentClasses = _c.componentClasses;
React.useEffect(function () {
(function () {
var _renderSteps = [];
var _renderStepTitle = [];
var _currentStep = currentStep ? currentStep : 0;
if (steps && steps.length) {
steps.map(function (step, i) {
if (_currentStep > i) {
_renderSteps.push(React.createElement(Stack_1.Stack, { key: "".concat(i), horizontal: true },
React.createElement("div", { className: componentClasses.bulletCompleted },
React.createElement(Icon_1.Icon, { iconName: "CheckMark" }))));
_renderStepTitle.push(React.createElement(Label_1.Label, { key: "".concat(i), styles: labelStepTitleStyle }, step.title));
}
if (_currentStep === i) {
_renderSteps.push(React.createElement(Stack_1.Stack, { key: "".concat(i), horizontal: true },
React.createElement("div", { key: "".concat(i), className: componentClasses.bulletCurrent },
React.createElement(Label_1.Label, { styles: labelStepStyles }, i + 1))));
_renderStepTitle.push(React.createElement(Label_1.Label, { key: "".concat(i), styles: labelStepTitleCurrentStyle }, step.title));
}
if (_currentStep < i) {
_renderSteps.push(React.createElement("div", { key: "".concat(i), className: componentClasses.bullet },
React.createElement(Label_1.Label, { styles: labelStepStyles }, i + 1)));
_renderStepTitle.push(React.createElement(Label_1.Label, { key: "".concat(i), styles: labelStepTitleStyle }, step.title));
}
});
}
setRenderSteps(_renderSteps);
setRenderStepsTitle(_renderStepTitle);
})();
}, [steps, currentStep]);
if (steps && steps.length === 0) {
return React.createElement(MessageBar_1.MessageBar, { messageBarType: MessageBar_1.MessageBarType.info }, strings.ProgressStepsIndicatorNoSteps);
}
return (React.createElement(Utilities_1.Customizer, { settings: { theme: props.themeVariant } },
React.createElement(Stack_1.Stack, { styles: stackStepsStyles },
React.createElement("div", { className: componentClasses.line }),
React.createElement(Stack_1.Stack, { horizontal: true, horizontalAlign: "space-between" }, renderSteps)),
React.createElement(Stack_1.Stack, { horizontal: true, horizontalAlign: "space-between", styles: { root: { marginTop: "7px !important" } } }, renderStepsTitle)));
};
exports.ProgressStepsIndicator = ProgressStepsIndicator;
//# sourceMappingURL=ProgressStepsIndicator.js.map