@rxdi/ui-kit/grid/grid.component.js

UI Components for building graphql-server website

"use strict";
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 __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GridComponent = void 0;
const lit_html_1 = require("@rxdi/lit-html");
const core_1 = require("@rxdi/core");
const operators_1 = require("rxjs/operators");
const rxjs_1 = require("rxjs");
const services_1 = require("../services");
const styles_1 = require("../styles");
/**
 * @customElement rx-grid
 */
let GridComponent = class GridComponent extends lit_html_1.LitElement {
    constructor() {
        super(...arguments);
        this.$items = (0, rxjs_1.of)([]);
    }
    calculateColumns(width) {
        let columns;
        if (this.columns) {
            return this.columns;
        }
        if (width < 700) {
            columns = 1;
        }
        else if (width < 1000) {
            columns = 2;
        }
        else if (width < 1450) {
            columns = 3;
        }
        else if (width > 1450) {
            columns = 4;
        }
        return columns;
    }
    calculateRows(itemsLength, columns) {
        if (this.rows) {
            return this.rows;
        }
        else {
            return Math.round(itemsLength / columns) + 2;
        }
    }
    calculateTemplateColumns(items, index, columns) {
        const calculated = index * columns;
        const offset = calculated - columns;
        return (0, lit_html_1.html) `
      <div class="flex center">
        ${items.length
            ? (0, lit_html_1.html) `
              ${items
                .slice(offset, calculated)
                .map(item => this.getTemplate(item))}
            `
            : 'No components found'}
      </div>
    `;
    }
    getTemplate(item) {
        if (!item) {
            return (0, lit_html_1.html) ``;
        }
        return (0, lit_html_1.html) `
      ${this.template
            ? this.template(item)
            : (0, lit_html_1.html) `
            ${item}
          `}
      <span class="spacer"></span>
    `;
    }
};
exports.GridComponent = GridComponent;
__decorate([
    (0, core_1.Inject)(services_1.ResponsiveService),
    __metadata("design:type", services_1.ResponsiveService)
], GridComponent.prototype, "responsive", void 0);
__decorate([
    (0, lit_html_1.property)({ type: Number }),
    __metadata("design:type", Number)
], GridComponent.prototype, "fill", void 0);
__decorate([
    (0, lit_html_1.property)({ attribute: false }),
    __metadata("design:type", Object)
], GridComponent.prototype, "$items", void 0);
__decorate([
    (0, lit_html_1.property)({ attribute: false }),
    __metadata("design:type", Function)
], GridComponent.prototype, "template", void 0);
__decorate([
    (0, lit_html_1.property)({ type: Number }),
    __metadata("design:type", Number)
], GridComponent.prototype, "columns", void 0);
__decorate([
    (0, lit_html_1.property)({ type: Number }),
    __metadata("design:type", Number)
], GridComponent.prototype, "rows", void 0);
exports.GridComponent = GridComponent = __decorate([
    (0, lit_html_1.Component)({
        selector: 'rx-grid',
        styles: [styles_1.MAIN_CSS],
        template() {
            return (0, lit_html_1.html) `
      ${(0, lit_html_1.async)((0, rxjs_1.from)((0, rxjs_1.isObservable)(this.$items) ? this.$items : (0, rxjs_1.of)(this.$items))
                .pipe((0, operators_1.map)(items => items.length ? items : Array.from(Array(this.fill).keys())), (0, operators_1.switchMap)(c => (0, rxjs_1.combineLatest)((0, rxjs_1.of)(c), this.responsive.width.pipe((0, operators_1.map)(width => this.calculateColumns(width))))), (0, operators_1.switchMap)(([c, columns]) => (0, rxjs_1.combineLatest)([
                (0, rxjs_1.of)(c),
                (0, rxjs_1.of)(this.calculateRows(c.length, columns)),
                (0, rxjs_1.of)(columns)
            ])))
                .pipe((0, operators_1.map)(([components, rows, columns]) => (0, lit_html_1.html) `
                ${Array.from(Array(rows).keys()).map(i => (0, lit_html_1.html) `
                    <div class="flex">
                      ${this.calculateTemplateColumns(components, i, columns)}
                    </div>
                  `)}
              `)))}
    `;
        }
    })
], GridComponent);
//# sourceMappingURL=grid.component.js.map