forked from finos/perspective
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request finos#1927 from finos/datagrid-refactor
Refactor `@finos/perspective-viewer-datagrid`
- Loading branch information
Showing
77 changed files
with
3,678 additions
and
2,160 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| { | ||
| "__GIT_COMMIT__": "d063eaceb4f0a4465a0453456fc287f47c9e9e78", | ||
| "__GIT_COMMIT__": "be50bcdfb1c1160ccc560af452db54446386ffcf", | ||
| "resize_Config_should_show_by_default": "f492628efc5ce5c9e1bab910cf2557c9", | ||
| "resize_Resize_the_container_causes_the_widget_to_resize": "0f8af36778efdff9b9cff3a3b155d2b3", | ||
| "resize_group_by_traitlet_works": "52f47ba2da28aa605a3d55051cf866c1", | ||
| "resize_Config_should_be_hidden_by_default": "a77537b1d9156d296a7b1eef59105d80" | ||
| "resize_Resize_the_container_causes_the_widget_to_resize": "e3c617dd8acc99d2026d4cd2436d66ab", | ||
| "resize_group_by_traitlet_works": "f86409c2ccbdf3613a4aa20fc24cc543", | ||
| "resize_Config_should_be_hidden_by_default": "5ca5a07cbb0d81e16939a622c41575c0" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,47 +1,20 @@ | ||
| import {View} from "@finos/perspective"; | ||
| import {RegularTableElement} from "regular-table"; | ||
| import type {IPerspectiveViewerPlugin} from "@finos/perspective-viewer"; | ||
|
|
||
| declare global { | ||
| interface CustomElementRegistry { | ||
| get( | ||
| tagName: "perspective-viewer-datagrid" | ||
| ): PerspectiveViewerDatagridPluginElement; | ||
| ): HTMLPerspectiveViewerDatagridPluginElement; | ||
|
|
||
| whenDefined( | ||
| tagName: "perspective-viewer-datagrid" | ||
| ): Promise<PerspectiveViewerDatagridPluginElement>; | ||
| // TODO is this needed? | ||
| whenDefined(tagName: "perspective-viewer-datagrid"): Promise<void>; | ||
| } | ||
| } | ||
|
|
||
| export declare class PerspectiveViewerDatagridPluginElement extends HTMLElement { | ||
| public readonly datagrid: RegularTableElement; | ||
|
|
||
| // private methods | ||
| private _toggle_edit_mode(force?: boolean): void; | ||
| private _toggle_scroll_lock(force?: boolean): void; | ||
| private _restore_column_size_overrides(old_sizes: any, cache: boolean); | ||
| private _save_column_size_overrides(): any; | ||
|
|
||
| // getters accessors | ||
| public get name(): string; | ||
| public get select_mode(): string; | ||
| public get min_config_columns(): string; | ||
| public get config_column_names(): string; | ||
| // eslint-disable-next-line @typescript-eslint/no-empty-interface | ||
| interface HTMLPerspectiveViewerDatagridPluginElement | ||
| extends IPerspectiveViewerPlugin {} | ||
|
|
||
| // customElements methods | ||
| protected connectedCallback(): void; | ||
| protected disconnectedCallback(): void; | ||
|
|
||
| // view related methods | ||
| public activate(view: View): Promise<void>; | ||
| public draw(view: View): Promise<void>; | ||
| public update(view: View): Promise<void>; | ||
| public restyle(view: View): Promise<void>; | ||
|
|
||
| // other public methods | ||
| public resize(): Promise<void>; | ||
| public clear(): Promise<void>; | ||
| public delete(): void; | ||
| public save(): Promise<void>; | ||
| public restore(token: unknown): Promise<void>; | ||
| } | ||
| export declare class HTMLPerspectiveViewerDatagridPluginElement | ||
| extends HTMLElement | ||
| implements IPerspectiveViewerPlugin {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
100 changes: 100 additions & 0 deletions
100
packages/perspective-viewer-datagrid/src/js/custom_elements/datagrid.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| /****************************************************************************** | ||
| * | ||
| * Copyright (c) 2017, the Perspective Authors. | ||
| * | ||
| * This file is part of the Perspective library, distributed under the terms of | ||
| * the Apache License 2.0. The full license can be found in the LICENSE file. | ||
| * | ||
| */ | ||
|
|
||
| import {activate} from "../plugin/activate.js"; | ||
| import {restore} from "../plugin/restore.js"; | ||
| import {connectedCallback} from "../plugin/connected"; | ||
| import {save} from "../plugin/save"; | ||
| import {draw} from "../plugin/draw"; | ||
|
|
||
| /** | ||
| * The custom element class for this plugin. The interface methods for this | ||
| */ | ||
| export class HTMLPerspectiveViewerDatagridPluginElement extends HTMLElement { | ||
| constructor() { | ||
| super(); | ||
| this.regular_table = document.createElement("regular-table"); | ||
| this._is_scroll_lock = true; | ||
| } | ||
|
|
||
| connectedCallback() { | ||
| return connectedCallback.call(this); | ||
| } | ||
|
|
||
| disconnectedCallback() { | ||
| this._toolbar.parentElement.removeChild(this._toolbar); | ||
| } | ||
|
|
||
| async activate(view) { | ||
| return await activate.call(this, view); | ||
| } | ||
|
|
||
| get name() { | ||
| return "Datagrid"; | ||
| } | ||
|
|
||
| get category() { | ||
| return "Basic"; | ||
| } | ||
|
|
||
| get select_mode() { | ||
| return "toggle"; | ||
| } | ||
|
|
||
| get min_config_columns() { | ||
| return undefined; | ||
| } | ||
|
|
||
| get config_column_names() { | ||
| return undefined; | ||
| } | ||
|
|
||
| async draw(view) { | ||
| return await draw.call(this, view); | ||
| } | ||
|
|
||
| async update(view) { | ||
| this.model._num_rows = await view.num_rows(); | ||
| await this.regular_table.draw(); | ||
| } | ||
|
|
||
| async resize() { | ||
| if (!this.isConnected || this.offsetParent == null) { | ||
| return; | ||
| } | ||
|
|
||
| if (this._initialized) { | ||
| await this.regular_table.draw(); | ||
| } | ||
| } | ||
|
|
||
| async clear() { | ||
| this.regular_table._resetAutoSize(); | ||
| this.regular_table.clear(); | ||
| } | ||
|
|
||
| save() { | ||
| return save.call(this); | ||
| } | ||
|
|
||
| restore(token) { | ||
| return restore.call(this, token); | ||
| } | ||
|
|
||
| async restyle(view) { | ||
| await this.draw(view); | ||
| } | ||
|
|
||
| delete() { | ||
| if (this.regular_table.table_model) { | ||
| this.regular_table._resetAutoSize(); | ||
| } | ||
| this.regular_table.clear(); | ||
| } | ||
| } |
54 changes: 54 additions & 0 deletions
54
packages/perspective-viewer-datagrid/src/js/custom_elements/toolbar.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| /****************************************************************************** | ||
| * | ||
| * Copyright (c) 2017, the Perspective Authors. | ||
| * | ||
| * This file is part of the Perspective library, distributed under the terms of | ||
| * the Apache License 2.0. The full license can be found in the LICENSE file. | ||
| * | ||
| */ | ||
|
|
||
| import TOOLBAR_STYLE from "../../less/toolbar.less"; | ||
| import {toggle_edit_mode, toggle_scroll_lock} from "../model/toolbar"; | ||
|
|
||
| /** | ||
| * The custom element for this plugin's toolbar, a component which displays in | ||
| * the host `<perspective-viewer>`'s status bar when this plugin is active. | ||
| * In the case of Datagrid, this comprises "Editable" and "Scroll Lock" toggle | ||
| * buttons. | ||
| */ | ||
| export class HTMLPerspectiveViewerDatagridToolbarElement extends HTMLElement { | ||
| connectedCallback() { | ||
| if (this._initialized) { | ||
| return; | ||
| } | ||
|
|
||
| this._initialized = true; | ||
| this.setAttribute("slot", "plugin-settings"); | ||
| this.attachShadow({mode: "open"}); | ||
| this.shadowRoot.innerHTML = ` | ||
| <style> | ||
| ${TOOLBAR_STYLE} | ||
| </style> | ||
| <div id="toolbar"> | ||
| <span id="scroll_lock" class="lock-scroll button"> | ||
| <span>Align Scroll</span> | ||
| </span> | ||
| <span id="edit_mode" class="button"><span>Read Only</span></span> | ||
| </div> | ||
| `; | ||
|
|
||
| const viewer = this.parentElement; | ||
| const plugin = viewer.querySelector("perspective-viewer-datagrid"); | ||
| plugin._scroll_lock = this.shadowRoot.querySelector("#scroll_lock"); | ||
| plugin._scroll_lock.addEventListener("click", () => | ||
| toggle_scroll_lock.call(plugin) | ||
| ); | ||
|
|
||
| plugin._edit_mode = this.shadowRoot.querySelector("#edit_mode"); | ||
| plugin._edit_mode.addEventListener("click", () => { | ||
| toggle_edit_mode.call(plugin); | ||
| plugin.regular_table.draw(); | ||
| viewer.dispatchEvent(new Event("perspective-config-update")); | ||
| }); | ||
| } | ||
| } |
Oops, something went wrong.