ukelli-ui/core/steps/steps.js

Base on React's UI lib. Make frontend's dev simpler and faster.

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import React from 'react';
import Step from './step';
var classMapper = {
    center: 'c',
    start: 's',
    end: 'e',
    between: 'b',
    around: 'around',
};
var Steps = /** @class */ (function (_super) {
    __extends(Steps, _super);
    function Steps() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Steps.prototype.render = function () {
        var _a = this.props, children = _a.children, activeIdx = _a.activeIdx, justify = _a.justify, className = _a.className;
        var layoutClass = "j-c-" + (classMapper[justify] || justify);
        var childLen = Array.isArray(children) ? children.length : 0;
        return (React.createElement("div", { className: "steps-container layout " + layoutClass + " " + className }, React.Children.map(children, function (child, idx) {
            var isActive = activeIdx === idx;
            var isChecked = activeIdx > idx;
            var StepCom = React.cloneElement(child, {
                idx: idx,
                isActive: isActive,
                isChecked: isChecked,
                style: {
                    maxWidth: 100 / childLen + "%"
                }
            });
            var needLine = idx < childLen - 1;
            return (React.createElement(React.Fragment, null,
                StepCom,
                needLine ? React.createElement("span", { className: "line" }) : null));
        })));
    };
    Steps.Step = Step;
    Steps.defaultProps = {
        activeIdx: 0,
        justify: 'start',
        className: '',
    };
    return Steps;
}(React.PureComponent));
export default Steps;