diff --git a/packages/splitview/jest.config.js b/packages/splitview/jest.config.js index 365569141..28f284fd7 100644 --- a/packages/splitview/jest.config.js +++ b/packages/splitview/jest.config.js @@ -1,22 +1,24 @@ -const package = require("./package"); +const { name } = require('./package'); -const baseConfig = require("../../jest.config.base"); +const baseConfig = require('../../jest.config.base'); -console.log("loaded"); +console.log('loaded'); module.exports = { ...baseConfig, - roots: ["/packages/splitview"], - modulePaths: ["/packages/splitview/src"], - displayName: {name: package.name, color: "blue"}, - rootDir: "../../", - collectCoverageFrom:[ - "/packages/splitview/src/**/*.{js,jsx,ts,tsx}", + roots: ['/packages/splitview'], + modulePaths: ['/packages/splitview/src'], + displayName: { name, color: 'blue' }, + rootDir: '../../', + collectCoverageFrom: [ + '/packages/splitview/src/**/*.{js,jsx,ts,tsx}', ], - setupFiles: ["/packages/splitview/src/__tests__/__mocks__/resizeObserver.js"], - coveragePathIgnorePatterns: [ - "/node_modules/", + setupFiles: [ + '/packages/splitview/src/__tests__/__mocks__/resizeObserver.js', ], - modulePathIgnorePatterns: ["/packages/splitview/src/__tests__/__mocks__",], - coverageDirectory: "coverage" -} + coveragePathIgnorePatterns: ['/node_modules/'], + modulePathIgnorePatterns: [ + '/packages/splitview/src/__tests__/__mocks__', + ], + coverageDirectory: 'coverage', +}; diff --git a/packages/splitview/src/api/component.api.ts b/packages/splitview/src/api/component.api.ts index 35c4a5ade..6260f074b 100644 --- a/packages/splitview/src/api/component.api.ts +++ b/packages/splitview/src/api/component.api.ts @@ -20,8 +20,8 @@ import { IGroupPanel } from '../groupview/groupPanel'; import { AddPaneviewCompponentOptions, SerializedPaneview, + IPaneviewComponent, } from '../paneview/paneviewComponent'; -import { IPaneviewComponent } from '../paneview/paneviewComponent'; import { IPaneviewPanel } from '../paneview/paneviewPanel'; import { AddSplitviewComponentOptions, diff --git a/packages/splitview/src/dockview/deserializer.ts b/packages/splitview/src/dockview/deserializer.ts index 06c75fa46..166c78e74 100644 --- a/packages/splitview/src/dockview/deserializer.ts +++ b/packages/splitview/src/dockview/deserializer.ts @@ -28,12 +28,10 @@ export class DefaultDeserializer implements IViewDeserializer { panels.push(panel); } - const group = this.layout.createGroup({ + return this.layout.createGroup({ panels, activePanel: panels.find((p) => p.id === active), id: node.data.id, }); - - return group; } } diff --git a/packages/splitview/src/dockview/dockviewComponent.ts b/packages/splitview/src/dockview/dockviewComponent.ts index 4ab1cd548..0da63fd6c 100644 --- a/packages/splitview/src/dockview/dockviewComponent.ts +++ b/packages/splitview/src/dockview/dockviewComponent.ts @@ -1,9 +1,9 @@ import { getRelativeLocation, SerializedGridObject, + getGridLocation, } from '../gridview/gridview'; import { Position } from '../dnd/droptarget'; -import { getGridLocation } from '../gridview/gridview'; import { tail, sequenceEquals } from '../array'; import { GroupPanel, @@ -744,7 +744,6 @@ export class DockviewComponent } referenceGroup.group.openPanel(groupItem, { index }); - return; } else { const referenceLocation = getGridLocation(referenceGroup.element); const targetLocation = getRelativeLocation( @@ -770,7 +769,7 @@ export class DockviewComponent const targetGroup = this.doRemoveGroup(sourceGroup, { skipActive: true, skipDispose: true, - }) as GroupviewPanel; + }); // after deleting the group we need to re-evaulate the ref location const updatedReferenceLocation = getGridLocation( diff --git a/packages/splitview/src/dockview/options.ts b/packages/splitview/src/dockview/options.ts index f7c4a27d9..46cc3254e 100644 --- a/packages/splitview/src/dockview/options.ts +++ b/packages/splitview/src/dockview/options.ts @@ -9,7 +9,6 @@ import { WatermarkPart, } from '../groupview/types'; import { GroupviewPanel } from '../groupview/v2/groupviewPanel'; -import { IGroupPanelView } from '../react/dockview/v2/defaultGroupPanelView'; import { ISplitviewStyles, Orientation } from '../splitview/core/splitview'; import { FrameworkFactory } from '../types'; diff --git a/packages/splitview/src/dom.ts b/packages/splitview/src/dom.ts index 5448f6d55..85dbf12f6 100644 --- a/packages/splitview/src/dom.ts +++ b/packages/splitview/src/dom.ts @@ -11,8 +11,8 @@ export function watchElementResize( cb: (entry: ResizeObserverEntry) => void ): IDisposable { const observer = new ResizeObserver((entires) => { - const element = entires[0]; - cb(element); + const firstEntry = entires[0]; + cb(firstEntry); }); observer.observe(element); diff --git a/packages/splitview/src/gridview/baseComponentGridview.ts b/packages/splitview/src/gridview/baseComponentGridview.ts index 8c21c2443..7787997a2 100644 --- a/packages/splitview/src/gridview/baseComponentGridview.ts +++ b/packages/splitview/src/gridview/baseComponentGridview.ts @@ -3,9 +3,12 @@ import { getGridLocation, Gridview, IGridView } from './gridview'; import { Position } from '../dnd/droptarget'; import { CompositeDisposable, IValueDisposable } from '../lifecycle'; import { sequentialNumberGenerator } from '../math'; -import { ISplitviewStyles, Orientation } from '../splitview/core/splitview'; +import { + ISplitviewStyles, + Orientation, + Sizing, +} from '../splitview/core/splitview'; import { IPanel } from '../panel/types'; -import { Sizing } from '../splitview/core/splitview'; import { MovementOptions2 } from '../dockview/options'; import { GroupChangeEvent, GroupChangeKind } from '../groupview/v2/component'; diff --git a/packages/splitview/src/gridview/basePanelView.ts b/packages/splitview/src/gridview/basePanelView.ts index 149e563b1..ee909c823 100644 --- a/packages/splitview/src/gridview/basePanelView.ts +++ b/packages/splitview/src/gridview/basePanelView.ts @@ -104,14 +104,17 @@ export abstract class BasePanelView toJSON(): BasePanelViewState { const state = this.api.getState(); + + const params = this.params?.params + ? Object.keys(this.params.params).length > 0 + ? this.params.params + : undefined + : undefined; + return { id: this.id, component: this.component, - params: this.params?.params - ? Object.keys(this.params.params).length > 0 - ? this.params.params - : undefined - : undefined, + params, state: Object.keys(state).length === 0 ? undefined : state, }; } diff --git a/packages/splitview/src/gridview/gridview.ts b/packages/splitview/src/gridview/gridview.ts index 2cb1688d9..005fca5d0 100644 --- a/packages/splitview/src/gridview/gridview.ts +++ b/packages/splitview/src/gridview/gridview.ts @@ -319,7 +319,7 @@ export class Gridview implements IDisposable { ): Node { let result: Node; if (node.type === 'branch') { - const serializedChildren = node.data as ISerializedNode[]; + const serializedChildren = node.data; const children = serializedChildren.map((serializedChild) => { return { node: this._deserializeNode( diff --git a/packages/splitview/src/gridview/gridviewComponent.ts b/packages/splitview/src/gridview/gridviewComponent.ts index 7c1715cd9..825b06e1c 100644 --- a/packages/splitview/src/gridview/gridviewComponent.ts +++ b/packages/splitview/src/gridview/gridviewComponent.ts @@ -1,6 +1,9 @@ -import { getRelativeLocation, SerializedGridObject } from './gridview'; +import { + getRelativeLocation, + SerializedGridObject, + getGridLocation, +} from './gridview'; import { Position } from '../dnd/droptarget'; -import { getGridLocation } from './gridview'; import { tail, sequenceEquals } from '../array'; import { CompositeDisposable } from '../lifecycle'; import { IPanelDeserializer } from '../dockview/deserializer'; @@ -155,7 +158,7 @@ export class GridviewComponent } public fromJSON(data: SerializedGridview, deferComponentLayout?: boolean) { - const { grid, activePanel } = data as SerializedGridview; + const { grid, activePanel } = data; this.gridview.clear(); this.groups.clear(); diff --git a/packages/splitview/src/groupview/groupPanel.ts b/packages/splitview/src/groupview/groupPanel.ts index 06d3bdfd5..8f2e61ef3 100644 --- a/packages/splitview/src/groupview/groupPanel.ts +++ b/packages/splitview/src/groupview/groupPanel.ts @@ -5,18 +5,12 @@ import { CompositeDisposable, IDisposable, } from '../lifecycle'; -import { - HeaderPartInitParameters, - IContentRenderer, - ITabRenderer, -} from './types'; +import { HeaderPartInitParameters } from './types'; import { IPanel, PanelInitParameters, PanelUpdateEvent } from '../panel/types'; import { DockviewApi } from '../api/component.api'; -import { DefaultTab } from '../dockview/components/tab/defaultTab'; import { GroupviewPanel } from './v2/groupviewPanel'; import { GroupChangeKind } from './v2/component'; import { IGroupPanelView } from '../react/dockview/v2/defaultGroupPanelView'; -import { IGridPanelView } from '../gridview/baseComponentGridview'; export interface IGroupPanelInitParameters extends PanelInitParameters, diff --git a/packages/splitview/src/groupview/tab.ts b/packages/splitview/src/groupview/tab.ts index 23e891d69..0067eaaf4 100644 --- a/packages/splitview/src/groupview/tab.ts +++ b/packages/splitview/src/groupview/tab.ts @@ -1,6 +1,6 @@ import { addDisposableListener, Emitter, Event } from '../events'; import { Droptarget, DroptargetEvent } from '../dnd/droptarget'; -import { CompositeDisposable, IDisposable } from '../lifecycle'; +import { CompositeDisposable } from '../lifecycle'; import { DATA_KEY, DragType, diff --git a/packages/splitview/src/groupview/v2/component.ts b/packages/splitview/src/groupview/v2/component.ts index 30fc39914..fc9a2b7c4 100644 --- a/packages/splitview/src/groupview/v2/component.ts +++ b/packages/splitview/src/groupview/v2/component.ts @@ -586,7 +586,7 @@ export class GroupComponent extends CompositeDisposable implements IGroupview { this.tabsContainer.openPanel(panel, index); - this.contentContainer.openPanel(panel!); + this.contentContainer.openPanel(panel); this.tabsContainer.show(); this.contentContainer.show(); diff --git a/packages/splitview/src/groupview/v2/groupviewPanel.ts b/packages/splitview/src/groupview/v2/groupviewPanel.ts index efd71be09..ab86e3021 100644 --- a/packages/splitview/src/groupview/v2/groupviewPanel.ts +++ b/packages/splitview/src/groupview/v2/groupviewPanel.ts @@ -4,11 +4,8 @@ import { GridviewPanelApi, IGridviewPanelApi, } from '../../api/gridviewPanelApi'; -import { GroupComponent, GroupOptions, GroupPanelViewState } from './component'; -import { - GridPanelViewState, - GridviewPanel, -} from '../../gridview/gridviewPanel'; +import { GroupComponent, GroupOptions } from './component'; +import { GridviewPanel } from '../../gridview/gridviewPanel'; interface IGroupApi extends IGridviewPanelApi {} diff --git a/packages/splitview/src/hostedContainer.ts b/packages/splitview/src/hostedContainer.ts index 131b6dbad..e1f377993 100644 --- a/packages/splitview/src/hostedContainer.ts +++ b/packages/splitview/src/hostedContainer.ts @@ -1,5 +1,5 @@ import { trackFocus } from './dom'; -import { addDisposableListener, Emitter, Event } from './events'; +import { Emitter, Event } from './events'; import { IDisposable } from './lifecycle'; export interface HostedContainerOptions { diff --git a/packages/splitview/src/panel/componentFactory.ts b/packages/splitview/src/panel/componentFactory.ts index 0415ff393..6b401baa3 100644 --- a/packages/splitview/src/panel/componentFactory.ts +++ b/packages/splitview/src/panel/componentFactory.ts @@ -1,4 +1,3 @@ -import { Orientation } from '../splitview/core/splitview'; import { FrameworkFactory } from '../types'; export function createComponent( @@ -50,5 +49,5 @@ export function createComponent( ); } - return new Component(id, componentName!) as T; + return new Component(id, componentName!); } diff --git a/packages/splitview/src/paneview/paneview.ts b/packages/splitview/src/paneview/paneview.ts index 5c1d48c8b..3fa3763af 100644 --- a/packages/splitview/src/paneview/paneview.ts +++ b/packages/splitview/src/paneview/paneview.ts @@ -120,8 +120,8 @@ export class Paneview extends CompositeDisposable implements IDisposable { return this.splitview.getViewSize(index); } - public getPanes() { - return this.splitview.getViews() as PaneviewPanel[]; + public getPanes(): PaneviewPanel[] { + return this.splitview.getViews(); } public removePane(index: number) { diff --git a/packages/splitview/src/paneview/paneviewComponent.ts b/packages/splitview/src/paneview/paneviewComponent.ts index da58ab71a..99de0a695 100644 --- a/packages/splitview/src/paneview/paneviewComponent.ts +++ b/packages/splitview/src/paneview/paneviewComponent.ts @@ -272,7 +272,7 @@ export class PaneviewComponent } getPanels(): PaneviewPanel[] { - return this.paneview.getPanes() as PaneviewPanel[]; + return this.paneview.getPanes(); } removePanel(panel: PaneviewPanel) { diff --git a/packages/splitview/src/react/dockview/dockview.tsx b/packages/splitview/src/react/dockview/dockview.tsx index e502d27cc..8a2744642 100644 --- a/packages/splitview/src/react/dockview/dockview.tsx +++ b/packages/splitview/src/react/dockview/dockview.tsx @@ -12,7 +12,6 @@ import { usePortalsLifecycle } from '../react'; import { DockviewApi } from '../../api/component.api'; import { ReactWatermarkPart } from './reactWatermarkPart'; import { PanelCollection } from '../types'; -import { IDisposable } from '../../lifecycle'; import { watchElementResize } from '../../dom'; import { IContentRenderer, ITabRenderer } from '../../groupview/types'; diff --git a/packages/splitview/src/react/paneview/paneview.tsx b/packages/splitview/src/react/paneview/paneview.tsx index 8601097c0..99f0df3af 100644 --- a/packages/splitview/src/react/paneview/paneview.tsx +++ b/packages/splitview/src/react/paneview/paneview.tsx @@ -6,7 +6,7 @@ import { } from '../../paneview/paneviewComponent'; import { usePortalsLifecycle } from '../react'; import { PaneviewApi } from '../../api/component.api'; -import { PanelBody, PanelHeader } from './view'; +import { PanePanelSection } from './view'; import { PanelCollection } from '../types'; import { watchElementResize } from '../../dom'; @@ -66,7 +66,9 @@ export const PaneviewReact: React.FunctionComponent = ( componentId, component: any ) => { - return new PanelHeader(id, component, { addPortal }); + return new PanePanelSection(id, component, { + addPortal, + }); }, }, body: { @@ -75,7 +77,9 @@ export const PaneviewReact: React.FunctionComponent = ( componentId, component: any ) => { - return new PanelBody(id, component, { addPortal }); + return new PanePanelSection(id, component, { + addPortal, + }); }, }, }, diff --git a/packages/splitview/src/react/paneview/view.tsx b/packages/splitview/src/react/paneview/view.tsx index 399adce2e..7baae1de0 100644 --- a/packages/splitview/src/react/paneview/view.tsx +++ b/packages/splitview/src/react/paneview/view.tsx @@ -7,7 +7,7 @@ import { import { ReactPart, ReactPortalStore } from '../react'; import { IPaneviewPanelProps } from './paneview'; -export class PanelBody implements IPaneBodyPart { +export class PanePanelSection implements IPaneBodyPart { private _element: HTMLElement; private part?: ReactPart; @@ -17,58 +17,7 @@ export class PanelBody implements IPaneBodyPart { constructor( public readonly id: string, - private readonly component: React.FunctionComponent< - IPaneviewPanelProps - >, - private readonly reactPortalStore: ReactPortalStore - ) { - this._element = document.createElement('div'); - this._element.style.height = '100%'; - this._element.style.width = '100%'; - } - - public init(parameters: PanePanelComponentInitParameter): void { - this.part = new ReactPart( - this.element, - this.reactPortalStore, - this.component, - { - ...parameters.params, - api: parameters.api, - title: parameters.title, - containerApi: parameters.containerApi, - } - ); - } - - public toJSON() { - return { - id: this.id, - }; - } - - public update(params: PanelUpdateEvent) { - this.part?.update(params.params); - } - - public dispose() { - this.part?.dispose(); - } -} - -export class PanelHeader implements IPaneBodyPart { - private _element: HTMLElement; - private part?: ReactPart; - - get element() { - return this._element; - } - - constructor( - public readonly id: string, - private readonly component: React.FunctionComponent< - IPaneviewPanelProps - >, + private readonly component: React.FunctionComponent, private readonly reactPortalStore: ReactPortalStore ) { this._element = document.createElement('div'); diff --git a/packages/splitview/src/splitview/core/options.ts b/packages/splitview/src/splitview/core/options.ts index 587fc7b4a..071907e82 100644 --- a/packages/splitview/src/splitview/core/options.ts +++ b/packages/splitview/src/splitview/core/options.ts @@ -1,11 +1,6 @@ import { IPanel, PanelInitParameters } from '../../panel/types'; -import { - IView, - SplitViewOptions, - LayoutPriority, - Orientation, -} from './splitview'; -import { Constructor, FrameworkFactory } from '../../types'; +import { IView, SplitViewOptions, LayoutPriority } from './splitview'; +import { FrameworkFactory } from '../../types'; import { SplitviewPanel } from '../splitviewPanel'; import { SplitviewApi } from '../../api/component.api'; diff --git a/packages/splitview/src/splitview/splitviewComponent.ts b/packages/splitview/src/splitview/splitviewComponent.ts index 560c9bcf2..4515cfa56 100644 --- a/packages/splitview/src/splitview/splitviewComponent.ts +++ b/packages/splitview/src/splitview/splitviewComponent.ts @@ -171,7 +171,7 @@ export class SplitviewComponent } getPanels(): SplitviewPanel[] { - return this.splitview.getViews() as SplitviewPanel[]; + return this.splitview.getViews(); } removePanel(panel: SplitviewPanel, sizing?: Sizing) {