preact-material-components/esm/Tabs/index.js

preact wrapper for "Material Components for the web"

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { MDCTabBar, MDCTabBarScroller } from '@material/tabs';
import { bind } from 'bind-decorator';
import { h } from 'preact';
import MaterialComponent from '../Base/MaterialComponent';
/*
 * Default props for tabs
 */
const defaultProps = {
    activeTabIndex: 0
};
export class TabBarScroller extends MaterialComponent {
    constructor() {
        super(...arguments);
        this.componentName = 'tab-bar-scroller';
        this.mdcProps = [];
    }
    componentDidMount() {
        super.componentDidMount();
        if (this.control) {
            this.MDComponent = new MDCTabBarScroller(this.control);
            setActiveTabIndex(defaultProps, this.props, this.MDComponent.tabBar);
        }
    }
    componentWillUnmount() {
        super.componentWillUnmount();
        if (this.MDComponent) {
            this.MDComponent.destroy();
        }
    }
    componentWillReceiveProps(nextProps) {
        super.componentWillReceiveProps(nextProps);
        if (this.MDComponent) {
            setActiveTabIndex(this.props, nextProps, this.MDComponent.tabBar);
        }
    }
    materialDom(props) {
        return (h("div", Object.assign({}, props, { ref: this.setControlRef }),
            h("div", { className: "mdc-tab-bar-scroller__indicator mdc-tab-bar-scroller__indicator--back" },
                h("a", { className: "mdc-tab-bar-scroller__indicator__inner material-icons", href: "#", "aria-label": "scroll back button" }, "navigate_before")),
            h("div", { className: "mdc-tab-bar-scroller__scroll-frame" }, props.children),
            h("div", { className: "mdc-tab-bar-scroller__indicator mdc-tab-bar-scroller__indicator--forward" },
                h("a", { className: "mdc-tab-bar-scroller__indicator__inner material-icons", href: "#", "aria-label": "scroll forward button" }, "navigate_next"))));
    }
}
__decorate([
    bind
], TabBarScroller.prototype, "materialDom", null);
export class TabBarScrollerTabs extends MaterialComponent {
    constructor() {
        super(...arguments);
        this.componentName = 'tab-bar';
        this.mdcProps = ['icon-tab-bar', 'icons-with-text'];
    }
    materialDom(_a) {
        var { className } = _a, props = __rest(_a, ["className"]);
        return (h("nav", Object.assign({ role: 'tablist', className: "mdc-tab-bar-scroller__scroll-frame__tabs" }, props, { ref: this.setControlRef }),
            props.children,
            h("span", { class: "mdc-tab-bar__indicator" })));
    }
}
__decorate([
    bind
], TabBarScrollerTabs.prototype, "materialDom", null);
export class Tab extends MaterialComponent {
    constructor() {
        super(...arguments);
        this.componentName = 'tab';
        this.mdcProps = ['active'];
    }
    materialDom(props) {
        return (h("a", Object.assign({ role: "tab" }, props, { ref: this.setControlRef }), props.children));
    }
}
__decorate([
    bind
], Tab.prototype, "materialDom", null);
export class TabIconLabel extends MaterialComponent {
    constructor() {
        super(...arguments);
        this.componentName = 'tab__icon-text';
        this.mdcProps = [];
    }
    materialDom(props) {
        return (h("span", Object.assign({}, props, { ref: this.setControlRef }), props.children));
    }
}
__decorate([
    bind
], TabIconLabel.prototype, "materialDom", null);
/*
 * Function to add declarative opening/closing to drawer
 */
function setActiveTabIndex(oldprops, newprops, tabs) {
    if (oldprops.activeTabIndex &&
        newprops.activeTabIndex &&
        oldprops.activeTabIndex !== newprops.activeTabIndex) {
        tabs.activeTabIndex = newprops.activeTabIndex;
    }
}
export class Tabs extends MaterialComponent {
    constructor() {
        super(...arguments);
        this.componentName = 'tab-bar';
        this.mdcProps = ['icon-tab-bar', 'icons-with-text'];
        this.mdcNotifyProps = ['activeTabIndex'];
    }
    componentDidMount() {
        super.componentDidMount();
        if (this.control) {
            this.MDComponent = new MDCTabBar(this.control);
        }
        this.afterComponentDidMount();
    }
    componentWillUnmount() {
        super.componentWillUnmount();
        if (this.MDComponent) {
            this.MDComponent.destroy();
        }
    }
    materialDom(props) {
        return (h("nav", Object.assign({ role: 'tablist' }, props, { ref: this.setControlRef }),
            props.children,
            h("span", { class: "mdc-tab-bar__indicator" })));
    }
}
Tabs.TabBarScroller = TabBarScroller;
Tabs.TabBarScrollerTabs = TabBarScrollerTabs;
Tabs.Tab = Tab;
Tabs.TabIconLabel = TabIconLabel;
__decorate([
    bind
], Tabs.prototype, "materialDom", null);
export default Tabs;
//# sourceMappingURL=index.js.map