@up-group/react-controls/dist/Components/Containers/NavTab/UpNavTap.js

We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get

"use strict";
var __extends = (this && this.__extends) || (function () {
    var 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 function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var UpNavTab = (function (_super) {
    __extends(UpNavTab, _super);
    function UpNavTab(p, c) {
        var _this = _super.call(this, p, c) || this;
        _this.selectTabKey = function (tabKey) {
            _this.setState({ selectedTabKey: tabKey });
        };
        _this.state = {
            selectedTabKey: _this.props.tabs.length != 0 ? 0 : -1
        };
        return _this;
    }
    UpNavTab.prototype.render = function () {
        var _this = this;
        if (this.props.loadType === "onShow") {
            var contents = this.props.tabs.filter(function (v, i) { return i === _this.state.selectedTabKey; });
            var content = contents.length != 0 ? contents[0].content : null;
            return React.createElement("div", null,
                React.createElement(TabHeads, { selectTabKey: this.selectTabKey, heads: this.props.tabs, selectedTabKey: this.state.selectedTabKey }),
                content);
        }
        else if (this.props.loadType === "onLoad") {
            var a = this.props.tabs.map(function (v, i) {
                React.createElement("div", { key: i, style: { display: i === _this.state.selectedTabKey ? "" : "none" } }, v);
            });
            return React.createElement("div", null,
                React.createElement(TabHeads, { selectTabKey: this.selectTabKey, heads: this.props.tabs, selectedTabKey: this.state.selectedTabKey }),
                React.createElement(TabContents, { loadType: this.props.loadType, selectedTabKey: this.state.selectedTabKey, contents: this.props.tabs }));
        }
    };
    UpNavTab.defaultProps = {
        loadType: "onLoad",
        tabs: []
    };
    return UpNavTab;
}(React.Component));
exports.default = UpNavTab;
var TabContents = (function (_super) {
    __extends(TabContents, _super);
    function TabContents(p, c) {
        var _this = _super.call(this, p, c) || this;
        _this.state = {};
        return _this;
    }
    TabContents.prototype.render = function () {
        var _this = this;
        var contents = this.props.contents.map(function (v, i) { return React.createElement(TAbContent, { loadType: _this.props.loadType, selectedTabKey: _this.props.selectedTabKey, tab: v, key: i, tabKey: i }); });
        return React.createElement("div", null, contents);
    };
    return TabContents;
}(React.Component));
exports.TabContents = TabContents;
var TAbContent = (function (_super) {
    __extends(TAbContent, _super);
    function TAbContent(p, c) {
        var _this = _super.call(this, p, c) || this;
        _this.state = {};
        return _this;
    }
    TAbContent.prototype.render = function () {
        var style = {};
        if (this.props.selectedTabKey != this.props.tabKey) {
            style.display = "none";
        }
        return React.createElement("div", { style: style }, this.props.tab.content);
    };
    return TAbContent;
}(React.Component));
exports.TAbContent = TAbContent;
var TabHeads = (function (_super) {
    __extends(TabHeads, _super);
    function TabHeads(p, c) {
        var _this = _super.call(this, p, c) || this;
        _this.state = {};
        return _this;
    }
    TabHeads.prototype.render = function () {
        var _this = this;
        var heads = this.props.heads.map(function (v, i) { return React.createElement(TabHead, { selectTabKey: _this.props.selectTabKey, tab: v, key: i, tabKey: i, selectedTabKey: _this.props.selectedTabKey }); });
        var headsStyle = { marginBotom: 10, display: "flex", borderBottom: "1px solid #ddd" };
        return React.createElement("div", { style: headsStyle }, heads);
    };
    return TabHeads;
}(React.Component));
exports.TabHeads = TabHeads;
var TabHead = (function (_super) {
    __extends(TabHead, _super);
    function TabHead(p, c) {
        var _this = _super.call(this, p, c) || this;
        _this.state = {};
        return _this;
    }
    TabHead.prototype.render = function () {
        var _this = this;
        var style = {
            marginRight: 2,
            position: "relative",
            display: "block",
            padding: "10px 15px",
            float: "left",
            cursor: "pointer",
            borderRadius: "4px 4px 0 0",
            backgroundColor: "white"
        };
        if (this.props.selectedTabKey == this.props.tabKey) {
            style.borderTop = "1px solid #ddd";
            style.borderLeft = "1px solid #ddd";
            style.borderRight = "1px solid #ddd";
        }
        return React.createElement("div", { onClick: function () { _this.props.selectTabKey(_this.props.tabKey); }, style: style }, this.props.tab.head);
    };
    return TabHead;
}(React.Component));
exports.TabHead = TabHead;
//# sourceMappingURL=UpNavTap.js.map