@skbkontur/cassandra-distributed-task-queue-ui/components/TaskTimeLine/TimeLine/TimeLine.js

.NET library implementing distributed task queue machinery using Apache Cassandra

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TimeLine = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_ui_1 = require("@skbkontur/react-ui");
const react_1 = tslib_1.__importDefault(require("react"));
const TimeLine_styles_1 = require("./TimeLine.styles");
const TimeLineCycled_1 = require("./TimeLineCycled");
class TimeLine extends react_1.default.Component {
    render() {
        const { children } = this.props;
        return (jsx_runtime_1.jsx("div", Object.assign({ className: TimeLine_styles_1.jsStyles.root(), "data-tid": "InnerTimeLine" }, { children: children }), void 0));
    }
}
exports.TimeLine = TimeLine;
TimeLine.Branch = function TimeLineBranch({ children }) {
    const theme = react_1.default.useContext(react_ui_1.ThemeContext);
    return (jsx_runtime_1.jsxs("div", Object.assign({ className: `${TimeLine_styles_1.jsStyles.root()} ${TimeLine_styles_1.jsStyles.branch()}` }, { children: [jsx_runtime_1.jsx("div", { className: TimeLine_styles_1.jsStyles.lineUp(theme) }, void 0), children] }), void 0));
};
TimeLine.BranchNode = function TimeLineBranchNode({ children }) {
    const branches = react_1.default.useRef(null);
    const line = react_1.default.useRef(null);
    const theme = react_1.default.useContext(react_ui_1.ThemeContext);
    react_1.default.useEffect(() => {
        if (branches.current != null) {
            const children = branches.current.children;
            const lastEntry = children[children.length - 1];
            const lastEntryWidth = lastEntry.clientWidth;
            const currentLine = line.current;
            if (!isNaN(lastEntryWidth) && currentLine != null) {
                currentLine.style.marginRight = (lastEntryWidth - 7).toString() + "px";
            }
        }
    });
    return (jsx_runtime_1.jsxs("div", Object.assign({ className: TimeLine_styles_1.jsStyles.branchNode() }, { children: [jsx_runtime_1.jsx("div", { className: TimeLine_styles_1.jsStyles.horLine(theme), ref: line }, void 0), jsx_runtime_1.jsx("div", Object.assign({ className: TimeLine_styles_1.jsStyles.branchNodes(), ref: branches }, { children: children }), void 0)] }), void 0));
};
TimeLine.Entry = function TimeLineEntry({ children, icon }) {
    const theme = react_1.default.useContext(react_ui_1.ThemeContext);
    return (jsx_runtime_1.jsxs("div", Object.assign({ className: `__root-entry ${TimeLine_styles_1.jsStyles.entry()}` }, { children: [jsx_runtime_1.jsxs("div", Object.assign({ className: TimeLine_styles_1.jsStyles.icon() }, { children: [icon, jsx_runtime_1.jsx("div", { className: `__root-entry-line ${TimeLine_styles_1.jsStyles.line(theme)}` }, void 0)] }), void 0), jsx_runtime_1.jsx("div", Object.assign({ className: `__root-entry-content ${TimeLine_styles_1.jsStyles.content()}` }, { children: children }), void 0)] }), void 0));
};
TimeLine.Cycled = TimeLineCycled_1.TimeLineCycled;
//# sourceMappingURL=TimeLine.js.map