preact-material-components/esm/Drawer/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;
};
import { MDCDrawer } from '@material/drawer';
import { bind } from 'bind-decorator';
import { h } from 'preact';
import MaterialComponent from '../Base/MaterialComponent';
import { ListLinkItem } from '../List';
export class DrawerHeader extends MaterialComponent {
    constructor() {
        super(...arguments);
        this.componentName = 'drawer__header';
        this.mdcProps = [];
    }
    materialDom(props) {
        return (h("header", Object.assign({ ref: this.setControlRef }, props),
            h("div", { className: "mdc-drawer__header-content" }, props.children)));
    }
}
export class DrawerContent extends MaterialComponent {
    constructor() {
        super(...arguments);
        this.componentName = 'drawer__content';
        this.mdcProps = [];
    }
    materialDom(props) {
        return (h("div", { class: "mdc-drawer__content" },
            h("nav", Object.assign({ className: "mdc-list", ref: this.setControlRef }, props), props.children)));
    }
}
export class DrawerItem extends ListLinkItem {
    materialDom(props) {
        const returnedNode = super.materialDom(props);
        /* Logic to add selected class */
        if (props.selected) {
            // @ts-ignore
            (returnedNode.props || returnedNode.attributes).className =
                'mdc-list-item--activated';
        }
        return returnedNode;
    }
}
export class Drawer extends MaterialComponent {
    constructor() {
        super(...arguments);
        this.componentName = 'drawer-container';
        this.mdcProps = [];
        this.mdcNotifyProps = ['open'];
    }
    componentDidMount() {
        super.componentDidMount();
        if (this.control && (this.props.modal || this.props.dismissible)) {
            this.MDComponent = new MDCDrawer(this.control);
            this.MDComponent.listen('MDCDrawer:opened', this.onOpen);
            this.MDComponent.listen('MDCDrawer:closed', this.onClose);
        }
    }
    onOpen(e) {
        if (this.props.onOpen) {
            this.props.onOpen(e);
        }
    }
    onClose(e) {
        if (this.props.onClose) {
            this.props.onClose(e);
        }
    }
    materialDom(props) {
        const classes = ['mdc-drawer'];
        // cant use mdcProps cuz classes need to be on the inner child and not on root level
        if (props.modal) {
            classes.push('mdc-drawer--modal');
        }
        else if (props.dismissible) {
            classes.push('mdc-drawer--dismissible');
        }
        return (h("div", null,
            h("aside", Object.assign({ class: classes.join(' '), ref: this.setControlRef }, props), props.children),
            props.modal && h("div", { class: "mdc-drawer-scrim" })));
    }
}
Drawer.DrawerContent = DrawerContent;
Drawer.DrawerHeader = DrawerHeader;
Drawer.DrawerItem = DrawerItem;
__decorate([
    bind
], Drawer.prototype, "onOpen", null);
__decorate([
    bind
], Drawer.prototype, "onClose", null);
export default class default_1 extends Drawer {
}
default_1.DrawerContent = DrawerContent;
default_1.DrawerHeader = DrawerHeader;
default_1.DrawerItem = DrawerItem;
//# sourceMappingURL=index.js.map