@revolist/revogrid
Version:
Virtual reactive data grid spreadsheet component - RevoGrid.
399 lines (398 loc) • 15.6 kB
JavaScript
/*!
* Built by Revolist OU ❤️
*/
import { h, Host, } from "@stencil/core";
import { FOCUS_CLASS } from "../../utils/consts";
import { getCell, styleByCellProps } from "../overlay/selection.utils";
import { getSourceItem } from "../../store/index";
/**
* Focus component. Shows focus layer around the cell that is currently in focus.
* @slot focus-${view.type}-${data.type}. @example focus-rgCol-rgRow
*/
export class RevogrFocus {
constructor() {
this.activeFocus = null;
this.colType = undefined;
this.rowType = undefined;
this.selectionStore = undefined;
this.dimensionRow = undefined;
this.dimensionCol = undefined;
this.dataStore = undefined;
this.colData = undefined;
this.focusTemplate = null;
}
componentDidRender() {
var _a, _b;
const currentFocus = this.selectionStore.get('focus');
if (((_a = this.activeFocus) === null || _a === void 0 ? void 0 : _a.x) === (currentFocus === null || currentFocus === void 0 ? void 0 : currentFocus.x) &&
((_b = this.activeFocus) === null || _b === void 0 ? void 0 : _b.y) === (currentFocus === null || currentFocus === void 0 ? void 0 : currentFocus.y)) {
return;
}
this.activeFocus = currentFocus;
if (currentFocus && this.el) {
const beforeScrollIn = this.beforeScrollIntoView.emit({ el: this.el });
if (!beforeScrollIn.defaultPrevented) {
this.el.scrollIntoView({
block: 'nearest',
inline: 'nearest',
});
}
const model = getSourceItem(this.dataStore, currentFocus.y);
const column = getSourceItem(this.colData, currentFocus.x);
this.afterFocus.emit({
model,
column,
rowType: this.rowType,
colType: this.colType,
rowIndex: currentFocus.y,
colIndex: currentFocus.x,
});
}
}
render() {
var _a;
const editCell = this.selectionStore.get('edit');
if (editCell) {
return;
}
const focusCell = this.selectionStore.get('focus');
if (!focusCell) {
return;
}
const event = this.beforeFocusRender.emit({
range: Object.assign(Object.assign({}, focusCell), { x1: focusCell.x, y1: focusCell.y }),
rowType: this.rowType,
colType: this.colType,
rowDimension: Object.assign({}, this.dimensionRow.state),
colDimension: Object.assign({}, this.dimensionCol.state),
});
if (event.defaultPrevented) {
return h("slot", null);
}
const { detail } = event;
const cell = getCell(detail.range, event.detail.rowDimension, event.detail.colDimension);
const styles = styleByCellProps(cell);
const extra = (_a = this.focusTemplate) === null || _a === void 0 ? void 0 : _a.call(this, h, detail);
const props = {
class: { [FOCUS_CLASS]: true },
style: styles,
};
return (h(Host, Object.assign({}, props), h("slot", null), extra));
}
static get is() { return "revogr-focus"; }
static get originalStyleUrls() {
return {
"$": ["revogr-focus-style.scss"]
};
}
static get styleUrls() {
return {
"$": ["revogr-focus-style.css"]
};
}
static get properties() {
return {
"colType": {
"type": "string",
"mutable": false,
"complexType": {
"original": "DimensionCols",
"resolved": "\"colPinEnd\" | \"colPinStart\" | \"rgCol\"",
"references": {
"DimensionCols": {
"location": "import",
"path": "@type",
"id": "src/types/index.ts::DimensionCols"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Column type"
},
"getter": false,
"setter": false,
"attribute": "col-type",
"reflect": false
},
"rowType": {
"type": "string",
"mutable": false,
"complexType": {
"original": "DimensionRows",
"resolved": "\"rgRow\" | \"rowPinEnd\" | \"rowPinStart\"",
"references": {
"DimensionRows": {
"location": "import",
"path": "@type",
"id": "src/types/index.ts::DimensionRows"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Row type"
},
"getter": false,
"setter": false,
"attribute": "row-type",
"reflect": false
},
"selectionStore": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Observable<SelectionStoreState>",
"resolved": "ObservableMap<SelectionStoreState>",
"references": {
"Observable": {
"location": "import",
"path": "../../utils",
"id": "src/utils/index.ts::Observable"
},
"SelectionStoreState": {
"location": "import",
"path": "@type",
"id": "src/types/index.ts::SelectionStoreState"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Selection, range, focus for selection"
},
"getter": false,
"setter": false
},
"dimensionRow": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Observable<DimensionSettingsState>",
"resolved": "ObservableMap<DimensionSettingsState>",
"references": {
"Observable": {
"location": "import",
"path": "../../utils",
"id": "src/utils/index.ts::Observable"
},
"DimensionSettingsState": {
"location": "import",
"path": "@type",
"id": "src/types/index.ts::DimensionSettingsState"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Dimension settings Y"
},
"getter": false,
"setter": false
},
"dimensionCol": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Observable<DimensionSettingsState>",
"resolved": "ObservableMap<DimensionSettingsState>",
"references": {
"Observable": {
"location": "import",
"path": "../../utils",
"id": "src/utils/index.ts::Observable"
},
"DimensionSettingsState": {
"location": "import",
"path": "@type",
"id": "src/types/index.ts::DimensionSettingsState"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Dimension settings X"
},
"getter": false,
"setter": false
},
"dataStore": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Observable<DSourceState<DataType, DimensionRows>>",
"resolved": "ObservableMap<DSourceState<DataType, DimensionRows>>",
"references": {
"Observable": {
"location": "import",
"path": "../../utils",
"id": "src/utils/index.ts::Observable"
},
"DSourceState": {
"location": "import",
"path": "@store",
"id": "src/store/index.ts::DSourceState"
},
"DataType": {
"location": "import",
"path": "@type",
"id": "src/types/index.ts::DataType"
},
"DimensionRows": {
"location": "import",
"path": "@type",
"id": "src/types/index.ts::DimensionRows"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Data rows source"
},
"getter": false,
"setter": false
},
"colData": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Observable<DSourceState<ColumnRegular, DimensionCols>>",
"resolved": "ObservableMap<DSourceState<ColumnRegular, DimensionCols>>",
"references": {
"Observable": {
"location": "import",
"path": "../../utils",
"id": "src/utils/index.ts::Observable"
},
"DSourceState": {
"location": "import",
"path": "@store",
"id": "src/store/index.ts::DSourceState"
},
"ColumnRegular": {
"location": "import",
"path": "@type",
"id": "src/types/index.ts::ColumnRegular"
},
"DimensionCols": {
"location": "import",
"path": "@type",
"id": "src/types/index.ts::DimensionCols"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Column source"
},
"getter": false,
"setter": false
},
"focusTemplate": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "FocusTemplateFunc | null",
"resolved": "((createElement: HyperFunc<VNode>, detail: FocusRenderEvent) => any) | null",
"references": {
"FocusTemplateFunc": {
"location": "import",
"path": "@type",
"id": "src/types/index.ts::FocusTemplateFunc"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Focus template custom function. Can be used to render custom focus layer."
},
"getter": false,
"setter": false,
"defaultValue": "null"
}
};
}
static get events() {
return [{
"method": "beforeFocusRender",
"name": "beforefocusrender",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Before focus render event.\nCan be prevented by event.preventDefault().\nIf preventDefault used slot will be rendered."
},
"complexType": {
"original": "FocusRenderEvent",
"resolved": "FocusRenderEvent",
"references": {
"FocusRenderEvent": {
"location": "import",
"path": "@type",
"id": "src/types/index.ts::FocusRenderEvent"
}
}
}
}, {
"method": "beforeScrollIntoView",
"name": "beforescrollintoview",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Before focus changed verify if it's in view and scroll viewport into this view\nCan be prevented by event.preventDefault()"
},
"complexType": {
"original": "{ el: HTMLElement }",
"resolved": "{ el: HTMLElement; }",
"references": {
"HTMLElement": {
"location": "global",
"id": "global::HTMLElement"
}
}
}
}, {
"method": "afterFocus",
"name": "afterfocus",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Used to setup properties after focus was rendered"
},
"complexType": {
"original": "FocusAfterRenderEvent",
"resolved": "FocusAfterRenderEvent",
"references": {
"FocusAfterRenderEvent": {
"location": "import",
"path": "@type",
"id": "src/types/index.ts::FocusAfterRenderEvent"
}
}
}
}];
}
static get elementRef() { return "el"; }
}
//# sourceMappingURL=revogr-focus.js.map