synapse-react-client/dist/containers/synapse_form_wrapper/StepsSideNav.js

[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = (0, tslib_1.__importStar)(require("react"));
var types_1 = require("./types");
var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
function StepsSideNav(props) {
    var nonChildSteps = props.stepList.filter(function (step) { return step.child !== true; });
    var getIcon = function (state, isExcluded, isStatic, isSubmit) {
        var iconDef = free_solid_svg_icons_1.faCircle;
        var flip = undefined;
        if (isStatic || isSubmit) {
            return {
                iconDef: iconDef,
                flip: flip,
            };
        }
        if (isExcluded) {
            iconDef = free_solid_svg_icons_1.faBan;
            flip = 'horizontal';
        }
        else if (state === types_1.StepStateEnum.COMPLETED) {
            iconDef = free_solid_svg_icons_1.faCheckCircle;
        }
        else if (state === types_1.StepStateEnum.ERROR) {
            iconDef = free_solid_svg_icons_1.faExclamationCircle;
        }
        return { iconDef: iconDef, flip: flip };
    };
    var getItemClass = function (isInProgress, isStatic) {
        if (isStatic === void 0) { isStatic = false; }
        var liClassName = 'item';
        if (isInProgress) {
            liClassName = liClassName + " pointed ";
        }
        if (isStatic) {
            liClassName = liClassName + " static";
        }
        return liClassName;
    };
    var getListItem = function (step, isWizard, isRenderChild) {
        if (isRenderChild === void 0) { isRenderChild = false; }
        if (!step || (step.child && !isRenderChild)) {
            return React.createElement(React.Fragment, null);
        }
        var renderStepName = function (step, isWizard, callback) {
            if (!step.inProgress && (!isWizard || !!step.final)) {
                return (React.createElement("button", { className: "btn btn-link", onClick: function () { return callback(step); } }, step.title));
            }
            else {
                return React.createElement("span", null, step.title);
            }
        };
        var icon = getIcon(step.state, step.excluded, step.static, step.final);
        var itemClass = getItemClass(step.inProgress, step.static);
        return (React.createElement("div", { className: itemClass },
            React.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: icon.iconDef, flip: icon.flip }),
            renderStepName(step, isWizard, props.onStepChange)));
    };
    return (React.createElement("div", { className: "SRC-menuLayout json-forms-menu", style: { flex: '1' } },
        React.createElement("ul", null, nonChildSteps.map(function (step, i) {
            return (React.createElement("li", { className: "item-wrap", key: i + step.id },
                getListItem(step, !!props.isWizardMode),
                step.children && step.children.length > 0 && (React.createElement("div", { className: "subMenu" },
                    React.createElement("ul", null, step.children &&
                        step.children.map(function (stepChildId, j) {
                            var childStep = props.stepList.find(function (step) { return step.id === stepChildId; });
                            return typeof childStep === 'undefined' ? (React.createElement(React.Fragment, null)) : (React.createElement("li", { className: "item-wrap", key: j + stepChildId }, getListItem(childStep, !!props.isWizardMode, true)));
                        }))))));
        }))));
}
exports.default = StepsSideNav;
//# sourceMappingURL=StepsSideNav.js.map