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

preact wrapper for "Material Components for the web"

import { h } from 'preact';
import MaterialComponent from '../Base/MaterialComponent';
export class LayoutGridInner extends MaterialComponent {
    constructor() {
        super(...arguments);
        this.componentName = 'layout-grid__inner';
        this.mdcProps = [];
    }
    materialDom(props) {
        return (h("div", Object.assign({ ref: this.setControlRef }, props), props.children));
    }
}
export class LayoutGridCell extends MaterialComponent {
    constructor() {
        super(...arguments);
        this.componentName = 'layout-grid__cell';
        this.mdcProps = [];
    }
    static createClassName(props) {
        const baseClass = 'mdc-layout-grid__cell--';
        const classes = [];
        if (props[LayoutGridCell.propsDict.cols]) {
            classes.push(`${baseClass}span-${props[LayoutGridCell.propsDict.cols]}`);
        }
        if (props[LayoutGridCell.propsDict.desktop]) {
            classes.push(`${baseClass}span-${props[LayoutGridCell.propsDict.desktop]}-desktop`);
        }
        if (props[LayoutGridCell.propsDict.tablet]) {
            classes.push(`${baseClass}span-${props[LayoutGridCell.propsDict.tablet]}-tablet`);
        }
        if (props[LayoutGridCell.propsDict.phone]) {
            classes.push(`${baseClass}span-${props[LayoutGridCell.propsDict.phone]}-phone`);
        }
        if (props[LayoutGridCell.propsDict.order]) {
            classes.push(`${baseClass}order-${props[LayoutGridCell.propsDict.order]}`);
        }
        if (props[LayoutGridCell.propsDict.align]) {
            classes.push(`${baseClass}align-${props[LayoutGridCell.propsDict.align]}`);
        }
        return classes.join(' ');
    }
    render(props) {
        const element = super.render(props);
        // remove the extra attributes used for customising this element - keep the DOM clean
        Object.keys(LayoutGridCell.propsDict).forEach(key => 
        // @ts-ignore
        delete (element.props || element.attributes)[LayoutGridCell.propsDict[key]]);
        return element;
    }
    materialDom(props) {
        return (h("div", Object.assign({}, props, { className: LayoutGridCell.createClassName(props), ref: this.setControlRef }), props.children));
    }
}
LayoutGridCell.propsDict = {
    align: 'align',
    cols: 'cols',
    desktop: 'desktopCols',
    order: 'order',
    phone: 'phoneCols',
    tablet: 'tabletCols'
};
export class LayoutGrid extends MaterialComponent {
    constructor() {
        super(...arguments);
        this.componentName = 'layout-grid';
        this.mdcProps = [];
    }
    materialDom(props) {
        return (h("div", Object.assign({ ref: this.setControlRef }, props), props.children));
    }
}
export default class default_1 extends LayoutGrid {
}
default_1.Cell = LayoutGridCell;
default_1.Inner = LayoutGridInner;
//# sourceMappingURL=index.js.map