@revolist/revogrid
Version:
Virtual reactive data grid spreadsheet component - RevoGrid.
292 lines (291 loc) • 11.2 kB
JavaScript
/*!
* Built by Revolist OU ❤️
*/
import { h, Host } from "@stencil/core";
import { ViewportStore, DataStore } from "../../store/index";
import { ROW_HEADER_TYPE } from "../../utils/consts";
import { RowHeaderRender } from "./row-header-render";
import { calculateRowHeaderSize } from "../../utils/row-header-utils";
import { HEADER_SLOT } from "../revoGrid/viewport.helpers";
/**
* Row headers component
* Visible on the left side of the table
*/
export class RevogrRowHeaders {
constructor() {
/**
* Prevent rendering until job is done.
* Can be used for initial rendering performance improvement.
* When several plugins require initial rendering this will prevent double initial rendering.
*/
this.jobsBeforeRender = [];
}
render() {
const dataViews = [];
const viewport = new ViewportStore('colPinStart');
/** render viewports rows */
let totalLength = 1;
// todo: this part could be optimized to avoid to often re-render dataPorts can be cached
for (let data of this.dataPorts) {
const itemCount = data.dataStore.get('items').length;
// initiate row data
const dataStore = new DataStore(data.type, Object.assign({}, data.dataStore.state));
// initiate column data
const colData = new DataStore('colPinStart');
const column = Object.assign({ cellTemplate: RowHeaderRender(totalLength) }, this.rowHeaderColumn);
colData.updateData([column]);
dataViews.push(h("revogr-data", Object.assign({}, data, { colType: "rowHeaders", jobsBeforeRender: this.jobsBeforeRender, rowClass: this.rowClass, dataStore: dataStore.store, colData: colData.store, viewportCol: viewport.store, readonly: true, range: false })));
totalLength += itemCount;
}
const colSize = calculateRowHeaderSize(totalLength, this.rowHeaderColumn);
viewport.setViewport({
realCount: 1,
virtualSize: 0,
items: [
{
size: colSize,
start: 0,
end: colSize,
itemIndex: 0,
},
],
});
const viewportScroll = {
contentHeight: this.height,
contentWidth: 0,
style: { minWidth: `${colSize}px` },
colType: 'rowHeaders',
ref: (el) => this.elementToScroll.emit(el),
onScrollviewport: (e) => this.scrollViewport.emit(e.detail),
};
const viewportHeader = Object.assign(Object.assign({}, this.headerProp), {
// groups not present on row headers
groups: [], colData: typeof this.rowHeaderColumn === 'object' ? [this.rowHeaderColumn] : [], viewportCol: viewport.store, canResize: false, type: ROW_HEADER_TYPE,
// parent,
slot: HEADER_SLOT
});
return (h(Host, { class: { [ROW_HEADER_TYPE]: true }, key: ROW_HEADER_TYPE }, h("revogr-viewport-scroll", Object.assign({ key: 'c401e82e02e4bdb7afb25f2f49c6776f2e115c81' }, viewportScroll, { "row-header": true }), h("revogr-header", Object.assign({ key: '3c73d27bd96e23a34fc0cf47eda4d2e65751df98' }, viewportHeader)), dataViews)));
}
static get is() { return "revogr-row-headers"; }
static get properties() {
return {
"height": {
"type": "number",
"attribute": "height",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Header height to setup row headers"
},
"getter": false,
"setter": false,
"reflect": false
},
"dataPorts": {
"type": "unknown",
"attribute": "data-ports",
"mutable": false,
"complexType": {
"original": "ViewportData[]",
"resolved": "ViewportData[]",
"references": {
"ViewportData": {
"location": "import",
"path": "@type",
"id": "src/types/index.ts::ViewportData"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Viewport data"
},
"getter": false,
"setter": false
},
"headerProp": {
"type": "unknown",
"attribute": "header-prop",
"mutable": false,
"complexType": {
"original": "Record<string, any>",
"resolved": "{ [x: string]: any; }",
"references": {
"Record": {
"location": "global",
"id": "global::Record"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Header props"
},
"getter": false,
"setter": false
},
"rowClass": {
"type": "string",
"attribute": "row-class",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Row class"
},
"getter": false,
"setter": false,
"reflect": false
},
"resize": {
"type": "boolean",
"attribute": "resize",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Enable resize"
},
"getter": false,
"setter": false,
"reflect": false
},
"rowHeaderColumn": {
"type": "unknown",
"attribute": "row-header-column",
"mutable": false,
"complexType": {
"original": "RowHeaders",
"resolved": "RowHeaders",
"references": {
"RowHeaders": {
"location": "import",
"path": "@type",
"id": "src/types/index.ts::RowHeaders"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Row header column"
},
"getter": false,
"setter": false
},
"additionalData": {
"type": "any",
"attribute": "additional-data",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Additional data to pass to renderer"
},
"getter": false,
"setter": false,
"reflect": false
},
"jobsBeforeRender": {
"type": "unknown",
"attribute": "jobs-before-render",
"mutable": false,
"complexType": {
"original": "Promise<any>[]",
"resolved": "Promise<any>[]",
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Prevent rendering until job is done.\nCan be used for initial rendering performance improvement.\nWhen several plugins require initial rendering this will prevent double initial rendering."
},
"getter": false,
"setter": false,
"defaultValue": "[]"
}
};
}
static get events() {
return [{
"method": "scrollViewport",
"name": "scrollview",
"bubbles": false,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Scroll viewport"
},
"complexType": {
"original": "ViewPortScrollEvent",
"resolved": "{ dimension: DimensionType; coordinate: number; delta?: number | undefined; outside?: boolean | undefined; }",
"references": {
"ViewPortScrollEvent": {
"location": "import",
"path": "@type",
"id": "src/types/index.ts::ViewPortScrollEvent"
}
}
}
}, {
"method": "elementToScroll",
"name": "ref",
"bubbles": false,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Register element to scroll"
},
"complexType": {
"original": "ElementScroll",
"resolved": "ElementScroll",
"references": {
"ElementScroll": {
"location": "import",
"path": "@type",
"id": "src/types/index.ts::ElementScroll"
}
}
}
}];
}
}
//# sourceMappingURL=revogr-row-headers.js.map