rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-02-13 11:55:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: docs

Browse Source
This commit is contained in:
mathuo 2024-04-25 22:14:39 +01:00
parent 4b1b4bab32
commit 36527910f3
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
5 changed files with 214 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
View File

@ -188,16 +188,20 @@ const DockviewDemo = (props: { theme?: string }) => {
>
<div>
<GridActions api={api} />
<PanelActions
api={api}
panels={panels}
activePanel={activePanel}
/>
<GroupActions
api={api}
groups={groups}
activeGroup={activeGroup}
/>
{api && (
<PanelActions
api={api}
panels={panels}
activePanel={activePanel}
/>
)}
{api && (
<GroupActions
api={api}
groups={groups}
activeGroup={activeGroup}
/>
)}
</div>
<div
style={{

4
packages/docs/sandboxes/react/dockview/demo-dockview/src/defaultLayout.ts
View File

@ -3,9 +3,7 @@ import { DockviewApi } from 'dockview';
export const nextId = (() => {
let counter = 0;
return () => {
counter++;
};
return () => counter++;
})();
export function defaultConfig(api: DockviewApi) {

11
packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
View File

@ -34,11 +34,12 @@ export const GridActions = (props: { api?: DockviewApi }) => {
}
};
const onAddPanel = () => {
const onAddPanel = (options?: { inactive: boolean }) => {
props.api?.addPanel({
id: `id_${Date.now().toString()}`,
component: 'default',
title: `Tab ${nextId()}`,
inactive: options?.inactive,
});
};
@ -48,9 +49,15 @@ export const GridActions = (props: { api?: DockviewApi }) => {
return (
<div className="action-container">
<button className="text-button" onClick={onAddPanel}>
<button className="text-button" onClick={() => onAddPanel()}>
Add Panel
</button>
<button
className="text-button"
onClick={() => onAddPanel({ inactive: true })}
>
Add Inactive Panel
</button>
<button className="text-button" onClick={onAddGroup}>
Add Group
</button>

199
packages/docs/sandboxes/react/dockview/demo-dockview/src/groupActions.tsx
View File

@ -1,85 +1,136 @@
import { DockviewApi } from 'dockview';
import { DockviewApi, DockviewGroupLocation } from 'dockview';
import * as React from 'react';
const GroupAction = (props: {
groupId: string;
groups: string[];
api: DockviewApi;
activeGroup?: string;
}) => {
const onClick = () => {
props.api?.getGroup(props.groupId)?.focus();
};
const isActive = props.activeGroup === props.groupId;
const group = React.useMemo(
() => props.api.getGroup(props.groupId),
[props.api, props.groupId]
);
const [location, setLocation] =
React.useState<DockviewGroupLocation | null>(null);
const [isMaximized, setIsMaximized] = React.useState<boolean>(false);
React.useEffect(() => {
if (!group) {
setLocation(null);
return;
}
const disposable = group.api.onDidLocationChange((event) => {
setLocation(event.location);
});
const disposable2 = props.api.onDidMaximizedGroupChange(() => {
setIsMaximized(group.api.isMaximized());
});
setLocation(group.api.location);
setIsMaximized(group.api.isMaximized());
return () => {
disposable.dispose();
disposable2.dispose();
};
}, [group]);
return (
<div className="button-action">
<div style={{ display: 'flex' }}>
<button
onClick={onClick}
className={
isActive ? 'demo-button selected' : 'demo-button'
}
>
{props.groupId}
</button>
</div>
<div style={{ display: 'flex' }}>
<button
className={
location?.type === 'floating'
? 'demo-icon-button selected'
: 'demo-icon-button'
}
onClick={() => {
if (group) {
props.api.addFloatingGroup(group);
}
}}
>
<span className="material-symbols-outlined">ad_group</span>
</button>
<button
className={
location?.type === 'popout'
? 'demo-icon-button selected'
: 'demo-icon-button'
}
onClick={() => {
if (group) {
props.api.addPopoutGroup(group);
}
}}
>
<span className="material-symbols-outlined">
open_in_new
</span>
</button>
<button
className={
isMaximized
? 'demo-icon-button selected'
: 'demo-icon-button'
}
onClick={() => {
if (group) {
if (group.api.isMaximized()) {
group.api.exitMaximized();
} else {
group.api.maximize();
}
}
}}
>
<span className="material-symbols-outlined">
fullscreen
</span>
</button>
<button
className="demo-icon-button"
onClick={() => {
const panel = props.api?.getGroup(props.groupId);
panel?.api.close();
}}
>
<span className="material-symbols-outlined">close</span>
</button>
</div>
</div>
);
};
export const GroupActions = (props: {
groups: string[];
api?: DockviewApi;
api: DockviewApi;
activeGroup?: string;
}) => {
return (
<div className="action-container">
{props.groups.map((x) => {
const onClick = () => {
props.api?.getGroup(x)?.focus();
};
{props.groups.map((groupId) => {
return (
<div className="button-action">
<div style={{ display: 'flex' }}>
<button
onClick={onClick}
className={
props.activeGroup === x
? 'demo-button selected'
: 'demo-button'
}
>
{x}
</button>
</div>
<div style={{ display: 'flex' }}>
<button
className="demo-icon-button"
onClick={() => {
const panel = props.api?.getGroup(x);
if (panel) {
props.api?.addFloatingGroup(panel);
}
}}
>
<span className="material-symbols-outlined">
ad_group
</span>
</button>
<button
className="demo-icon-button"
onClick={() => {
const panel = props.api?.getGroup(x);
if (panel) {
props.api?.addPopoutGroup(panel);
}
}}
>
<span className="material-symbols-outlined">
open_in_new
</span>
</button>
<button
className="demo-icon-button"
onClick={() => {
const panel = props.api?.getGroup(x);
if (panel?.api.isMaximized()) {
panel.api.exitMaximized();
} else {
panel?.api.maximize();
}
}}
>
<span className="material-symbols-outlined">
fullscreen
</span>
</button>
<button
className="demo-icon-button"
onClick={() => {
const panel = props.api?.getGroup(x);
panel?.api.close();
}}
>
<span className="material-symbols-outlined">
close
</span>
</button>
</div>
</div>
<GroupAction key={groupId} {...props} groupId={groupId} />
);
})}
</div>

125
packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx
View File

@ -1,71 +1,76 @@
import { DockviewApi } from 'dockview';
const PanelAction = (props: {
panels: string[];
api: DockviewApi;
activePanel?: string;
panelId: string;
}) => {
const onClick = () => {
props.api?.getPanel(props.panelId)?.focus();
};
return (
<div className="button-action">
<div style={{ display: 'flex' }}>
<button
className={
props.activePanel === props.panelId
? 'demo-button selected'
: 'demo-button'
}
onClick={onClick}
>
{props.panelId}
</button>
</div>
<div style={{ display: 'flex' }}>
<button
className="demo-icon-button"
onClick={() => {
const panel = props.api?.getPanel(props.panelId);
if (panel) {
props.api?.addFloatingGroup(panel);
}
}}
>
<span className="material-symbols-outlined">ad_group</span>
</button>
<button
className="demo-icon-button"
onClick={() => {
const panel = props.api?.getPanel(props.panelId);
if (panel) {
props.api?.addPopoutGroup(panel);
}
}}
>
<span className="material-symbols-outlined">
open_in_new
</span>
</button>
<button
className="demo-icon-button"
onClick={() => {
const panel = props.api?.getPanel(props.panelId);
panel?.api.close();
}}
>
<span className="material-symbols-outlined">close</span>
</button>
</div>
</div>
);
};
export const PanelActions = (props: {
panels: string[];
api?: DockviewApi;
api: DockviewApi;
activePanel?: string;
}) => {
return (
<div className="action-container">
{props.panels.map((x) => {
const onClick = () => {
props.api?.getPanel(x)?.focus();
};
return (
<div className="button-action">
<div style={{ display: 'flex' }}>
<button
className={
props.activePanel === x
? 'demo-button selected'
: 'demo-button'
}
onClick={onClick}
>
{x}
</button>
</div>
<div style={{ display: 'flex' }}>
<button
className="demo-icon-button"
onClick={() => {
const panel = props.api?.getPanel(x);
if (panel) {
props.api?.addFloatingGroup(panel);
}
}}
>
<span className="material-symbols-outlined">
ad_group
</span>
</button>
<button
className="demo-icon-button"
onClick={() => {
const panel = props.api?.getPanel(x);
if (panel) {
props.api?.addPopoutGroup(panel);
}
}}
>
<span className="material-symbols-outlined">
open_in_new
</span>
</button>
<button
className="demo-icon-button"
onClick={() => {
const panel = props.api?.getPanel(x);
panel?.api.close();
}}
>
<span className="material-symbols-outlined">
close
</span>
</button>
</div>
</div>
);
{props.panels.map((id) => {
return <PanelAction key={id} {...props} panelId={id} />;
})}
</div>
);