rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-05-02 17:48:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #103 from mathuo/102-drag-event-on-tab-content-not-bubbled-to-tab

Browse Source 
102 drag event on tab content not bubbled to tab
This commit is contained in:
mathuo 2022-05-10 19:11:54 +01:00 committed by GitHub
commit c249d44017
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 67 additions and 320 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/dockview-demo/src/layout-grid/layoutGrid.tsx
View File

@ -10,7 +10,6 @@ import {
IWatermarkPanelProps, IWatermarkPanelProps,
IDockviewPanel, IDockviewPanel,
PanelCollection, PanelCollection,
DockviewComponents,
} from 'dockview'; } from 'dockview';
import { CustomTab } from './customTab'; import { CustomTab } from './customTab';
import { Settings } from './settingsPanel'; import { Settings } from './settingsPanel';
@ -47,22 +46,10 @@ const Test = (props: IDockviewPanelProps) => {
}, []); }, []);
return ( return (
<DockviewComponents.Panel> <div>
{counter % 4 === 0 && ( <div>{`custom body ${counter}`}</div>
<DockviewComponents.Tab> <button>Toggle</button>
<div>{`custom tab ${counter}`}</div> </div>
</DockviewComponents.Tab>
)}
<DockviewComponents.Content>
<div>
<div>{`custom body ${counter}`}</div>
<button>Toggle</button>
</div>
</DockviewComponents.Content>
<DockviewComponents.Actions>
<div>{`custom action ${counter}`}</div>
</DockviewComponents.Actions>
</DockviewComponents.Panel>
); );
}; };

112
packages/dockview-demo/src/layout-grid/panels/exampleFunctions.tsx
View File

@ -1,4 +1,4 @@
import { DockviewComponents, IDockviewPanelProps } from 'dockview'; import { IDockviewPanelProps } from 'dockview';
import * as React from 'react'; import * as React from 'react';
import { CompositeDisposable } from '../../lifecycle'; import { CompositeDisposable } from '../../lifecycle';
import './exampleFunctions.scss'; import './exampleFunctions.scss';
@ -49,80 +49,52 @@ export const ExampleFunctions = (
}; };
return ( return (
<DockviewComponents.Panel> <div className="example-functions-panel">
<DockviewComponents.Actions> <div className="example-functions-panel-header-bar">
<div <span style={{ padding: '0px 8px' }}>
style={{ <span>{'isGroupActive: '}</span>
height: '100%',
display: 'flex',
backgroundColor: 'rgba(255,255,255,0.1)',
padding: '0px 4px',
}}
>
<span <span
onClick={onClose}
style={{ style={{
height: '100%', color: panelState.isGroupActive
width: '25px', ? '#23d16f'
display: 'flex', : '#cd312b',
alignItems: 'center',
}} }}
> >
<a className="material-icons">menu</a> {`${panelState.isGroupActive}`}
</span> </span>
</div> </span>
</DockviewComponents.Actions> <span style={{ padding: '0px 8px' }}>
<DockviewComponents.Content> <span>{'isPanelVisible: '}</span>
<div className="example-functions-panel"> <span
<div className="example-functions-panel-header-bar"> style={{
<span style={{ padding: '0px 8px' }}> color: panelState.isPanelVisible
<span>{'isGroupActive: '}</span> ? '#23d16f'
<span : '#cd312b',
style={{ }}
color: panelState.isGroupActive >
? '#23d16f' {`${panelState.isPanelVisible}`}
: '#cd312b', </span>
}} </span>
> </div>
{`${panelState.isGroupActive}`} <div className="example-functions-panel-section">
</span> <input
</span> value={panelName}
<span style={{ padding: '0px 8px' }}> placeholder="New Panel Name"
<span>{'isPanelVisible: '}</span> type="text"
<span onChange={(event) => setPanelName(event.target.value)}
style={{ />
color: panelState.isPanelVisible <button onClick={onRename}>Rename</button>
? '#23d16f' </div>
: '#cd312b',
}}
>
{`${panelState.isPanelVisible}`}
</span>
</span>
</div>
<div className="example-functions-panel-section">
<input
value={panelName}
placeholder="New Panel Name"
type="text"
onChange={(event) =>
setPanelName(event.target.value)
}
/>
<button onClick={onRename}>Rename</button>
</div>
<input <input
style={{ width: '175px' }} style={{ width: '175px' }}
ref={input} ref={input}
placeholder="This is focused by the panel" placeholder="This is focused by the panel"
/> />
<input <input
style={{ width: '175px' }} style={{ width: '175px' }}
placeholder="This is also focusable" placeholder="This is also focusable"
/> />
</div> </div>
</DockviewComponents.Content>
</DockviewComponents.Panel>
); );
}; };

