diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index 5663bd6cd..6e9b24b77 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -4,7 +4,16 @@ "packages/dockview" ], "sandboxes": [ - "/packages/docs/sandboxes/layout-persistance" + "/packages/docs/sandboxes/constraints-dockview", + "/packages/docs/sandboxes/customheader-dockview", + "/packages/docs/sandboxes/dnd-dockview", + "/packages/docs/sandboxes/events-dockview", + "/packages/docs/sandboxes/groupcontol-dockview", + "/packages/docs/sandboxes/layout-dockview", + "/packages/docs/sandboxes/nested-dockview", + "/packages/docs/sandboxes/resize-dockview", + "/packages/docs/sandboxes/simple-dockview", + "/packages/docs/sandboxes/watermark-dockview" ], "node": "16" } \ No newline at end of file diff --git a/package.json b/package.json index 4ae28ab2d..8d35430d0 100644 --- a/package.json +++ b/package.json @@ -65,4 +65,4 @@ "jest": "^29.5.0", "ts-node": "^10.9.1" } -} +} \ No newline at end of file diff --git a/packages/dockview-core/package.json b/packages/dockview-core/package.json index 4c86125b7..9b158487f 100644 --- a/packages/dockview-core/package.json +++ b/packages/dockview-core/package.json @@ -21,8 +21,8 @@ "build:modulefiles": "rollup -c", "build": "npm run build:ci && npm run build:modulefiles", "clean": "rimraf dist/ .build/", + "prepublishOnly": "npm run rebuild && npm run test", "docs": "typedoc", - "prepack": "npm run rebuild && npm run test", "rebuild": "npm run clean && npm run build", "test": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-core", "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-core --coverage", diff --git a/packages/dockview/package.json b/packages/dockview/package.json index a00ff296e..a6e25bf64 100644 --- a/packages/dockview/package.json +++ b/packages/dockview/package.json @@ -22,7 +22,7 @@ "build": "npm run build:ci && npm run build:modulefiles", "clean": "rimraf dist/ .build/", "docs": "typedoc", - "prepack": "npm run rebuild && npm run test", + "prepublishOnly": "npm run rebuild && npm run test", "rebuild": "npm run clean && npm run build", "test": "cross-env ../../node_modules/.bin/jest --selectProjects dockview", "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview --coverage", @@ -74,4 +74,4 @@ "rollup-plugin-terser": "^7.0.2", "typedoc": "^0.23.25" } -} +} \ No newline at end of file diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx index 6db6b208c..a61471905 100644 --- a/packages/docs/docs/components/dockview.mdx +++ b/packages/docs/docs/components/dockview.mdx @@ -7,23 +7,23 @@ import { RenderingDockview, Checkbox, } from '@site/src/components/dockview/rendering'; -import { DndDockview } from '@site/src/components/dockview/dnd'; -import { EventsDockview } from '@site/src/components/dockview/events'; -import { ContextMenuDockview } from '@site/src/components/dockview/contextMenu'; -import { NestedDockview } from '@site/src/components/dockview/nested'; -import { CustomHeadersDockview } from '@site/src/components/dockview/customHeaders'; -import { DockviewGroupControl } from '@site/src/components/dockview/groupControl'; -import { - DockviewNative, - DockviewNative2, -} from '@site/src/components/dockview/native'; + import Link from '@docusaurus/Link'; import useBaseUrl from '@docusaurus/useBaseUrl'; -import DockviewPersistance from '@site/sandboxes/layout-persistance/src/app'; +import DockviewPersistance from '@site/sandboxes/layout-dockview/src/app'; import SimpleDockview from '@site/sandboxes/simple-dockview/src/app'; import ResizeDockview from '@site/sandboxes/resize-dockview/src/app'; import DockviewWatermark from '@site/sandboxes/watermark-dockview/src/app'; +import DockviewConstraints from '@site/sandboxes/constraints-dockview/src/app'; +import DndDockview from '@site/sandboxes/dnd-dockview/src/app'; +import NestedDockview from '@site/sandboxes/nested-dockview/src/app'; +import EventsDockview from '@site/sandboxes/events-dockview/src/app'; +import DockviewGroupControl from '@site/sandboxes/groupcontrol-dockview/src/app'; +import CustomHeadersDockview from '@site/sandboxes/customheader-dockview/src/app'; +import DockviewNative from '@site/sandboxes/fullwidthtab-dockview/src/app'; +import DockviewNative2 from '@site/sandboxes/nativeapp-dockview/src/app'; +import DockviewSetTitle from '@site/sandboxes/updatetitle-dockview/src/app'; # Dockview @@ -247,7 +247,9 @@ When the dockview is empty you may want to display some fallback content, this i By default there the watermark has no content but you can provide as a prop to `DockviewReact` a `watermarkComponent` which will be rendered when there are no panels or groups. - + + + ## Drag And Drop @@ -324,7 +326,9 @@ return ( ); ``` - + + + ## Panels @@ -515,12 +519,14 @@ You can also override the default tab renderer which will be used when no `tabCo ; ``` -As a simple example the below attachs a custom event handler for the context menu on all tabs as a default tab renderer +As a simple example the below attaches a custom event handler for the context menu on all tabs as a default tab renderer The below example uses a custom tab renderer to reigster a popover when the user right clicked on a tab. This still makes use of the `DockviewDefaultTab` since it's only a minor change. - + + + ### Default Tab Title @@ -538,11 +544,15 @@ You can update the title through the panel api which can be accessed via `props. component or via `api.getPanel('panel1').api` if you are accessing from outside of the panel component. ```tsx -api.updateTitle('my_new_custom_title'); +api.setTitle('my_new_custom_title'); ``` > Note this only works when using the default tab implementation. + + + + ### Custom Tab Title If you are using a custom tab implementation you should pass variables through as a parameter and render them @@ -588,7 +598,9 @@ to the entire width of the group. For example: ``` - + + + ## Groups @@ -640,11 +652,15 @@ const GroupControlComponent = (props: IDockviewGroupControlProps) => { }; ``` - + + + ## Events - + + + ## Advanced Examples @@ -653,7 +669,9 @@ const GroupControlComponent = (props: IDockviewGroupControlProps) => { 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`. - + + + ### Example @@ -666,3 +684,9 @@ hello 2
+ +## Contraints + + + + diff --git a/packages/docs/sandboxes/layout-persistance/package.json b/packages/docs/sandboxes/constraints-dockview/package.json similarity index 77% rename from packages/docs/sandboxes/layout-persistance/package.json rename to packages/docs/sandboxes/constraints-dockview/package.json index 66c5efac5..e1497330a 100644 --- a/packages/docs/sandboxes/layout-persistance/package.json +++ b/packages/docs/sandboxes/constraints-dockview/package.json @@ -1,11 +1,8 @@ { - "name": "layout-persistance", - "description": "Using interpolations & CSS 3D create a flip card effect", + "name": "constraints-dockview", + "description": "", "keywords": [ - "css", - "3D", - "useSpring", - "interpolation" + "dockview" ], "version": "1.0.0", "main": "src/index.tsx", diff --git a/packages/docs/sandboxes/layout-persistance/public/index.html b/packages/docs/sandboxes/constraints-dockview/public/index.html similarity index 100% rename from packages/docs/sandboxes/layout-persistance/public/index.html rename to packages/docs/sandboxes/constraints-dockview/public/index.html diff --git a/packages/docs/sandboxes/constraints-dockview/src/app.tsx b/packages/docs/sandboxes/constraints-dockview/src/app.tsx new file mode 100644 index 000000000..6de27a497 --- /dev/null +++ b/packages/docs/sandboxes/constraints-dockview/src/app.tsx @@ -0,0 +1,99 @@ +import { + DockviewApi, + DockviewMutableDisposable, + DockviewReact, + DockviewReadyEvent, + GridConstraintChangeEvent, + IDockviewPanelProps, +} from 'dockview'; +import * as React from 'react'; + +const components = { + default: (props: IDockviewPanelProps<{ title: string }>) => { + const [contraints, setContraints] = + React.useState(null); + + React.useEffect(() => { + props.api.group.api.setConstraints({ + maximumHeight: 200, + maximumWidth: 200, + }); + }, []); + + React.useEffect(() => { + const disposable1 = new DockviewMutableDisposable(); + + const disposable = props.api.onDidGroupChange(() => { + disposable1.value = props.api.group.api.onDidConstraintsChange( + (event) => { + setContraints(event); + } + ); + }); + + setContraints({ + maximumHeight: props.api.group.maximumHeight, + minimumHeight: props.api.group.minimumHeight, + maximumWidth: props.api.group.maximumWidth, + minimumWidth: props.api.group.minimumWidth, + }); + + return () => { + disposable1.dispose(); + disposable.dispose(); + }; + }, []); + + return ( +
+ {props.params.title} + {contraints && ( +
+
{`minHeight=${contraints.minimumHeight}`}
+
{`maxHeight=${contraints.maximumHeight}`}
+
{`minWidth=${contraints.minimumWidth}`}
+
{`maxWidth=${contraints.maximumWidth}`}
+
+ )} +
+ ); + }, +}; + +const App = () => { + const [api, setApi] = React.useState(); + + const onReady = (event: DockviewReadyEvent) => { + event.api.addPanel({ + id: 'panel_1', + component: 'default', + }); + + event.api.addPanel({ + id: 'panel_2', + component: 'default', + }); + + event.api.addPanel({ + id: 'panel_3', + component: 'default', + }); + }; + + return ( + + ); +}; + +export default App; diff --git a/packages/docs/sandboxes/layout-persistance/src/index.tsx b/packages/docs/sandboxes/constraints-dockview/src/index.tsx similarity index 100% rename from packages/docs/sandboxes/layout-persistance/src/index.tsx rename to packages/docs/sandboxes/constraints-dockview/src/index.tsx diff --git a/packages/docs/sandboxes/layout-persistance/src/styles.css b/packages/docs/sandboxes/constraints-dockview/src/styles.css similarity index 100% rename from packages/docs/sandboxes/layout-persistance/src/styles.css rename to packages/docs/sandboxes/constraints-dockview/src/styles.css diff --git a/packages/docs/sandboxes/layout-persistance/tsconfig.json b/packages/docs/sandboxes/constraints-dockview/tsconfig.json similarity index 100% rename from packages/docs/sandboxes/layout-persistance/tsconfig.json rename to packages/docs/sandboxes/constraints-dockview/tsconfig.json diff --git a/packages/docs/sandboxes/customheader-dockview/package.json b/packages/docs/sandboxes/customheader-dockview/package.json new file mode 100644 index 000000000..8bf9bd86d --- /dev/null +++ b/packages/docs/sandboxes/customheader-dockview/package.json @@ -0,0 +1,31 @@ +{ + "name": "customheader-dockview", + "description": "", + "keywords": [ + "dockview" + ], + "version": "1.0.0", + "main": "src/index.tsx", + "dependencies": { + "dockview": "*", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.0.28", + "@types/react-dom": "^18.0.11", + "typescript": "^4.9.5" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} \ No newline at end of file diff --git a/packages/docs/sandboxes/customheader-dockview/public/index.html b/packages/docs/sandboxes/customheader-dockview/public/index.html new file mode 100644 index 000000000..67c682336 --- /dev/null +++ b/packages/docs/sandboxes/customheader-dockview/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/src/components/dockview/customHeaders.tsx b/packages/docs/sandboxes/customheader-dockview/src/app.tsx similarity index 84% rename from packages/docs/src/components/dockview/customHeaders.tsx rename to packages/docs/sandboxes/customheader-dockview/src/app.tsx index 08e5b85b1..eb2ecfffc 100644 --- a/packages/docs/src/components/dockview/customHeaders.tsx +++ b/packages/docs/sandboxes/customheader-dockview/src/app.tsx @@ -31,7 +31,7 @@ const headerComponents = { }, }; -export const CustomHeadersDockview = () => { +const CustomHeadersDockview = () => { const onReady = (event: DockviewReadyEvent) => { const d = localStorage.getItem('test'); @@ -88,20 +88,13 @@ export const CustomHeadersDockview = () => { }; return ( -
- -
+ ); }; + +export default CustomHeadersDockview; diff --git a/packages/docs/sandboxes/customheader-dockview/src/index.tsx b/packages/docs/sandboxes/customheader-dockview/src/index.tsx new file mode 100644 index 000000000..2fe1be232 --- /dev/null +++ b/packages/docs/sandboxes/customheader-dockview/src/index.tsx @@ -0,0 +1,20 @@ +import { StrictMode } from 'react'; +import * as ReactDOMClient from 'react-dom/client'; +import './styles.css'; +import 'dockview/dist/styles/dockview.css'; + +import App from './app'; + +const rootElement = document.getElementById('root'); + +if (rootElement) { + const root = ReactDOMClient.createRoot(rootElement); + + root.render( + +
+ +
+ + ); +} diff --git a/packages/docs/sandboxes/customheader-dockview/src/styles.css b/packages/docs/sandboxes/customheader-dockview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/customheader-dockview/src/styles.css @@ -0,0 +1,16 @@ +body { + margin: 0px; + color: white; + font-family: sans-serif; + text-align: center; +} + +#root { + height: 100vh; + width: 100vw; +} + +.app { + height: 100%; + +} diff --git a/packages/docs/sandboxes/customheader-dockview/tsconfig.json b/packages/docs/sandboxes/customheader-dockview/tsconfig.json new file mode 100644 index 000000000..6e13e47b5 --- /dev/null +++ b/packages/docs/sandboxes/customheader-dockview/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": ["es6", "dom"], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "strictNullChecks": true, + "suppressImplicitAnyIndexErrors": true, + "noUnusedLocals": true + } +} diff --git a/packages/docs/sandboxes/dnd-dockview/package.json b/packages/docs/sandboxes/dnd-dockview/package.json new file mode 100644 index 000000000..f9ef48454 --- /dev/null +++ b/packages/docs/sandboxes/dnd-dockview/package.json @@ -0,0 +1,31 @@ +{ + "name": "dnd-dockview", + "description": "", + "keywords": [ + "dockview" + ], + "version": "1.0.0", + "main": "src/index.tsx", + "dependencies": { + "dockview": "*", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.0.28", + "@types/react-dom": "^18.0.11", + "typescript": "^4.9.5" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} \ No newline at end of file diff --git a/packages/docs/sandboxes/dnd-dockview/public/index.html b/packages/docs/sandboxes/dnd-dockview/public/index.html new file mode 100644 index 000000000..67c682336 --- /dev/null +++ b/packages/docs/sandboxes/dnd-dockview/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/src/components/dockview/dnd.tsx b/packages/docs/sandboxes/dnd-dockview/src/app.tsx similarity index 74% rename from packages/docs/src/components/dockview/dnd.tsx rename to packages/docs/sandboxes/dnd-dockview/src/app.tsx index cb255a08e..7e3269c08 100644 --- a/packages/docs/src/components/dockview/dnd.tsx +++ b/packages/docs/sandboxes/dnd-dockview/src/app.tsx @@ -18,7 +18,7 @@ const components = { }, }; -export const DndDockview = (props: { renderVisibleOnly: boolean }) => { +const DndDockview = (props: { renderVisibleOnly: boolean }) => { const onReady = (event: DockviewReadyEvent) => { event.api.addPanel({ id: 'panel_1', @@ -60,7 +60,7 @@ export const DndDockview = (props: { renderVisibleOnly: boolean }) => { component: 'default', position: { direction: positionToDirection(event.position), - referenceGroup: event.group, + referenceGroup: event.group || undefined, }, }); }; @@ -70,7 +70,13 @@ export const DndDockview = (props: { renderVisibleOnly: boolean }) => { }; return ( - <> +
{ > Drag me
-
- -
- + + +
); }; + +export default DndDockview; diff --git a/packages/docs/sandboxes/dnd-dockview/src/index.tsx b/packages/docs/sandboxes/dnd-dockview/src/index.tsx new file mode 100644 index 000000000..2fe1be232 --- /dev/null +++ b/packages/docs/sandboxes/dnd-dockview/src/index.tsx @@ -0,0 +1,20 @@ +import { StrictMode } from 'react'; +import * as ReactDOMClient from 'react-dom/client'; +import './styles.css'; +import 'dockview/dist/styles/dockview.css'; + +import App from './app'; + +const rootElement = document.getElementById('root'); + +if (rootElement) { + const root = ReactDOMClient.createRoot(rootElement); + + root.render( + +
+ +
+ + ); +} diff --git a/packages/docs/sandboxes/dnd-dockview/src/styles.css b/packages/docs/sandboxes/dnd-dockview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/dnd-dockview/src/styles.css @@ -0,0 +1,16 @@ +body { + margin: 0px; + color: white; + font-family: sans-serif; + text-align: center; +} + +#root { + height: 100vh; + width: 100vw; +} + +.app { + height: 100%; + +} diff --git a/packages/docs/sandboxes/dnd-dockview/tsconfig.json b/packages/docs/sandboxes/dnd-dockview/tsconfig.json new file mode 100644 index 000000000..6e13e47b5 --- /dev/null +++ b/packages/docs/sandboxes/dnd-dockview/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": ["es6", "dom"], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "strictNullChecks": true, + "suppressImplicitAnyIndexErrors": true, + "noUnusedLocals": true + } +} diff --git a/packages/docs/sandboxes/events-dockview/package.json b/packages/docs/sandboxes/events-dockview/package.json new file mode 100644 index 000000000..d32c8451d --- /dev/null +++ b/packages/docs/sandboxes/events-dockview/package.json @@ -0,0 +1,31 @@ +{ + "name": "events-dockview", + "description": "", + "keywords": [ + "dockview" + ], + "version": "1.0.0", + "main": "src/index.tsx", + "dependencies": { + "dockview": "*", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.0.28", + "@types/react-dom": "^18.0.11", + "typescript": "^4.9.5" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} \ No newline at end of file diff --git a/packages/docs/sandboxes/events-dockview/public/index.html b/packages/docs/sandboxes/events-dockview/public/index.html new file mode 100644 index 000000000..67c682336 --- /dev/null +++ b/packages/docs/sandboxes/events-dockview/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/src/components/dockview/events.tsx b/packages/docs/sandboxes/events-dockview/src/app.tsx similarity index 96% rename from packages/docs/src/components/dockview/events.tsx rename to packages/docs/sandboxes/events-dockview/src/app.tsx index 8b7686bf0..a8a9bca96 100644 --- a/packages/docs/src/components/dockview/events.tsx +++ b/packages/docs/sandboxes/events-dockview/src/app.tsx @@ -6,7 +6,7 @@ import { IDockviewPanelProps, } from 'dockview'; import * as React from 'react'; -import { Console, Line } from '../console/console'; +import { Console, Line } from './console'; const components = { default: (props: IDockviewPanelProps<{ title: string }>) => { @@ -14,7 +14,7 @@ const components = { }, }; -export const EventsDockview = () => { +const EventsDockview = () => { const [lines, setLines] = React.useState([]); const [checked, setChecked] = React.useState(false); @@ -312,7 +312,13 @@ export const EventsDockview = () => { }; return ( - <> +
-
+
- - - +
+ +
+
); }; + +export default EventsDockview; diff --git a/packages/docs/sandboxes/events-dockview/src/console.scss b/packages/docs/sandboxes/events-dockview/src/console.scss new file mode 100644 index 000000000..f2896c044 --- /dev/null +++ b/packages/docs/sandboxes/events-dockview/src/console.scss @@ -0,0 +1,27 @@ +.console-container { + background-color: black; + color: white; + padding-left: 8px; + max-height: 200px; + overflow-y: scroll; + overflow-x: auto; + + .console-line { + height: 20px; + line-height: 20px; + font-size: 13px; + border-bottom: 1px solid rgb(30, 30, 30); + display: flex; + padding-left: 4px; + + .console-line-timestamp { + color: lightgray; + padding-right: 4px; + } + + .console-line-text { + padding: 0px 4px; + flex-grow: 1; + } + } +} diff --git a/packages/docs/sandboxes/events-dockview/src/console.tsx b/packages/docs/sandboxes/events-dockview/src/console.tsx new file mode 100644 index 000000000..c936a1476 --- /dev/null +++ b/packages/docs/sandboxes/events-dockview/src/console.tsx @@ -0,0 +1,52 @@ +import * as React from 'react'; +import './console.scss'; + +const formatTime = (now: Date) => { + const pad = (x: number) => (x < 10 ? `0${x}` : `${x}`); + + return `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad( + now.getSeconds() + )}.${now.getMilliseconds()}`; +}; + +export interface Line { + timestamp: Date; + text: string; + css?: React.CSSProperties; +} + +export interface IConsoleProps { + lines: Line[]; +} + +export const Console = (props: IConsoleProps) => { + const ref = React.useRef(); + + React.useLayoutEffect(() => { + if (!ref.current) { + return; + } + + ref.current.scrollTop = Math.max( + 0, + ref.current.scrollHeight - ref.current.clientHeight + ); + }, [props.lines]); + + return ( +
+ {props.lines.map((line, i) => { + return ( +
+ + {formatTime(line.timestamp)} + + + {line.text} + +
+ ); + })} +
+ ); +}; diff --git a/packages/docs/sandboxes/events-dockview/src/index.tsx b/packages/docs/sandboxes/events-dockview/src/index.tsx new file mode 100644 index 000000000..2fe1be232 --- /dev/null +++ b/packages/docs/sandboxes/events-dockview/src/index.tsx @@ -0,0 +1,20 @@ +import { StrictMode } from 'react'; +import * as ReactDOMClient from 'react-dom/client'; +import './styles.css'; +import 'dockview/dist/styles/dockview.css'; + +import App from './app'; + +const rootElement = document.getElementById('root'); + +if (rootElement) { + const root = ReactDOMClient.createRoot(rootElement); + + root.render( + +
+ +
+ + ); +} diff --git a/packages/docs/sandboxes/events-dockview/src/styles.css b/packages/docs/sandboxes/events-dockview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/events-dockview/src/styles.css @@ -0,0 +1,16 @@ +body { + margin: 0px; + color: white; + font-family: sans-serif; + text-align: center; +} + +#root { + height: 100vh; + width: 100vw; +} + +.app { + height: 100%; + +} diff --git a/packages/docs/sandboxes/events-dockview/tsconfig.json b/packages/docs/sandboxes/events-dockview/tsconfig.json new file mode 100644 index 000000000..6e13e47b5 --- /dev/null +++ b/packages/docs/sandboxes/events-dockview/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": ["es6", "dom"], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "strictNullChecks": true, + "suppressImplicitAnyIndexErrors": true, + "noUnusedLocals": true + } +} diff --git a/packages/docs/sandboxes/fullwidthtab-dockview/package.json b/packages/docs/sandboxes/fullwidthtab-dockview/package.json new file mode 100644 index 000000000..c04cc2521 --- /dev/null +++ b/packages/docs/sandboxes/fullwidthtab-dockview/package.json @@ -0,0 +1,31 @@ +{ + "name": "watermark-dockview", + "description": "", + "keywords": [ + "dockview" + ], + "version": "1.0.0", + "main": "src/index.tsx", + "dependencies": { + "dockview": "*", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.0.28", + "@types/react-dom": "^18.0.11", + "typescript": "^4.9.5" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} \ No newline at end of file diff --git a/packages/docs/sandboxes/fullwidthtab-dockview/public/index.html b/packages/docs/sandboxes/fullwidthtab-dockview/public/index.html new file mode 100644 index 000000000..67c682336 --- /dev/null +++ b/packages/docs/sandboxes/fullwidthtab-dockview/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/sandboxes/fullwidthtab-dockview/src/app.scss b/packages/docs/sandboxes/fullwidthtab-dockview/src/app.scss new file mode 100644 index 000000000..1b1438ec2 --- /dev/null +++ b/packages/docs/sandboxes/fullwidthtab-dockview/src/app.scss @@ -0,0 +1,17 @@ +.my-custom-tab { + padding: 0px 8px; + width: 100%; + display: flex; + height: 100%; + align-items: center; + background-color: var(--dv-tabs-and-actions-container-background-color); + + .my-custom-tab-icon { + font-size: 16px; + + &:hover { + border-radius: 2px; + background-color: var(--dv-icon-hover-background-color); + } + } +} diff --git a/packages/docs/sandboxes/fullwidthtab-dockview/src/app.tsx b/packages/docs/sandboxes/fullwidthtab-dockview/src/app.tsx new file mode 100644 index 000000000..c57b9a396 --- /dev/null +++ b/packages/docs/sandboxes/fullwidthtab-dockview/src/app.tsx @@ -0,0 +1,100 @@ +import { + DockviewReact, + DockviewReadyEvent, + IDockviewPanelProps, + IDockviewPanelHeaderProps, +} from 'dockview'; +import * as React from 'react'; +import './app.scss'; + +const components = { + default: (props: IDockviewPanelProps<{ title: string; x?: number }>) => { + return ( +
+ {`${props.params.title}`} + {props.params.x && {` ${props.params.x}`}} +
+ ); + }, +}; + +const tabComponents = { + default: (props: IDockviewPanelHeaderProps<{ title: string }>) => { + return ( +
+ {props.params.title} + + + + minimize + + + maximize + + + close + +
+ ); + }, +}; + +const DockviewNative = () => { + const onReady = (event: DockviewReadyEvent) => { + const panel1 = event.api.addPanel({ + id: 'panel_1', + component: 'default', + tabComponent: 'default', + params: { + title: 'Window 1', + }, + }); + panel1.group.locked = true; + + const panel2 = event.api.addPanel({ + id: 'panel_2', + component: 'default', + tabComponent: 'default', + params: { + title: 'Window 2', + }, + position: { + direction: 'right', + }, + }); + panel2.group.locked = true; + + const panel3 = event.api.addPanel({ + id: 'panel_3', + component: 'default', + tabComponent: 'default', + params: { + title: 'Window 3', + }, + position: { + direction: 'below', + }, + }); + panel3.group.locked = true; + }; + + return ( + + ); +}; + +export default DockviewNative; diff --git a/packages/docs/sandboxes/fullwidthtab-dockview/src/index.tsx b/packages/docs/sandboxes/fullwidthtab-dockview/src/index.tsx new file mode 100644 index 000000000..2fe1be232 --- /dev/null +++ b/packages/docs/sandboxes/fullwidthtab-dockview/src/index.tsx @@ -0,0 +1,20 @@ +import { StrictMode } from 'react'; +import * as ReactDOMClient from 'react-dom/client'; +import './styles.css'; +import 'dockview/dist/styles/dockview.css'; + +import App from './app'; + +const rootElement = document.getElementById('root'); + +if (rootElement) { + const root = ReactDOMClient.createRoot(rootElement); + + root.render( + +
+ +
+ + ); +} diff --git a/packages/docs/sandboxes/fullwidthtab-dockview/src/styles.css b/packages/docs/sandboxes/fullwidthtab-dockview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/fullwidthtab-dockview/src/styles.css @@ -0,0 +1,16 @@ +body { + margin: 0px; + color: white; + font-family: sans-serif; + text-align: center; +} + +#root { + height: 100vh; + width: 100vw; +} + +.app { + height: 100%; + +} diff --git a/packages/docs/sandboxes/fullwidthtab-dockview/tsconfig.json b/packages/docs/sandboxes/fullwidthtab-dockview/tsconfig.json new file mode 100644 index 000000000..6e13e47b5 --- /dev/null +++ b/packages/docs/sandboxes/fullwidthtab-dockview/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": ["es6", "dom"], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "strictNullChecks": true, + "suppressImplicitAnyIndexErrors": true, + "noUnusedLocals": true + } +} diff --git a/packages/docs/sandboxes/groupcontrol-dockview/package.json b/packages/docs/sandboxes/groupcontrol-dockview/package.json new file mode 100644 index 000000000..21e91b3a4 --- /dev/null +++ b/packages/docs/sandboxes/groupcontrol-dockview/package.json @@ -0,0 +1,31 @@ +{ + "name": "groupcontrol-dockview", + "description": "", + "keywords": [ + "dockview" + ], + "version": "1.0.0", + "main": "src/index.tsx", + "dependencies": { + "dockview": "*", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.0.28", + "@types/react-dom": "^18.0.11", + "typescript": "^4.9.5" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} \ No newline at end of file diff --git a/packages/docs/sandboxes/groupcontrol-dockview/public/index.html b/packages/docs/sandboxes/groupcontrol-dockview/public/index.html new file mode 100644 index 000000000..67c682336 --- /dev/null +++ b/packages/docs/sandboxes/groupcontrol-dockview/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/sandboxes/groupcontrol-dockview/src/app.scss b/packages/docs/sandboxes/groupcontrol-dockview/src/app.scss new file mode 100644 index 000000000..2c7ac667d --- /dev/null +++ b/packages/docs/sandboxes/groupcontrol-dockview/src/app.scss @@ -0,0 +1,17 @@ +.dockview-groupcontrol-demo { + height: 100%; + display: flex; + align-items: center; + color: white; + background-color: black; + padding-left: 8px; + + .dockview-groupcontrol-demo-group-active { + padding: 0px 8px; + } + + .dockview-groupcontrol-demo-active-panel { + color: yellow; + padding: 0px 8px; + } +} diff --git a/packages/docs/src/components/dockview/groupControl.tsx b/packages/docs/sandboxes/groupcontrol-dockview/src/app.tsx similarity index 82% rename from packages/docs/src/components/dockview/groupControl.tsx rename to packages/docs/sandboxes/groupcontrol-dockview/src/app.tsx index 602bdee8c..fc4c868eb 100644 --- a/packages/docs/src/components/dockview/groupControl.tsx +++ b/packages/docs/sandboxes/groupcontrol-dockview/src/app.tsx @@ -5,7 +5,7 @@ import { IDockviewPanelProps, } from 'dockview'; import * as React from 'react'; -import './groupControl.scss'; +import './app.scss'; const components = { default: (props: IDockviewPanelProps<{ title: string; x?: number }>) => { @@ -47,7 +47,7 @@ const GroupControlComponent = (props: IDockviewGroupControlProps) => { ); }; -export const DockviewGroupControl = () => { +const DockviewGroupControl = () => { const onReady = (event: DockviewReadyEvent) => { const panel1 = event.api.addPanel({ id: 'panel_1', @@ -84,19 +84,13 @@ export const DockviewGroupControl = () => { }; return ( -
- -
+ ); }; + +export default DockviewGroupControl; diff --git a/packages/docs/sandboxes/groupcontrol-dockview/src/index.tsx b/packages/docs/sandboxes/groupcontrol-dockview/src/index.tsx new file mode 100644 index 000000000..2fe1be232 --- /dev/null +++ b/packages/docs/sandboxes/groupcontrol-dockview/src/index.tsx @@ -0,0 +1,20 @@ +import { StrictMode } from 'react'; +import * as ReactDOMClient from 'react-dom/client'; +import './styles.css'; +import 'dockview/dist/styles/dockview.css'; + +import App from './app'; + +const rootElement = document.getElementById('root'); + +if (rootElement) { + const root = ReactDOMClient.createRoot(rootElement); + + root.render( + +
+ +
+ + ); +} diff --git a/packages/docs/sandboxes/groupcontrol-dockview/src/styles.css b/packages/docs/sandboxes/groupcontrol-dockview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/groupcontrol-dockview/src/styles.css @@ -0,0 +1,16 @@ +body { + margin: 0px; + color: white; + font-family: sans-serif; + text-align: center; +} + +#root { + height: 100vh; + width: 100vw; +} + +.app { + height: 100%; + +} diff --git a/packages/docs/sandboxes/groupcontrol-dockview/tsconfig.json b/packages/docs/sandboxes/groupcontrol-dockview/tsconfig.json new file mode 100644 index 000000000..6e13e47b5 --- /dev/null +++ b/packages/docs/sandboxes/groupcontrol-dockview/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": ["es6", "dom"], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "strictNullChecks": true, + "suppressImplicitAnyIndexErrors": true, + "noUnusedLocals": true + } +} diff --git a/packages/docs/sandboxes/layout-dockview/package.json b/packages/docs/sandboxes/layout-dockview/package.json new file mode 100644 index 000000000..309473289 --- /dev/null +++ b/packages/docs/sandboxes/layout-dockview/package.json @@ -0,0 +1,31 @@ +{ + "name": "layout-dockview", + "description": "", + "keywords": [ + "dockview" + ], + "version": "1.0.0", + "main": "src/index.tsx", + "dependencies": { + "dockview": "*", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.0.28", + "@types/react-dom": "^18.0.11", + "typescript": "^4.9.5" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} \ No newline at end of file diff --git a/packages/docs/sandboxes/layout-dockview/public/index.html b/packages/docs/sandboxes/layout-dockview/public/index.html new file mode 100644 index 000000000..67c682336 --- /dev/null +++ b/packages/docs/sandboxes/layout-dockview/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/sandboxes/layout-persistance/src/app.tsx b/packages/docs/sandboxes/layout-dockview/src/app.tsx similarity index 83% rename from packages/docs/sandboxes/layout-persistance/src/app.tsx rename to packages/docs/sandboxes/layout-dockview/src/app.tsx index 6d2a8fa11..33f1d6368 100644 --- a/packages/docs/sandboxes/layout-persistance/src/app.tsx +++ b/packages/docs/sandboxes/layout-dockview/src/app.tsx @@ -102,17 +102,25 @@ export const DockviewPersistance = () => { style={{ display: 'flex', flexDirection: 'column', + height: '100%', }} > -
+
- +
+ +
); }; diff --git a/packages/docs/sandboxes/layout-dockview/src/index.tsx b/packages/docs/sandboxes/layout-dockview/src/index.tsx new file mode 100644 index 000000000..2fe1be232 --- /dev/null +++ b/packages/docs/sandboxes/layout-dockview/src/index.tsx @@ -0,0 +1,20 @@ +import { StrictMode } from 'react'; +import * as ReactDOMClient from 'react-dom/client'; +import './styles.css'; +import 'dockview/dist/styles/dockview.css'; + +import App from './app'; + +const rootElement = document.getElementById('root'); + +if (rootElement) { + const root = ReactDOMClient.createRoot(rootElement); + + root.render( + +
+ +
+ + ); +} diff --git a/packages/docs/sandboxes/layout-dockview/src/styles.css b/packages/docs/sandboxes/layout-dockview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/layout-dockview/src/styles.css @@ -0,0 +1,16 @@ +body { + margin: 0px; + color: white; + font-family: sans-serif; + text-align: center; +} + +#root { + height: 100vh; + width: 100vw; +} + +.app { + height: 100%; + +} diff --git a/packages/docs/sandboxes/layout-dockview/tsconfig.json b/packages/docs/sandboxes/layout-dockview/tsconfig.json new file mode 100644 index 000000000..6e13e47b5 --- /dev/null +++ b/packages/docs/sandboxes/layout-dockview/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": ["es6", "dom"], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "strictNullChecks": true, + "suppressImplicitAnyIndexErrors": true, + "noUnusedLocals": true + } +} diff --git a/packages/docs/sandboxes/nativeapp-dockview/package.json b/packages/docs/sandboxes/nativeapp-dockview/package.json new file mode 100644 index 000000000..c04cc2521 --- /dev/null +++ b/packages/docs/sandboxes/nativeapp-dockview/package.json @@ -0,0 +1,31 @@ +{ + "name": "watermark-dockview", + "description": "", + "keywords": [ + "dockview" + ], + "version": "1.0.0", + "main": "src/index.tsx", + "dependencies": { + "dockview": "*", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.0.28", + "@types/react-dom": "^18.0.11", + "typescript": "^4.9.5" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} \ No newline at end of file diff --git a/packages/docs/sandboxes/nativeapp-dockview/public/index.html b/packages/docs/sandboxes/nativeapp-dockview/public/index.html new file mode 100644 index 000000000..67c682336 --- /dev/null +++ b/packages/docs/sandboxes/nativeapp-dockview/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/sandboxes/nativeapp-dockview/src/app.scss b/packages/docs/sandboxes/nativeapp-dockview/src/app.scss new file mode 100644 index 000000000..1b1438ec2 --- /dev/null +++ b/packages/docs/sandboxes/nativeapp-dockview/src/app.scss @@ -0,0 +1,17 @@ +.my-custom-tab { + padding: 0px 8px; + width: 100%; + display: flex; + height: 100%; + align-items: center; + background-color: var(--dv-tabs-and-actions-container-background-color); + + .my-custom-tab-icon { + font-size: 16px; + + &:hover { + border-radius: 2px; + background-color: var(--dv-icon-hover-background-color); + } + } +} diff --git a/packages/docs/src/components/dockview/native.tsx b/packages/docs/sandboxes/nativeapp-dockview/src/app.tsx similarity index 70% rename from packages/docs/src/components/dockview/native.tsx rename to packages/docs/sandboxes/nativeapp-dockview/src/app.tsx index afabde1f9..c160bb3ba 100644 --- a/packages/docs/src/components/dockview/native.tsx +++ b/packages/docs/sandboxes/nativeapp-dockview/src/app.tsx @@ -2,12 +2,10 @@ import { DockviewReact, DockviewReadyEvent, IDockviewPanelProps, - Position, - Direction, IDockviewPanelHeaderProps, } from 'dockview'; import * as React from 'react'; -import './native.scss'; +import './app.scss'; const components = { default: (props: IDockviewPanelProps<{ title: string; x?: number }>) => { @@ -71,10 +69,10 @@ const tabComponents = { - chrome_minimize + minimize - chrome_maximize + maximize close @@ -84,65 +82,7 @@ const tabComponents = { }, }; -export const DockviewNative = () => { - const onReady = (event: DockviewReadyEvent) => { - const panel1 = event.api.addPanel({ - id: 'panel_1', - component: 'default', - tabComponent: 'default', - params: { - title: 'Window 1', - }, - }); - panel1.group.locked = true; - - const panel2 = event.api.addPanel({ - id: 'panel_2', - component: 'default', - tabComponent: 'default', - params: { - title: 'Window 2', - }, - position: { - direction: 'right', - }, - }); - panel2.group.locked = true; - - const panel3 = event.api.addPanel({ - id: 'panel_3', - component: 'default', - tabComponent: 'default', - params: { - title: 'Window 3', - }, - position: { - direction: 'below', - }, - }); - panel3.group.locked = true; - }; - - return ( -
- -
- ); -}; - -export const DockviewNative2 = () => { +const DockviewNative2 = () => { const onReady = (event: DockviewReadyEvent) => { const panel1 = event.api.addPanel({ id: 'panel_1', @@ -199,3 +139,5 @@ export const DockviewNative2 = () => {
); }; + +export default DockviewNative2; diff --git a/packages/docs/sandboxes/nativeapp-dockview/src/index.tsx b/packages/docs/sandboxes/nativeapp-dockview/src/index.tsx new file mode 100644 index 000000000..2fe1be232 --- /dev/null +++ b/packages/docs/sandboxes/nativeapp-dockview/src/index.tsx @@ -0,0 +1,20 @@ +import { StrictMode } from 'react'; +import * as ReactDOMClient from 'react-dom/client'; +import './styles.css'; +import 'dockview/dist/styles/dockview.css'; + +import App from './app'; + +const rootElement = document.getElementById('root'); + +if (rootElement) { + const root = ReactDOMClient.createRoot(rootElement); + + root.render( + +
+ +
+ + ); +} diff --git a/packages/docs/sandboxes/nativeapp-dockview/src/styles.css b/packages/docs/sandboxes/nativeapp-dockview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/nativeapp-dockview/src/styles.css @@ -0,0 +1,16 @@ +body { + margin: 0px; + color: white; + font-family: sans-serif; + text-align: center; +} + +#root { + height: 100vh; + width: 100vw; +} + +.app { + height: 100%; + +} diff --git a/packages/docs/sandboxes/nativeapp-dockview/tsconfig.json b/packages/docs/sandboxes/nativeapp-dockview/tsconfig.json new file mode 100644 index 000000000..6e13e47b5 --- /dev/null +++ b/packages/docs/sandboxes/nativeapp-dockview/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": ["es6", "dom"], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "strictNullChecks": true, + "suppressImplicitAnyIndexErrors": true, + "noUnusedLocals": true + } +} diff --git a/packages/docs/sandboxes/nested-dockview/package.json b/packages/docs/sandboxes/nested-dockview/package.json new file mode 100644 index 000000000..4914f99c2 --- /dev/null +++ b/packages/docs/sandboxes/nested-dockview/package.json @@ -0,0 +1,31 @@ +{ + "name": "nested-dockview", + "description": "", + "keywords": [ + "dockview" + ], + "version": "1.0.0", + "main": "src/index.tsx", + "dependencies": { + "dockview": "*", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.0.28", + "@types/react-dom": "^18.0.11", + "typescript": "^4.9.5" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} \ No newline at end of file diff --git a/packages/docs/sandboxes/nested-dockview/public/index.html b/packages/docs/sandboxes/nested-dockview/public/index.html new file mode 100644 index 000000000..67c682336 --- /dev/null +++ b/packages/docs/sandboxes/nested-dockview/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/src/components/dockview/nested.scss b/packages/docs/sandboxes/nested-dockview/src/app.scss similarity index 100% rename from packages/docs/src/components/dockview/nested.scss rename to packages/docs/sandboxes/nested-dockview/src/app.scss diff --git a/packages/docs/src/components/dockview/nested.tsx b/packages/docs/sandboxes/nested-dockview/src/app.tsx similarity index 79% rename from packages/docs/src/components/dockview/nested.tsx rename to packages/docs/sandboxes/nested-dockview/src/app.tsx index e82e65d19..f792fde52 100644 --- a/packages/docs/src/components/dockview/nested.tsx +++ b/packages/docs/sandboxes/nested-dockview/src/app.tsx @@ -6,7 +6,7 @@ import { IDockviewPanelProps, } from 'dockview'; import * as React from 'react'; -import './nested.scss'; +import './app.scss'; const InnerDockview = () => { const onReady = (event: DockviewReadyEvent) => { @@ -52,7 +52,7 @@ const components = { innerDockview: InnerDockview, }; -export const NestedDockview = () => { +const NestedDockview = () => { const onReady = (event: DockviewReadyEvent) => { event.api.addPanel({ id: 'panel_1', @@ -82,20 +82,14 @@ export const NestedDockview = () => { }; return ( -
- -
+ ); }; + +export default NestedDockview; diff --git a/packages/docs/sandboxes/nested-dockview/src/index.tsx b/packages/docs/sandboxes/nested-dockview/src/index.tsx new file mode 100644 index 000000000..2fe1be232 --- /dev/null +++ b/packages/docs/sandboxes/nested-dockview/src/index.tsx @@ -0,0 +1,20 @@ +import { StrictMode } from 'react'; +import * as ReactDOMClient from 'react-dom/client'; +import './styles.css'; +import 'dockview/dist/styles/dockview.css'; + +import App from './app'; + +const rootElement = document.getElementById('root'); + +if (rootElement) { + const root = ReactDOMClient.createRoot(rootElement); + + root.render( + +
+ +
+ + ); +} diff --git a/packages/docs/sandboxes/nested-dockview/src/styles.css b/packages/docs/sandboxes/nested-dockview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/nested-dockview/src/styles.css @@ -0,0 +1,16 @@ +body { + margin: 0px; + color: white; + font-family: sans-serif; + text-align: center; +} + +#root { + height: 100vh; + width: 100vw; +} + +.app { + height: 100%; + +} diff --git a/packages/docs/sandboxes/nested-dockview/tsconfig.json b/packages/docs/sandboxes/nested-dockview/tsconfig.json new file mode 100644 index 000000000..6e13e47b5 --- /dev/null +++ b/packages/docs/sandboxes/nested-dockview/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": ["es6", "dom"], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "strictNullChecks": true, + "suppressImplicitAnyIndexErrors": true, + "noUnusedLocals": true + } +} diff --git a/packages/docs/sandboxes/resize-dockview/package.json b/packages/docs/sandboxes/resize-dockview/package.json index 66c5efac5..a8f59f461 100644 --- a/packages/docs/sandboxes/resize-dockview/package.json +++ b/packages/docs/sandboxes/resize-dockview/package.json @@ -1,11 +1,8 @@ { - "name": "layout-persistance", - "description": "Using interpolations & CSS 3D create a flip card effect", + "name": "resize-dockview", + "description": "", "keywords": [ - "css", - "3D", - "useSpring", - "interpolation" + "dockview" ], "version": "1.0.0", "main": "src/index.tsx", diff --git a/packages/docs/sandboxes/simple-dockview/package.json b/packages/docs/sandboxes/simple-dockview/package.json index 66c5efac5..217115b06 100644 --- a/packages/docs/sandboxes/simple-dockview/package.json +++ b/packages/docs/sandboxes/simple-dockview/package.json @@ -1,11 +1,8 @@ { - "name": "layout-persistance", - "description": "Using interpolations & CSS 3D create a flip card effect", + "name": "simple-dockview", + "description": "", "keywords": [ - "css", - "3D", - "useSpring", - "interpolation" + "dockview" ], "version": "1.0.0", "main": "src/index.tsx", diff --git a/packages/docs/sandboxes/updatetitle-dockview/package.json b/packages/docs/sandboxes/updatetitle-dockview/package.json new file mode 100644 index 000000000..1c7c2ac45 --- /dev/null +++ b/packages/docs/sandboxes/updatetitle-dockview/package.json @@ -0,0 +1,31 @@ +{ + "name": "updatetitle-dockview", + "description": "", + "keywords": [ + "dockview" + ], + "version": "1.0.0", + "main": "src/index.tsx", + "dependencies": { + "dockview": "*", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.0.28", + "@types/react-dom": "^18.0.11", + "typescript": "^4.9.5" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} \ No newline at end of file diff --git a/packages/docs/sandboxes/updatetitle-dockview/public/index.html b/packages/docs/sandboxes/updatetitle-dockview/public/index.html new file mode 100644 index 000000000..67c682336 --- /dev/null +++ b/packages/docs/sandboxes/updatetitle-dockview/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/sandboxes/updatetitle-dockview/src/app.tsx b/packages/docs/sandboxes/updatetitle-dockview/src/app.tsx new file mode 100644 index 000000000..93a3b1762 --- /dev/null +++ b/packages/docs/sandboxes/updatetitle-dockview/src/app.tsx @@ -0,0 +1,77 @@ +import { + DockviewReact, + DockviewReadyEvent, + IDockviewPanelProps, +} from 'dockview'; +import * as React from 'react'; + +const components = { + default: ( + props: IDockviewPanelProps<{ title: string; myValue: string }> + ) => { + const [title, setTitle] = React.useState(props.params.title); + + const onChange = (event: React.ChangeEvent) => { + setTitle(event.target.value); + }; + + const onClick = () => { + props.api.setTitle(title); + }; + + return ( +
+
+ {'props.api.title='} + {`${props.api.title}`} +
+ + +
+ ); + }, +}; + +export const App: React.FC = () => { + const onReady = (event: DockviewReadyEvent) => { + const panel = event.api.addPanel({ + id: 'panel_1', + component: 'default', + title: 'Panel 1', + }); + + const panel2 = event.api.addPanel({ + id: 'panel_2', + component: 'default', + title: 'Panel 2', + + position: { referencePanel: panel }, + }); + + const panel3 = event.api.addPanel({ + id: 'panel_3', + component: 'default', + title: 'Panel 3', + + position: { referencePanel: panel, direction: 'right' }, + }); + + const panel4 = event.api.addPanel({ + id: 'panel_4', + component: 'default', + title: 'Panel 4', + + position: { referencePanel: panel3 }, + }); + }; + + return ( + + ); +}; + +export default App; diff --git a/packages/docs/sandboxes/updatetitle-dockview/src/index.tsx b/packages/docs/sandboxes/updatetitle-dockview/src/index.tsx new file mode 100644 index 000000000..2fe1be232 --- /dev/null +++ b/packages/docs/sandboxes/updatetitle-dockview/src/index.tsx @@ -0,0 +1,20 @@ +import { StrictMode } from 'react'; +import * as ReactDOMClient from 'react-dom/client'; +import './styles.css'; +import 'dockview/dist/styles/dockview.css'; + +import App from './app'; + +const rootElement = document.getElementById('root'); + +if (rootElement) { + const root = ReactDOMClient.createRoot(rootElement); + + root.render( + +
+ +
+ + ); +} diff --git a/packages/docs/sandboxes/updatetitle-dockview/src/styles.css b/packages/docs/sandboxes/updatetitle-dockview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/updatetitle-dockview/src/styles.css @@ -0,0 +1,16 @@ +body { + margin: 0px; + color: white; + font-family: sans-serif; + text-align: center; +} + +#root { + height: 100vh; + width: 100vw; +} + +.app { + height: 100%; + +} diff --git a/packages/docs/sandboxes/updatetitle-dockview/tsconfig.json b/packages/docs/sandboxes/updatetitle-dockview/tsconfig.json new file mode 100644 index 000000000..6e13e47b5 --- /dev/null +++ b/packages/docs/sandboxes/updatetitle-dockview/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": ["es6", "dom"], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "strictNullChecks": true, + "suppressImplicitAnyIndexErrors": true, + "noUnusedLocals": true + } +} diff --git a/packages/docs/sandboxes/watermark-dockview/package.json b/packages/docs/sandboxes/watermark-dockview/package.json index 66c5efac5..c04cc2521 100644 --- a/packages/docs/sandboxes/watermark-dockview/package.json +++ b/packages/docs/sandboxes/watermark-dockview/package.json @@ -1,11 +1,8 @@ { - "name": "layout-persistance", - "description": "Using interpolations & CSS 3D create a flip card effect", + "name": "watermark-dockview", + "description": "", "keywords": [ - "css", - "3D", - "useSpring", - "interpolation" + "dockview" ], "version": "1.0.0", "main": "src/index.tsx", diff --git a/packages/docs/sandboxes/watermark-dockview/src/app.tsx b/packages/docs/sandboxes/watermark-dockview/src/app.tsx index 2fd583b7d..b45a05a0d 100644 --- a/packages/docs/sandboxes/watermark-dockview/src/app.tsx +++ b/packages/docs/sandboxes/watermark-dockview/src/app.tsx @@ -114,9 +114,9 @@ const DockviewWatermark = () => { return (
diff --git a/packages/docs/src/components/container.scss b/packages/docs/src/components/container.scss new file mode 100644 index 000000000..8c31be3b8 --- /dev/null +++ b/packages/docs/src/components/container.scss @@ -0,0 +1,37 @@ +.codesandbox-button { + display: flex; + align-items: center; + padding: 0px 4px; + border-radius: 4px; + + .codesandbox-button-pretext { + padding: 0px 4px; + } + + .codesandbox-button-content { + display: flex; + align-items: center; + } + + &:hover { + cursor: pointer; + background-color: rgb(37, 37, 37); + + .codesandbox-button-content { + color: rgb(237, 255, 165); + text-decoration: none; + } + + .codesandbox-button-pretext { + color: rgb(245, 245, 245); + } + } +} + +.dockview-svg { + display: inline-block; + fill: currentcolor; + line-height: 1; + stroke: currentcolor; + stroke-width: 0; +} diff --git a/packages/docs/src/components/container.tsx b/packages/docs/src/components/container.tsx index daa06d5ae..1dd825811 100644 --- a/packages/docs/src/components/container.tsx +++ b/packages/docs/src/components/container.tsx @@ -1,14 +1,82 @@ +import useBaseUrl from '@docusaurus/useBaseUrl'; import * as React from 'react'; +import './container.scss'; -export const Container = (props: { children: React.ReactNode }) => { +const createSvgElementFromPath = (params: { + height: string; + width: string; + viewbox: string; + path: string; +}) => { return ( -
- {props.children} -
+ + + ); +}; + +export const CreateCloseButton = () => + createSvgElementFromPath({ + width: '16', + height: '16', + viewbox: '0 0 50 58', + path: 'M22.5581 50.9938V30.1717L4.65116 19.869V31.7386L12.8536 36.4939V45.4198L22.5581 50.9938ZM27.2093 51.1162L37.0931 45.4226V36.2851L45.3488 31.501V19.7801L27.2093 30.2529V51.1162ZM42.9633 15.7867L33.4288 10.2615L25.0571 15.1193L16.6219 10.2567L7.00237 15.8557L24.9542 26.1842L42.9633 15.7867ZM0 43.4008V14.5498L24.9974 0L50 14.4887V43.3552L24.9969 57.7584L0 43.4008Z', + }); + +export const Container = (props: { + children: React.ReactNode; + height?: number; +}) => { + return ( + <> +
+ {props.children} +
+
+ + + + {`Open in `} + + + CodeSandbox + + + + + {/* + open_in_new + */} +
+ ); }; diff --git a/packages/docs/src/components/dockview/contextMenu.tsx b/packages/docs/src/components/dockview/contextMenu.tsx deleted file mode 100644 index 1fdaa3bc5..000000000 --- a/packages/docs/src/components/dockview/contextMenu.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import { - DockviewReact, - DockviewReadyEvent, - IDockviewPanelHeaderProps, - IDockviewPanelProps, - TabContextMenuEvent, -} from 'dockview'; -import * as React from 'react'; - -const components = { - default: (props: IDockviewPanelProps<{ title: string }>) => { - return
{props.params.title}
; - }, -}; - -const CustomTab = ( - props: IDockviewPanelHeaderProps & React.DOMAttributes -) => { - const onClose = React.useCallback( - (event: React.MouseEvent) => { - event.stopPropagation(); - props.api.close(); - }, - [props.api] - ); - - const onClick = React.useCallback( - (event: React.MouseEvent) => { - props.api.setActive(); - - if (props.onClick) { - props.onClick(event); - } - }, - [props.api, props.onClick] - ); - - return ( -
- {props.api.title} - - {'✕'} - -
- ); -}; - -const Test = (props: IDockviewPanelHeaderProps) => { - const onContextMenu = (event: React.MouseEvent) => { - event.preventDefault(); - alert('hiya'); - }; - return ; -}; - -const tabComponents = { - default: Test, -}; - -export const ContextMenuDockview = () => { - const onReady = (event: DockviewReadyEvent) => { - event.api.addPanel({ - id: 'panel_1', - component: 'default', - tabComponent: 'default', - params: { - title: 'Panel 1', - }, - }); - - event.api.addPanel({ - id: 'panel_2', - component: 'default', - tabComponent: 'default', - params: { - title: 'Panel 2', - }, - }); - - event.api.addPanel({ - id: 'panel_3', - component: 'default', - tabComponent: 'default', - params: { - title: 'Panel 3', - }, - }); - - event.api.addPanel({ - id: 'panel_4', - component: 'default', - tabComponent: 'default', - params: { - title: 'Panel 4', - }, - position: { referencePanel: 'panel_1', direction: 'right' }, - }); - }; - - const onContextMenu = (event: TabContextMenuEvent) => { - event.event.preventDefault(); - alert(`Content appear event fired for panel ${event.panel.id}`); - }; - - return ( - - ); -}; diff --git a/packages/docs/src/components/dockview/groupControl.scss b/packages/docs/src/components/dockview/groupControl.scss deleted file mode 100644 index 9a9d5bce1..000000000 --- a/packages/docs/src/components/dockview/groupControl.scss +++ /dev/null @@ -1,17 +0,0 @@ -.dockview-groupcontrol-demo { - height: 100%; - display: flex; - align-items: center; - color: white; - background-color: black; - padding-left: 8px; - - .dockview-groupcontrol-demo-group-active { - padding: 0px 8px; - } - - .dockview-groupcontrol-demo-active-panel { - color: yellow; - padding: 0px 8px; - } -} diff --git a/packages/docs/src/components/dockview/native.scss b/packages/docs/src/components/dockview/native.scss deleted file mode 100644 index 03d7d8c35..000000000 --- a/packages/docs/src/components/dockview/native.scss +++ /dev/null @@ -1,34 +0,0 @@ -.nested-dockview { - position: relative; - ::after { - content: ''; - position: absolute; - top: 0px; - left: 0px; - height: 1px; - width: 100%; - background-color: var(--dv-separator-border); - } -} - -.header-title { - padding: 0px 8px; -} - -.my-custom-tab { - padding: 0px 8px; - width: 100%; - display: flex; - height: 100%; - align-items: center; - background-color: var(--dv-tabs-and-actions-container-background-color); - - .my-custom-tab-icon { - font-size: 16px; - - &:hover { - border-radius: 2px; - background-color: var(--dv-icon-hover-background-color); - } - } -} diff --git a/packages/docs/src/components/dockview/watermark.tsx b/packages/docs/src/components/dockview/watermark.tsx deleted file mode 100644 index 405ae3887..000000000 --- a/packages/docs/src/components/dockview/watermark.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import { - DockviewApi, - DockviewReact, - DockviewReadyEvent, - IDockviewPanelProps, - IWatermarkPanelProps, - Orientation, -} from 'dockview'; -import * as React from 'react'; -import './nested.scss'; - -const components = { - default: (props: IDockviewPanelProps<{ title: string }>) => { - return ( -
- {props.params.title} -
- ); - }, -}; - -const counter = (() => { - let i = 0; - - return { - next: () => ++i, - }; -})(); - -const Watermark = (props: IWatermarkPanelProps) => { - const isGroup = props.containerApi.groups.length > 0; - - const addPanel = () => { - props.containerApi.addPanel({ - id: counter.next().toString(), - component: 'default', - }); - }; - - return ( -
-
- - This is a custom watermark. You can put whatever React - component you want here - - - - - {isGroup && ( - - - - )} -
-
- ); -}; - -export const DockviewWatermark = () => { - const [api, setApi] = React.useState(); - - const onReady = (event: DockviewReadyEvent) => { - // event.api.addPanel({ - // id: 'panel_1', - // component: 'default', - // }); - - event.api.fromJSON({ - grid: { - orientation: Orientation.HORIZONTAL, - root: { type: 'branch', data: [] }, - height: 100, - width: 100, - }, - panels: {}, - }); - - setApi(event.api); - }; - - const onClick = () => { - if (!api) { - return; - } - - api.addGroup(); - }; - - return ( -
-
- -
- -
- ); -}; diff --git a/packages/docs/versioned_docs/version-1.6.0/components/dockview.mdx b/packages/docs/versioned_docs/version-1.6.0/components/dockview.mdx index 0bad23ede..0d1b820b2 100644 --- a/packages/docs/versioned_docs/version-1.6.0/components/dockview.mdx +++ b/packages/docs/versioned_docs/version-1.6.0/components/dockview.mdx @@ -6,23 +6,20 @@ import { RenderingDockview, Checkbox, } from '@site/src/components/dockview/rendering'; -import { DndDockview } from '@site/src/components/dockview/dnd'; -import { EventsDockview } from '@site/src/components/dockview/events'; -import { ContextMenuDockview } from '@site/src/components/dockview/contextMenu'; -import { NestedDockview } from '@site/src/components/dockview/nested'; -import { CustomHeadersDockview } from '@site/src/components/dockview/customHeaders'; -import { DockviewGroupControl } from '@site/src/components/dockview/groupControl'; -import { DockviewWatermark } from '@site/src/components/dockview/watermark'; -import { - DockviewNative, - DockviewNative2, -} from '@site/src/components/dockview/native'; import Link from '@docusaurus/Link'; import useBaseUrl from '@docusaurus/useBaseUrl'; -import DockviewPersistance from '@site/sandboxes/layout-persistance/src/app'; +import DockviewPersistance from '@site/sandboxes/layout-dockview/src/app'; import SimpleDockview from '@site/sandboxes/simple-dockview/src/app'; import ResizeDockview from '@site/sandboxes/resize-dockview/src/app'; +import NestedDockview from '@site/sandboxes/nested-dockview/src/app'; +import EventsDockview from '@site/sandboxes/events-dockview/src/app'; +import DndDockview from '@site/sandboxes/dnd-dockview/src/app'; +import DockviewGroupControl from '@site/sandboxes/groupcontrol-dockview/src/app'; +import DockviewWatermark from '@site/sandboxes/watermark-dockview/src/app'; +import CustomHeadersDockview from '@site/sandboxes/customheader-dockview/src/app'; +import DockviewNative from '@site/sandboxes/fullwidthtab-dockview/src/app'; +import DockviewNative2 from '@site/sandboxes/nativeapp-dockview/src/app'; # Dockview