decentraland-ui
Version:
Decentraland's UI components and styles
34 lines (33 loc) • 2.46 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MultiStep = void 0;
var react_1 = __importDefault(require("react"));
var classnames_1 = __importDefault(require("classnames"));
var Icon_1 = __importDefault(require("semantic-ui-react/dist/commonjs/elements/Icon"));
var Button_1 = require("../Button/Button");
var Loader_1 = require("../Loader/Loader");
require("./MultiStep.css");
function MultiStep(_a) {
var steps = _a.steps, currentStep = _a.currentStep;
return (react_1.default.createElement("div", { className: "ui-multi-step", "data-testid": "multi-step" }, steps.map(function (step, index) {
var showAction = step.action && currentStep <= index && !step.isLoading;
var isDisabled = index > currentStep;
return (react_1.default.createElement("div", { key: "step-".concat(index), "data-testid": step.testId || "step-".concat(index), className: (0, classnames_1.default)('step-container', {
disabled: isDisabled
}) },
react_1.default.createElement("div", null,
react_1.default.createElement("span", { className: "step-position" }, index + 1)),
react_1.default.createElement("div", { className: "step-info" },
react_1.default.createElement("p", { className: "step-title" }, step.title),
step.description ? (react_1.default.createElement("p", { className: "step-description" }, step.description)) : null,
showAction ? (react_1.default.createElement("div", { className: "step-action-container" },
react_1.default.createElement(Button_1.Button, { primary: true, onClick: step.onActionClick, className: "step-action", disabled: isDisabled }, step.action),
step.message ? react_1.default.createElement("span", null, step.message) : null)) : (react_1.default.createElement("div", { className: "step-message" },
step.isLoading ? (react_1.default.createElement(Loader_1.Loader, { size: "small", active: true, "data-testid": "step-loader" })) : (react_1.default.createElement(Icon_1.default, { className: "check-icon", name: "check" })),
step.message ? react_1.default.createElement("span", null, step.message) : null)))));
})));
}
exports.MultiStep = MultiStep;