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> <div>
<GridActions api={api} /> <GridActions api={api} />
<PanelActions {api && (
api={api} <PanelActions
panels={panels} api={api}
activePanel={activePanel} panels={panels}
/> activePanel={activePanel}
<GroupActions />
api={api} )}
groups={groups} {api && (
activeGroup={activeGroup} <GroupActions
/> api={api}
groups={groups}
activeGroup={activeGroup}
/>
)}
</div> </div>
<div <div
style={{ 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 = (() => { export const nextId = (() => {
let counter = 0; let counter = 0;
return () => { return () => counter++;
counter++;
};
})(); })();
export function defaultConfig(api: DockviewApi) { 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({ props.api?.addPanel({
id: `id_${Date.now().toString()}`, id: `id_${Date.now().toString()}`,
component: 'default', component: 'default',
title: `Tab ${nextId()}`, title: `Tab ${nextId()}`,
inactive: options?.inactive,
}); });
}; };
@ -48,9 +49,15 @@ export const GridActions = (props: { api?: DockviewApi }) => {
return ( return (
<div className="action-container"> <div className="action-container">
<button className="text-button" onClick={onAddPanel}> <button className="text-button" onClick={() => onAddPanel()}>
Add Panel Add Panel
</button> </button>
<button
className="text-button"
onClick={() => onAddPanel({ inactive: true })}
>
Add Inactive Panel
</button>
<button className="text-button" onClick={onAddGroup}> <button className="text-button" onClick={onAddGroup}>
Add Group Add Group
</button> </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: { export const GroupActions = (props: {
groups: string[]; groups: string[];
api?: DockviewApi; api: DockviewApi;
activeGroup?: string; activeGroup?: string;
}) => { }) => {
return ( return (
<div className="action-container"> <div className="action-container">
{props.groups.map((x) => { {props.groups.map((groupId) => {
const onClick = () => {
props.api?.getGroup(x)?.focus();
};
return ( return (
<div className="button-action"> <GroupAction key={groupId} {...props} groupId={groupId} />
<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>
); );
})} })}
</div> </div>

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

@ -1,71 +1,76 @@
import { DockviewApi } from 'dockview'; 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: { export const PanelActions = (props: {
panels: string[]; panels: string[];
api?: DockviewApi; api: DockviewApi;
activePanel?: string; activePanel?: string;
}) => { }) => {
return ( return (
<div className="action-container"> <div className="action-container">
{props.panels.map((x) => { {props.panels.map((id) => {
const onClick = () => { return <PanelAction key={id} {...props} panelId={id} />;
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>
);
})} })}
</div> </div>
); );