@revolist/revogrid
Version:
Virtual reactive data grid spreadsheet component - RevoGrid.
174 lines (173 loc) • 6.32 kB
JavaScript
/*!
* Built by Revolist OU ❤️
*/
import { h, Host } from "@stencil/core";
import throttle from "lodash/throttle";
import { TMP_SELECTION_BG_CLASS } from "../../utils/consts";
import { getCell, styleByCellProps } from "../overlay/selection.utils";
/**
* Temporary range selection component. Shows temporary range selection.
*/
export class RevogrFocus {
constructor() {
this.onChange = throttle((e) => this.doChange(e), 300);
}
doChange(e) {
e === null || e === void 0 ? void 0 : e.scrollIntoView({
block: 'nearest',
inline: 'nearest',
});
}
componentDidRender() {
if (this.el) {
this.onChange(this.el);
}
}
render() {
const data = this.selectionStore.get('tempRange');
const type = this.selectionStore.get('tempRangeType');
if (!data) {
return;
}
let directionY = 'bottom';
let derectionX = 'right';
const range = this.getRange();
if (!range) {
return;
}
if (data.y < range.y) {
directionY = 'top';
}
if (data.x < range.x) {
derectionX = 'left';
}
const directionClass = `${derectionX} ${directionY}`;
const cell = getCell(data, this.dimensionRow.state, this.dimensionCol.state);
const styles = styleByCellProps(cell);
const props = {
class: {
[TMP_SELECTION_BG_CLASS]: true,
[type || '']: true,
},
style: styles,
hidden: false
};
return (h(Host, Object.assign({}, props), h("div", { class: directionClass, ref: (e) => (this.el = e) })));
}
getRange() {
const range = this.selectionStore.get('range');
if (range) {
return range;
}
const focus = this.selectionStore.get('focus');
if (!focus) {
return null;
}
return Object.assign(Object.assign({}, focus), { x1: focus.x, y1: focus.y });
}
static get is() { return "revogr-temp-range"; }
static get originalStyleUrls() {
return {
"$": ["revogr-temp-range-style.scss"]
};
}
static get styleUrls() {
return {
"$": ["revogr-temp-range-style.css"]
};
}
static get properties() {
return {
"selectionStore": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Observable<SelectionStoreState>",
"resolved": "{ range: RangeArea | null; tempRange: RangeArea | null; tempRangeType: string | null; focus: Cell | null; edit: EditCellStore | null; lastCell: Cell | null; nextFocus: Cell | null; }",
"references": {
"Observable": {
"location": "import",
"path": "../../utils",
"id": "src/utils/index.ts::Observable",
"referenceLocation": "Observable"
},
"SelectionStoreState": {
"location": "import",
"path": "@type",
"id": "src/types/index.ts::SelectionStoreState",
"referenceLocation": "SelectionStoreState"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Selection store, shows current selection and focus"
},
"getter": false,
"setter": false
},
"dimensionRow": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Observable<DimensionSettingsState>",
"resolved": "DimensionSettingsState",
"references": {
"Observable": {
"location": "import",
"path": "../../utils",
"id": "src/utils/index.ts::Observable",
"referenceLocation": "Observable"
},
"DimensionSettingsState": {
"location": "import",
"path": "@type",
"id": "src/types/index.ts::DimensionSettingsState",
"referenceLocation": "DimensionSettingsState"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Dimension row store"
},
"getter": false,
"setter": false
},
"dimensionCol": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Observable<DimensionSettingsState>",
"resolved": "DimensionSettingsState",
"references": {
"Observable": {
"location": "import",
"path": "../../utils",
"id": "src/utils/index.ts::Observable",
"referenceLocation": "Observable"
},
"DimensionSettingsState": {
"location": "import",
"path": "@type",
"id": "src/types/index.ts::DimensionSettingsState",
"referenceLocation": "DimensionSettingsState"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Dimension column store"
},
"getter": false,
"setter": false
}
};
}
}