diff --git a/packages/docs/docs/basics.mdx b/packages/docs/docs/basics.mdx index 33d0270c0..b2c8ebcdb 100644 --- a/packages/docs/docs/basics.mdx +++ b/packages/docs/docs/basics.mdx @@ -8,7 +8,6 @@ import { SimpleSplitview2 } from '@site/src/components/simpleSplitview2'; # Basics -asd This section will take you through a number of concepts that can be applied to all dockview components. ## Panels diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx index b6d1a3e46..c66b33e81 100644 --- a/packages/docs/docs/components/dockview.mdx +++ b/packages/docs/docs/components/dockview.mdx @@ -340,7 +340,9 @@ return ( ### Third Party Dnd Libraries -To be completed... +This shows a simple example of a third-party library used inside a panel that relies on drag +and drop functionalities. This examples serves to show that `dockview` doesn't interfer with +any drag and drop logic for other controls. @@ -612,6 +614,8 @@ to the entire width of the group. For example: ### Tab Height +Tab height can be controlled through CSS. + diff --git a/packages/docs/sandboxes/dnd-dockview/src/app.tsx b/packages/docs/sandboxes/dnd-dockview/src/app.tsx index 7e3269c08..b5d4ad11a 100644 --- a/packages/docs/sandboxes/dnd-dockview/src/app.tsx +++ b/packages/docs/sandboxes/dnd-dockview/src/app.tsx @@ -18,6 +18,29 @@ const components = { }, }; +const DraggableElement = () => ( + { + if (event.dataTransfer) { + event.dataTransfer.effectAllowed = 'move'; + + event.dataTransfer.setData('text/plain', 'nothing'); + } + }} + style={{ + backgroundColor: 'orange', + padding: '0px 8px', + borderRadius: '4px', + width: '100px', + cursor: 'pointer', + }} + draggable={true} + > + Drag me + +); + const DndDockview = (props: { renderVisibleOnly: boolean }) => { const onReady = (event: DockviewReadyEvent) => { event.api.addPanel({ @@ -77,19 +100,9 @@ const DndDockview = (props: { renderVisibleOnly: boolean }) => { height: '100%', }} > -
- Drag me +
+
- { const [treeData, setTreeData] = useState(SampleData); const handleDrop = (newTreeData: any) => { - console.log('handleDrop'); setTreeData(newTreeData); }; return (