rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-01-22 09:25:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: docs

Browse Source
This commit is contained in:
mathuo 2024-12-28 14:29:48 +00:00
parent 0ca56eaa8a
commit 5173922c69
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
6 changed files with 23 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/docs/docs/advanced/nested.mdx
View File

@ -8,6 +8,6 @@ import { CodeRunner } from '@site/src/components/ui/codeRunner';
# Nested Dockviews
You can safely create multiple dockview instances within one page and nest dockviews within other dockviews.
If you wish to interact with the drop event from one dockview instance in another dockview instance you can implement the `showDndOverlay` and `onDidDrop` props on `DockviewReact`.
If you wish to interact with the drop event from one dockview instance in another dockview instance you can implement the `api.onUnhandledDragOverEvent` and `onDidDrop` props on `DockviewReact`.
<CodeRunner id="dockview/nested" />

22
packages/docs/docs/core/dnd/dragAndDrop.mdx
View File

@ -43,7 +43,7 @@ For interaction with the Drag events directly the component exposes some method
```tsx
/**
* called when an ondrop event which does not originate from the dockview libray and
* passes the showDndOverlay condition occurs
* passes the onUnhandledDragOverEvent condition
**/
const onDidDrop = (event: DockviewDropEvent) => {
const { group } = event;
@ -58,14 +58,17 @@ const onDidDrop = (event: DockviewDropEvent) => {
});
};
/**
* called for drag over events which do not originate from the dockview library
* allowing the developer to decide where the overlay should be shown for a
* particular drag event
**/
const showDndOverlay = (event: DockviewDndOverlayEvent) => {
return true;
};
const onReady = (event: DockviewReadyEvent) => {
/**
* called for drag over events which do not originate from the dockview library
* allowing the developer to decide where the overlay should be shown for a
* particular drag event
**/
api.onUnhandledDragOverEvent(event => {
event.accept();
});
}
return (
<DockviewReact
@ -73,7 +76,6 @@ return (
onReady={onReady}
className="dockview-theme-abyss"
onDidDrop={onDidDrop}
showDndOverlay={showDndOverlay}
/>
);
```

2
packages/docs/old_docs_DELETE_SOON/components/paneview/paneview.mdx
View File

@ -221,7 +221,7 @@ If you provide the `PaneviewReact` component with the prop `onDidDrop` you will
You can safely create multiple paneview instances within one page. They will not interact with each other by default.
If you wish to interact with the drop event from one paneview instance in another paneview instance you can implement the `showDndOverlay` and `onDidDrop` props on `PaneviewReact`.
If you wish to interact with the drop event from one paneview instance in another paneview instance you can implement the `api.onUnhandledDragOverEvent` and `onDidDrop` props on `PaneviewReact`.
As an example see how dragging a header from one control to another will only trigger an interactable event for the developer if the checkbox is enabled.

10
packages/docs/sandboxes/react/dockview/dnd-external/src/app.tsx
View File

@ -113,7 +113,12 @@ const DndDockview = (props: { renderVisibleOnly: boolean; theme?: string }) => {
}
});
const disposable = api.onUnhandledDragOverEvent((event) => {
event.accept();
});
return () => {
disposable.dispose();
panelDragDisposable.dispose();
groupDragDisposable.dispose();
};
@ -134,10 +139,6 @@ const DndDockview = (props: { renderVisibleOnly: boolean; theme?: string }) => {
});
};
const showDndOverlay = (event: DockviewDndOverlayEvent) => {
return true;
};
const onDrop = (event: React.DragEvent) => {
const dataTransfer = event.dataTransfer;
@ -179,7 +180,6 @@ const DndDockview = (props: { renderVisibleOnly: boolean; theme?: string }) => {
onReady={onReady}
className={`${props.theme || 'dockview-theme-abyss'}`}
onDidDrop={onDidDrop}
showDndOverlay={showDndOverlay}
rootOverlayModel={{
size: { value: 100, type: 'pixels' },
activationSize: { value: 5, type: 'percentage' },

9
packages/docs/templates/dockview/dnd-external/react/src/app.tsx vendored
View File

@ -113,6 +113,10 @@ const DndDockview = (props: { renderVisibleOnly: boolean; theme?: string }) => {
}
});
const disposable = api.onUnhandledDragOverEvent((event) => {
event.accept();
});
return () => {
panelDragDisposable.dispose();
groupDragDisposable.dispose();
@ -134,10 +138,6 @@ const DndDockview = (props: { renderVisibleOnly: boolean; theme?: string }) => {
});
};
const showDndOverlay = (event: DockviewDndOverlayEvent) => {
return true;
};
const onDrop = (event: React.DragEvent) => {
const dataTransfer = event.dataTransfer;
@ -179,7 +179,6 @@ const DndDockview = (props: { renderVisibleOnly: boolean; theme?: string }) => {
onReady={onReady}
className={`${props.theme || 'dockview-theme-abyss'}`}
onDidDrop={onDidDrop}
showDndOverlay={showDndOverlay}
rootOverlayModel={{
size: { value: 100, type: 'pixels' },
activationSize: { value: 5, type: 'percentage' },

12
packages/docs/templates/dockview/nested/react/src/app.tsx vendored
View File

@ -70,23 +70,11 @@ const NestedDockview = (props: { theme?: string }) => {
});
};
const showDndOverlay = (event: DockviewDndOverlayEvent) => {
// console.log(event.getData());
return false;
};
const onDidDrop = (event: DockviewDidDropEvent) => {
// event.getData();
};
return (
<DockviewReact
onReady={onReady}
components={components}
className={`${props.theme || 'dockview-theme-abyss'}`}
showDndOverlay={showDndOverlay}
onDidDrop={onDidDrop}
/>
);
};