33
packages/dockview-demo/src/stories/dockview/dockview.params.stories.tsx
View File

@ -1,6 +1,5 @@
import { import {
DockviewApi, DockviewApi,
DockviewComponents,
DockviewReact, DockviewReact,
DockviewReadyEvent, DockviewReadyEvent,
IDockviewPanelProps, IDockviewPanelProps,
@ -18,35 +17,9 @@ const components: PanelCollection<IDockviewPanelProps<any>> = {
ticker: (props: IDockviewPanelProps<{ ticker: number }>) => { ticker: (props: IDockviewPanelProps<{ ticker: number }>) => {
const close = () => props.api.close(); const close = () => props.api.close();
return ( return (
<DockviewComponents.Panel> <div style={{ padding: '10px', height: '100%' }}>
<DockviewComponents.Tab> {`The current ticker value is ${props.params.ticker}`}
<div </div>
style={{
border: '1px solid pink',
height: '100%',
boxSizing: 'border-box',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '0px 8px',
width: '200px',
}}
>
<span>{props.api.title}</span>
<span
style={{ fontSize: '9px' }}
>{`(${props.params.ticker})`}</span>
{!props.api.suppressClosable && (
<span onClick={close}>X</span>
)}
</div>
</DockviewComponents.Tab>
<DockviewComponents.Content>
<div style={{ padding: '10px', height: '100%' }}>
{`The current ticker value is ${props.params.ticker}`}
</div>
</DockviewComponents.Content>
</DockviewComponents.Panel>
); );
}, },
iframe: (props) => { iframe: (props) => {

31
packages/dockview-demo/src/stories/dockview/dockview.tab.stories.tsx
View File

@ -1,6 +1,5 @@
import { import {
DockviewApi, DockviewApi,
DockviewComponents,
DockviewReact, DockviewReact,
DockviewReadyEvent, DockviewReadyEvent,
IDockviewPanelProps, IDockviewPanelProps,
@ -13,35 +12,7 @@ const components: PanelCollection<IDockviewPanelProps> = {
default: (props) => { default: (props) => {
const close = () => props.api.close(); const close = () => props.api.close();
return ( return (
<DockviewComponents.Panel> <div style={{ padding: '10px', height: '100%' }}>hello world</div>
<DockviewComponents.Tab>
<div
style={{
border: '1px solid pink',
height: '100%',
boxSizing: 'border-box',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '0px 8px',
width: '200px',
}}
>
<span>{props.api.title}</span>
<span style={{ fontSize: '9px' }}>
{'(Custom tab component)'}
</span>
{!props.api.suppressClosable && (
<span onClick={close}>X</span>
)}
</div>
</DockviewComponents.Tab>
<DockviewComponents.Content>
<div style={{ padding: '10px', height: '100%' }}>
hello world
</div>
</DockviewComponents.Content>
</DockviewComponents.Panel>
); );
}, },
}; };

73
packages/dockview/src/dockview/components/tab/defaultTab.ts
View File

@ -7,67 +7,6 @@ import { addDisposableListener } from '../../../events';
import { PanelUpdateEvent } from '../../../panel/types'; import { PanelUpdateEvent } from '../../../panel/types';
import { GroupPanel } from '../../../groupview/groupviewPanel'; import { GroupPanel } from '../../../groupview/groupviewPanel';
export class WrappedTab implements ITabRenderer {
private readonly _element: HTMLElement;
constructor(private readonly renderer: ITabRenderer) {
this._element = document.createElement('element');
this.show();
}
get innerRenderer() {
return this.renderer;
}
get element() {
return this._element;
}
get id() {
return this.renderer.id;
}
show() {
if (!this.renderer.element.parentElement) {
this._element.appendChild(this.renderer.element);
}
}
hide() {
if (this.renderer.element.parentElement) {
this.renderer.element.remove();
}
}
layout(width: number, height: number): void {
this.renderer.layout(width, height);
}
update(event: PanelUpdateEvent): void {
this.renderer.update(event);
}
toJSON(): object {
return this.renderer.toJSON();
}
focus(): void {
this.renderer.focus();
}
init(parameters: GroupPanelPartInitParameters): void {
this.renderer.init(parameters);
}
updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void {
this.renderer.updateParentGroup(group, isPanelVisible);
}
dispose() {
this.renderer.dispose();
}
}
export class DefaultTab extends CompositeDisposable implements ITabRenderer { export class DefaultTab extends CompositeDisposable implements ITabRenderer {
private _element: HTMLElement; private _element: HTMLElement;
@ -148,10 +87,16 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer {
} }
public updateParentGroup(group: GroupPanel, isPanelVisible: boolean) { public updateParentGroup(group: GroupPanel, isPanelVisible: boolean) {
const changed =
this._isPanelVisible !== isPanelVisible ||
this._isGroupActive !== group.isActive;
this._isPanelVisible = isPanelVisible; this._isPanelVisible = isPanelVisible;
this._isGroupActive = group.isActive; this._isGroupActive = group.isActive;
this.render(); if (changed) {
this.render();
}
} }
public layout(_width: number, _height: number) { public layout(_width: number, _height: number) {
@ -159,6 +104,8 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer {
} }
private render() { private render() {
this._content.textContent = this.params.title; if (this._content.textContent !== this.params.title) {
this._content.textContent = this.params.title;
}
} }
} }

11
packages/dockview/src/dockview/defaultGroupPanelView.ts
View File

@ -1,4 +1,4 @@
import { DefaultTab, WrappedTab } from './components/tab/defaultTab'; import { DefaultTab } from './components/tab/defaultTab';
import { import {
GroupPanelPartInitParameters, GroupPanelPartInitParameters,
IActionsRenderer, IActionsRenderer,
@ -22,7 +22,7 @@ export interface IGroupPanelView extends IDisposable {
export class DefaultGroupPanelView implements IGroupPanelView { export class DefaultGroupPanelView implements IGroupPanelView {
private readonly _content: IContentRenderer; private readonly _content: IContentRenderer;
private readonly _tab: WrappedTab; private readonly _tab: ITabRenderer;
private readonly _actions: IActionsRenderer | undefined; private readonly _actions: IActionsRenderer | undefined;
get content() { get content() {
@ -43,7 +43,7 @@ export class DefaultGroupPanelView implements IGroupPanelView {
actions?: IActionsRenderer; actions?: IActionsRenderer;
}) { }) {
this._content = renderers.content; this._content = renderers.content;
this._tab = new WrappedTab(renderers.tab ?? new DefaultTab()); this._tab = renderers.tab ?? new DefaultTab();
this._actions = this._actions =
renderers.actions || renderers.actions ||
(this.content.actions (this.content.actions
@ -78,10 +78,7 @@ export class DefaultGroupPanelView implements IGroupPanelView {
toJSON(): {} { toJSON(): {} {
return { return {
content: this.content.toJSON(), content: this.content.toJSON(),
tab: tab: this.tab instanceof DefaultTab ? undefined : this.tab.toJSON(),
this.tab.innerRenderer instanceof DefaultTab
? undefined
: this.tab.toJSON(),
}; };
} }

4
packages/dockview/src/groupview/types.ts
View File

@ -5,7 +5,6 @@ import { PanelInitParameters, IPanel } from '../panel/types';
import { DockviewApi } from '../api/component.api'; import { DockviewApi } from '../api/component.api';
import { GroupPanel } from './groupviewPanel'; import { GroupPanel } from './groupviewPanel';
import { Event } from '../events'; import { Event } from '../events';
import { WrappedTab } from '../dockview/components/tab/defaultTab';
export interface IRenderable { export interface IRenderable {
id: string; id: string;
@ -28,7 +27,7 @@ export interface GroupPanelPartInitParameters
export interface GroupPanelContentPartInitParameters export interface GroupPanelContentPartInitParameters
extends GroupPanelPartInitParameters { extends GroupPanelPartInitParameters {
tab: WrappedTab; tab: ITabRenderer;
} }
export interface IWatermarkRenderer extends IPanel { export interface IWatermarkRenderer extends IPanel {
@ -54,7 +53,6 @@ export interface IContentRenderer extends IPanel {
readonly onDidBlur?: Event<void>; readonly onDidBlur?: Event<void>;
updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void; updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void;
init(parameters: GroupPanelContentPartInitParameters): void; init(parameters: GroupPanelContentPartInitParameters): void;
close?(): Promise<boolean>;
} }
// watermark component // watermark component

89
packages/dockview/src/react/dockview/components.tsx
View File

@ -1,89 +0,0 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { isReactElement, ReactPartContext } from '../react';
import { ReactContentPartContext } from './reactContentPart';
interface WithChildren {
children: React.ReactNode;
}
const Tab: React.FunctionComponent<WithChildren> = (props: WithChildren) => {
return <>{props.children}</>;
};
const Content: React.FunctionComponent<WithChildren> = (
props: WithChildren
) => {
return <>{props.children}</>;
};
const Actions: React.FunctionComponent<WithChildren> = (
props: WithChildren
) => {
return <>{props.children}</>;
};
function isValidComponent(element: React.ReactElement) {
return [Content, Actions, Tab].find((comp) => element.type === comp);
}
const Panel: React.FunctionComponent<WithChildren> = (props: WithChildren) => {
const context = React.useContext(
ReactPartContext
) as ReactContentPartContext;
const sections = React.useMemo(() => {
const childs =
React.Children.map(props.children, (_) => _)?.filter(
isReactElement
) || [];
const isInvalid = !!childs.find((_) => !isValidComponent(_));
if (isInvalid) {
throw new Error(
'Children of DockviewComponents.Panel must be one of the following: DockviewComponents.Content, DockviewComponents.Actions, DockviewComponents.Tab'
);
}
const body = childs.find((_) => _.type === Content);
const actions = childs.find((_) => _.type === Actions);
const tab = childs.find((_) => _.type === Tab);
return { body, actions, tab };
}, [props.children]);
React.useEffect(() => {
/**
* hide or show the default tab behavior based on whether we want to override
* with our own React tab.
*/
if (sections.tab) {
context.tabPortalElement.hide();
} else {
context.tabPortalElement.show();
}
}, [sections.tab]);
return (
<>
{sections.actions &&
ReactDOM.createPortal(
sections.actions,
context.actionsPortalElement
)}
{sections.tab &&
ReactDOM.createPortal(
sections.tab,
context.tabPortalElement.element
)}
{sections.body || props.children}
</>
);
};
export const DockviewComponents = {
Tab,
Content,
Actions,
Panel,
};

8
packages/dockview/src/react/dockview/reactContentPart.ts
View File

@ -2,6 +2,7 @@ import * as React from 'react';
import { import {
IContentRenderer, IContentRenderer,
GroupPanelContentPartInitParameters, GroupPanelContentPartInitParameters,
ITabRenderer,
} from '../../groupview/types'; } from '../../groupview/types';
import { ReactPart, ReactPortalStore } from '../react'; import { ReactPart, ReactPortalStore } from '../react';
import { IDockviewPanelProps } from '../dockview/dockview'; import { IDockviewPanelProps } from '../dockview/dockview';
@ -10,7 +11,6 @@ import { DockviewPanelApi } from '../../api/groupPanelApi';
import { DockviewApi } from '../../api/component.api'; import { DockviewApi } from '../../api/component.api';
import { GroupPanel } from '../../groupview/groupviewPanel'; import { GroupPanel } from '../../groupview/groupviewPanel';
import { Emitter, Event } from '../../events'; import { Emitter, Event } from '../../events';
import { WrappedTab } from '../../dockview/components/tab/defaultTab';
export interface IGroupPanelActionbarProps { export interface IGroupPanelActionbarProps {
api: DockviewPanelApi; api: DockviewPanelApi;
@ -21,7 +21,7 @@ export interface ReactContentPartContext {
api: DockviewPanelApi; api: DockviewPanelApi;
containerApi: DockviewApi; containerApi: DockviewApi;
actionsPortalElement: HTMLElement; actionsPortalElement: HTMLElement;
tabPortalElement: WrappedTab; tabPortalElement: ITabRenderer;
} }
export class ReactPanelContentPart implements IContentRenderer { export class ReactPanelContentPart implements IContentRenderer {
@ -104,10 +104,6 @@ export class ReactPanelContentPart implements IContentRenderer {
// noop // noop
} }
public close(): Promise<boolean> {
return Promise.resolve(true);
}
public dispose() { public dispose() {
this._onDidFocus.dispose(); this._onDidFocus.dispose();
this._onDidBlur.dispose(); this._onDidBlur.dispose();

4
packages/dockview/src/react/dockview/v2/reactContentRenderer.ts
View File

@ -99,10 +99,6 @@ export class ReactContentRenderer implements IContentRenderer {
this._hostedContainer.layout(this.element); this._hostedContainer.layout(this.element);
} }
public close(): Promise<boolean> {
return Promise.resolve(true);
}
public dispose() { public dispose() {
this.part?.dispose(); this.part?.dispose();
} }

1
packages/dockview/src/react/index.ts
View File

@ -1,5 +1,4 @@
export * from './dockview/dockview'; export * from './dockview/dockview';
export * from './dockview/components';
export * from './splitview/splitview'; export * from './splitview/splitview';
export * from './gridview/gridview'; export * from './gridview/gridview';
export * from './dockview/reactContentPart'; export * from './dockview/reactContentPart';