@revolist/revogrid
Version:
Virtual reactive data grid spreadsheet component - RevoGrid.
126 lines (123 loc) • 4.14 kB
JavaScript
/*!
* Built by Revolist OU ❤️
*/
import { h } from "@stencil/core";
/**
* Contains extra elements for stencil components.
* Performs rendering and updates for external components.
*
* @example
* In Plugins if you want to add extra elements to grid and use stenciljs vnodes reactivity:
* function paginationPanel(this: PaginationPlugin, config: { refresh: () => void }) {
* // use `config.refresh()` for component to re-render
* return h('div')
* }
*
* revogrid.registerVNode = [
* ...existingNodes,
* paginationPanel.bind(this)
* ];
/**
* @internal
*/
export class RevoGridExtra {
constructor() {
/**
* Nodes to render
*/
this.nodes = [];
/**
* Force component to re-render
*/
this.update = 1;
}
/**
* Refreshes the extra component. Useful if you want to manually
* force the component to re-render.
*/
async refresh() {
this.update *= -1;
}
render() {
var _a;
return (_a = this.nodes) === null || _a === void 0 ? void 0 : _a.map(node => {
// Check if node is a function or a stencil component
// If function wrap it in a stencil component with the refresh function
if (typeof node === 'function') {
const config = {};
const getNodes = () => [node({ refresh: () => { var _a; return (_a = config.refresh) === null || _a === void 0 ? void 0 : _a.call(config); } })];
return (h("revogr-extra", { nodes: getNodes(), ref: (el) => {
if (el) {
// Update exclusively for current node
config.refresh = () => {
el.nodes = getNodes();
};
}
} }));
}
return node;
});
}
static get is() { return "revogr-extra"; }
static get properties() {
return {
"nodes": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "(\n | VNode\n | ((c: ExtraNodeFuncConfig) => VNode)\n )[]",
"resolved": "(VNode | ((c: ExtraNodeFuncConfig) => VNode))[]",
"references": {
"VNode": {
"location": "import",
"path": "@stencil/core",
"id": "node_modules::VNode",
"referenceLocation": "VNode"
},
"ExtraNodeFuncConfig": {
"location": "import",
"path": "@type",
"id": "src/types/index.ts::ExtraNodeFuncConfig",
"referenceLocation": "ExtraNodeFuncConfig"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Nodes to render"
},
"getter": false,
"setter": false,
"defaultValue": "[]"
}
};
}
static get states() {
return {
"update": {}
};
}
static get methods() {
return {
"refresh": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Refreshes the extra component. Useful if you want to manually\nforce the component to re-render.",
"tags": []
}
}
};
}
}