Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { observer } from "mobx-react" import React from "react" import { HotTable } from "@handsontable/react" import { action, computed } from "mobx" import { exposeInstanceOnWindow } from "../../clientUtils/Util" import Handsontable from "handsontable" import { OwidTable } from "../../coreTable/OwidTable" import { CoreMatrix } from "../../coreTable/CoreTableConstants" import { registerAllModules } from "handsontable/registry" // Register all Handsontable modules registerAllModules() interface SpreadsheetManager { table: OwidTable } @observer export class Spreadsheet extends React.Component<{ manager: SpreadsheetManager }> { private hotTableComponent = React.createRef<HotTable>() @action.bound private updateFromHot(): void { const newVersion = this.hotTableComponent.current?.hotInstance?.getData() as CoreMatrix if (!newVersion || !this.isChanged(newVersion)) return this.manager.table = new OwidTable(newVersion) } private isChanged(newVersion: CoreMatrix): boolean { return new OwidTable(newVersion).toDelimited() !== this._version } componentDidMount(): void { exposeInstanceOnWindow(this, "spreadsheet") } @computed private get manager(): SpreadsheetManager { return this.props.manager } private _version: string = "" render(): JSX.Element { const { table } = this.manager this._version = table.toDelimited() const data = table.toMatrix() const hotSettings: Handsontable.GridSettings = { afterChange: () => this.updateFromHot(), allowInsertColumn: true, allowInsertRow: true, autoColumnSize: true, colHeaders: false, contextMenu: true, data, height: 250, minSpareRows: 2, minSpareCols: 2, rowHeaders: true, rowHeights: 23, stretchH: "all", width: "100%", wordWrap: false, } return ( <HotTable settings={hotSettings} ref={this.hotTableComponent as any} licenseKey={"non-commercial-and-evaluation"} /> ) } } |