diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json new file mode 100644 index 000000000..6e9b24b77 --- /dev/null +++ b/.codesandbox/ci.json @@ -0,0 +1,19 @@ +{ + "packages": [ + "packages/dockview-core", + "packages/dockview" + ], + "sandboxes": [ + "/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-core/src/dockview/components/watermark/watermark.ts b/packages/dockview-core/src/dockview/components/watermark/watermark.ts index a726c7bb3..48664bec7 100644 --- a/packages/dockview-core/src/dockview/components/watermark/watermark.ts +++ b/packages/dockview-core/src/dockview/components/watermark/watermark.ts @@ -1,4 +1,8 @@ -import { GroupPanelPartInitParameters, IWatermarkRenderer } from '../../types'; +import { + GroupPanelPartInitParameters, + IWatermarkRenderer, + WatermarkRendererInitParameters, +} from '../../types'; import { addDisposableListener } from '../../../events'; import { toggleClass } from '../../../dom'; import { CompositeDisposable } from '../../../lifecycle'; @@ -69,15 +73,7 @@ export class Watermark // noop } - init(params: GroupPanelPartInitParameters) { - this.params = params; - - this.addDisposables( - this.params.containerApi.onDidLayoutChange(() => { - this.render(); - }) - ); - + init(_params: WatermarkRendererInitParameters) { this.render(); } diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index 4ecd85e6b..5ffbf99c2 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -632,9 +632,6 @@ export class DockviewComponent this.watermark.init({ containerApi: new DockviewApi(this), - params: {}, - title: '', - api: null as any, }); const watermarkContainer = document.createElement('div'); diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts index 30229eb02..e917f2c42 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts +++ b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts @@ -670,9 +670,7 @@ export class DockviewGroupPanelModel const watermark = this.accessor.createWatermarkComponent(); watermark.init({ containerApi: new DockviewApi(this.accessor), - params: {}, - title: '', - api: null as any, + group: this.groupPanel, }); this.watermark = watermark; diff --git a/packages/dockview-core/src/dockview/types.ts b/packages/dockview-core/src/dockview/types.ts index 6dcd6f13f..107da33ed 100644 --- a/packages/dockview-core/src/dockview/types.ts +++ b/packages/dockview-core/src/dockview/types.ts @@ -9,7 +9,7 @@ import { import { DockviewApi } from '../api/component.api'; import { Event } from '../events'; import { Optional } from '../types'; -import { DockviewGroupPanel } from './dockviewGroupPanel'; +import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel'; export enum DockviewDropTargets { Tab, @@ -34,13 +34,18 @@ export interface GroupPanelContentPartInitParameters tab: ITabRenderer; } +export interface WatermarkRendererInitParameters { + containerApi: DockviewApi; + group?: IDockviewGroupPanel; +} + export interface IWatermarkRenderer extends Optional< - Omit, + Omit, 'dispose' | 'update' | 'layout' | 'toJSON' > { readonly element: HTMLElement; - init: (params: GroupPanelPartInitParameters) => void; + init: (params: WatermarkRendererInitParameters) => void; updateParentGroup(group: DockviewGroupPanel, visible: boolean): void; } 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/dockview/src/dockview/reactWatermarkPart.ts b/packages/dockview/src/dockview/reactWatermarkPart.ts index e1f16066a..940bf6bec 100644 --- a/packages/dockview/src/dockview/reactWatermarkPart.ts +++ b/packages/dockview/src/dockview/reactWatermarkPart.ts @@ -6,9 +6,14 @@ import { DockviewGroupPanel, GroupPanelPartInitParameters, IWatermarkRenderer, + WatermarkRendererInitParameters, + DockviewApi, + IDockviewGroupPanel, } from 'dockview-core'; -export interface IWatermarkPanelProps extends IGroupPanelBaseProps { +export interface IWatermarkPanelProps { + containerApi: DockviewApi; + group?: IDockviewGroupPanel; close: () => void; } @@ -30,19 +35,18 @@ export class ReactWatermarkPart implements IWatermarkRenderer { this._element.className = 'dockview-react-part'; } - init(parameters: GroupPanelPartInitParameters): void { - this.parameters = parameters; - + init(parameters: WatermarkRendererInitParameters): void { this.part = new ReactPart( this.element, this.reactPortalStore, this.component, { - params: parameters.params, - api: parameters.api, + group: parameters.group, containerApi: parameters.containerApi, close: () => { - parameters.containerApi.removeGroup(parameters.api.group); + if (parameters.group) { + parameters.containerApi.removeGroup(parameters.group); + } }, } ); diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx index 972b8410c..a61471905 100644 --- a/packages/docs/docs/components/dockview.mdx +++ b/packages/docs/docs/components/dockview.mdx @@ -2,43 +2,38 @@ description: Dockview Documentation --- -import { SimpleDockview } from '@site/src/components/simpleDockview'; +import { Container } from '@site/src/components/container'; 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 { ResizeDockview } from '@site/src/components/dockview/resize'; -import { DockviewGroupControl } from '@site/src/components/dockview/groupControl'; -import { DockviewWatermark } from '@site/src/components/dockview/watermark'; -import { DockviewPersistance } from '@site/src/components/dockview/persistance'; -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-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 ## Introduction Dockview is an abstraction built on top of [Gridviews](./gridview) where each view is a container of many tabbed panels. -
+ -
+ You can access the panels associated group through the `panel.group` variable. The group will always be defined and will change if a panel is moved into another group. @@ -213,7 +208,9 @@ const onReady = (event: DockviewReadyEvent) => { Here is an example using the above code loading from and saving to localStorage. If you refresh the page you should notice your layout is loaded as you left it. - + + + ## Resizing @@ -240,7 +237,9 @@ props.api.group.api.setSize({ You can see an example invoking both approaches below. - + + + ## Watermark @@ -248,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 @@ -325,7 +326,9 @@ return ( ); ``` - + + + ## Panels @@ -516,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 @@ -539,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 @@ -589,7 +598,9 @@ to the entire width of the group. For example: ``` - + + + ## Groups @@ -641,11 +652,15 @@ const GroupControlComponent = (props: IDockviewGroupControlProps) => { }; ``` - + + + ## Events - + + + ## Advanced Examples @@ -654,10 +669,24 @@ 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 hello + +hello 2 + +
+ +
+ +## Contraints + + + + diff --git a/packages/docs/docs/examples.mdx b/packages/docs/docs/examples.mdx deleted file mode 100644 index e608a2378..000000000 --- a/packages/docs/docs/examples.mdx +++ /dev/null @@ -1,25 +0,0 @@ ---- -sidebar_position: 4 -description: Dockview examples ---- - -import { SimpleSplitview } from '@site/src/components/simpleSplitview'; -import { SimpleGridview } from '@site/src/components/simpleGridview'; -import { SimplePaneview } from '@site/src/components/simplePaneview'; -import { SimpleDockview } from '@site/src/components/simpleDockview'; - -# Examples - - diff --git a/packages/docs/docs/index.mdx b/packages/docs/docs/index.mdx index 12068f080..0e96a515f 100644 --- a/packages/docs/docs/index.mdx +++ b/packages/docs/docs/index.mdx @@ -6,7 +6,7 @@ description: A zero dependency layout manager built for React import { SimpleSplitview } from '@site/src/components/simpleSplitview'; import { SimpleGridview } from '@site/src/components/simpleGridview'; import { SimplePaneview } from '@site/src/components/simplePaneview'; -import { SimpleDockview } from '@site/src/components/simpleDockview'; +import SimpleDockview from '@site/sandboxes/simple-dockview/src/app'; # Introduction diff --git a/packages/docs/sandboxes/constraints-dockview/package.json b/packages/docs/sandboxes/constraints-dockview/package.json new file mode 100644 index 000000000..e1497330a --- /dev/null +++ b/packages/docs/sandboxes/constraints-dockview/package.json @@ -0,0 +1,31 @@ +{ + "name": "constraints-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/constraints-dockview/public/index.html b/packages/docs/sandboxes/constraints-dockview/public/index.html new file mode 100644 index 000000000..67c682336 --- /dev/null +++ b/packages/docs/sandboxes/constraints-dockview/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + React App + + + + +
+ + + + 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/constraints-dockview/src/index.tsx b/packages/docs/sandboxes/constraints-dockview/src/index.tsx new file mode 100644 index 000000000..2fe1be232 --- /dev/null +++ b/packages/docs/sandboxes/constraints-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/constraints-dockview/src/styles.css b/packages/docs/sandboxes/constraints-dockview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/constraints-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/constraints-dockview/tsconfig.json b/packages/docs/sandboxes/constraints-dockview/tsconfig.json new file mode 100644 index 000000000..6e13e47b5 --- /dev/null +++ b/packages/docs/sandboxes/constraints-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/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/src/components/dockview/persistance.tsx b/packages/docs/sandboxes/layout-dockview/src/app.tsx similarity index 82% rename from packages/docs/src/components/dockview/persistance.tsx rename to packages/docs/sandboxes/layout-dockview/src/app.tsx index 70d739e35..33f1d6368 100644 --- a/packages/docs/src/components/dockview/persistance.tsx +++ b/packages/docs/sandboxes/layout-dockview/src/app.tsx @@ -3,11 +3,8 @@ import { DockviewReact, DockviewReadyEvent, IDockviewPanelProps, - IWatermarkPanelProps, - Orientation, } from 'dockview'; import * as React from 'react'; -import './nested.scss'; const components = { default: (props: IDockviewPanelProps<{ title: string }>) => { @@ -103,24 +100,33 @@ export const DockviewPersistance = () => { return (
-
+
- +
+ +
); }; +export default DockviewPersistance; + const Watermark = () => { return
watermark
; }; 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 new file mode 100644 index 000000000..a8f59f461 --- /dev/null +++ b/packages/docs/sandboxes/resize-dockview/package.json @@ -0,0 +1,31 @@ +{ + "name": "resize-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/resize-dockview/public/index.html b/packages/docs/sandboxes/resize-dockview/public/index.html new file mode 100644 index 000000000..67c682336 --- /dev/null +++ b/packages/docs/sandboxes/resize-dockview/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/src/components/dockview/resize.tsx b/packages/docs/sandboxes/resize-dockview/src/app.tsx similarity index 89% rename from packages/docs/src/components/dockview/resize.tsx rename to packages/docs/sandboxes/resize-dockview/src/app.tsx index a6e68cfb4..98acdae0f 100644 --- a/packages/docs/src/components/dockview/resize.tsx +++ b/packages/docs/sandboxes/resize-dockview/src/app.tsx @@ -81,7 +81,7 @@ const components = { default: Default, }; -export const ResizeDockview = () => { +const ResizeDockview = () => { const onReady = (event: DockviewReadyEvent) => { event.api.addPanel({ id: 'panel_1', @@ -116,18 +116,12 @@ export const ResizeDockview = () => { }; return ( -
- -
+ ); }; + +export default ResizeDockview; diff --git a/packages/docs/sandboxes/resize-dockview/src/index.tsx b/packages/docs/sandboxes/resize-dockview/src/index.tsx new file mode 100644 index 000000000..2fe1be232 --- /dev/null +++ b/packages/docs/sandboxes/resize-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/src/components/dockview/resize.scss b/packages/docs/sandboxes/resize-dockview/src/resize.scss similarity index 100% rename from packages/docs/src/components/dockview/resize.scss rename to packages/docs/sandboxes/resize-dockview/src/resize.scss diff --git a/packages/docs/sandboxes/resize-dockview/src/styles.css b/packages/docs/sandboxes/resize-dockview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/resize-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/resize-dockview/tsconfig.json b/packages/docs/sandboxes/resize-dockview/tsconfig.json new file mode 100644 index 000000000..6e13e47b5 --- /dev/null +++ b/packages/docs/sandboxes/resize-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/simple-dockview/package.json b/packages/docs/sandboxes/simple-dockview/package.json new file mode 100644 index 000000000..217115b06 --- /dev/null +++ b/packages/docs/sandboxes/simple-dockview/package.json @@ -0,0 +1,31 @@ +{ + "name": "simple-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/simple-dockview/public/index.html b/packages/docs/sandboxes/simple-dockview/public/index.html new file mode 100644 index 000000000..67c682336 --- /dev/null +++ b/packages/docs/sandboxes/simple-dockview/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/src/components/simpleDockview.tsx b/packages/docs/sandboxes/simple-dockview/src/app.tsx similarity index 75% rename from packages/docs/src/components/simpleDockview.tsx rename to packages/docs/sandboxes/simple-dockview/src/app.tsx index 06ab441bf..4d1f066da 100644 --- a/packages/docs/src/components/simpleDockview.tsx +++ b/packages/docs/sandboxes/simple-dockview/src/app.tsx @@ -2,42 +2,20 @@ import { DockviewReact, DockviewReadyEvent, IDockviewPanelProps, - PanelApi, } from 'dockview'; import * as React from 'react'; const components = { default: (props: IDockviewPanelProps<{ title: string }>) => { - return
{props.params.title}
; + return ( +
+ {props.params.title} +
+ ); }, }; -const RenderWhenVisible = ( - props: T & { - children: React.FunctionComponent; - api: Pick; - } -) => { - const [visible, setVisible] = React.useState(props.api.isVisible); - - React.useEffect(() => { - const disposable = props.api.onDidVisibilityChange((event) => - setVisible(event.isVisible) - ); - - return () => { - disposable.dispose(); - }; - }, [props.api]); - - if (!visible) { - return null; - } - - return React.createElement(props.children, props); -}; - -export const SimpleDockview = () => { +export const App: React.FC = () => { const onReady = (event: DockviewReadyEvent) => { const panel = event.api.addPanel({ id: 'panel_1', @@ -114,3 +92,5 @@ export const SimpleDockview = () => { /> ); }; + +export default App; diff --git a/packages/docs/sandboxes/simple-dockview/src/index.tsx b/packages/docs/sandboxes/simple-dockview/src/index.tsx new file mode 100644 index 000000000..2fe1be232 --- /dev/null +++ b/packages/docs/sandboxes/simple-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/simple-dockview/src/styles.css b/packages/docs/sandboxes/simple-dockview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/simple-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/simple-dockview/tsconfig.json b/packages/docs/sandboxes/simple-dockview/tsconfig.json new file mode 100644 index 000000000..6e13e47b5 --- /dev/null +++ b/packages/docs/sandboxes/simple-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/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 new file mode 100644 index 000000000..c04cc2521 --- /dev/null +++ b/packages/docs/sandboxes/watermark-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/watermark-dockview/public/index.html b/packages/docs/sandboxes/watermark-dockview/public/index.html new file mode 100644 index 000000000..67c682336 --- /dev/null +++ b/packages/docs/sandboxes/watermark-dockview/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/src/components/dockview/watermark.tsx b/packages/docs/sandboxes/watermark-dockview/src/app.tsx similarity index 96% rename from packages/docs/src/components/dockview/watermark.tsx rename to packages/docs/sandboxes/watermark-dockview/src/app.tsx index 405ae3887..b45a05a0d 100644 --- a/packages/docs/src/components/dockview/watermark.tsx +++ b/packages/docs/sandboxes/watermark-dockview/src/app.tsx @@ -7,7 +7,6 @@ import { Orientation, } from 'dockview'; import * as React from 'react'; -import './nested.scss'; const components = { default: (props: IDockviewPanelProps<{ title: string }>) => { @@ -82,7 +81,7 @@ const Watermark = (props: IWatermarkPanelProps) => { ); }; -export const DockviewWatermark = () => { +const DockviewWatermark = () => { const [api, setApi] = React.useState(); const onReady = (event: DockviewReadyEvent) => { @@ -115,9 +114,9 @@ export const DockviewWatermark = () => { return (
@@ -132,3 +131,5 @@ export const DockviewWatermark = () => {
); }; + +export default DockviewWatermark; diff --git a/packages/docs/sandboxes/watermark-dockview/src/index.tsx b/packages/docs/sandboxes/watermark-dockview/src/index.tsx new file mode 100644 index 000000000..2fe1be232 --- /dev/null +++ b/packages/docs/sandboxes/watermark-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/watermark-dockview/src/styles.css b/packages/docs/sandboxes/watermark-dockview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/watermark-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/watermark-dockview/tsconfig.json b/packages/docs/sandboxes/watermark-dockview/tsconfig.json new file mode 100644 index 000000000..6e13e47b5 --- /dev/null +++ b/packages/docs/sandboxes/watermark-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/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 new file mode 100644 index 000000000..1dd825811 --- /dev/null +++ b/packages/docs/src/components/container.tsx @@ -0,0 +1,82 @@ +import useBaseUrl from '@docusaurus/useBaseUrl'; +import * as React from 'react'; +import './container.scss'; + +const createSvgElementFromPath = (params: { + height: string; + width: string; + viewbox: string; + path: string; +}) => { + return ( + + + + ); +}; + +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/fullWidthTabs.tsx b/packages/docs/src/components/dockview/fullWidthTabs.tsx new file mode 100644 index 000000000..cd50a67b1 --- /dev/null +++ b/packages/docs/src/components/dockview/fullWidthTabs.tsx @@ -0,0 +1,126 @@ +import { + DockviewReact, + DockviewReadyEvent, + IDockviewPanelProps, + Position, + Direction, + IDockviewPanelHeaderProps, +} from 'dockview'; +import * as React from 'react'; +import './native.scss'; + +const components = { + default: (props: IDockviewPanelProps<{ title: string; x?: number }>) => { + return ( +
+ {`${props.params.title}`} + {props.params.x && {` ${props.params.x}`}} +
+ ); + }, + isolatedApp: ( + props: IDockviewPanelProps<{ title: string; x?: number }> + ) => { + const onReady = (event: DockviewReadyEvent) => { + const panel1 = event.api.addPanel({ + id: 'panel_1', + component: 'default', + params: { + title: 'Tab 1', + }, + }); + const panel2 = event.api.addPanel({ + id: 'panel_2', + component: 'default', + params: { + title: 'Tab 2', + }, + }); + const panel3 = event.api.addPanel({ + id: 'panel_3', + component: 'default', + params: { + title: 'Tab 3', + }, + }); + }; + return ( + + ); + }, +}; + +export const DockviewFullWidthTabs = () => { + const onReady = (event: DockviewReadyEvent) => { + const panel1 = event.api.addPanel({ + id: 'panel_1', + component: 'default', + params: { + title: 'Tab 1', + }, + }); + + const panel2 = event.api.addPanel({ + id: 'panel_2', + component: 'default', + params: { + title: 'Tab 2', + }, + position: { + direction: 'right', + }, + }); + + const panel3 = event.api.addPanel({ + id: 'panel_3', + component: 'default', + params: { + title: 'Tab 3', + }, + position: { + direction: 'below', + }, + }); + + const panel4 = event.api.addPanel({ + id: 'panel_4', + component: 'default', + params: { + title: 'Tab 3', + }, + position: { + referencePanel: panel3, + }, + }); + }; + + 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/vanilla/dockview.tsx b/packages/docs/src/components/vanilla/dockview.tsx new file mode 100644 index 000000000..878c7d805 --- /dev/null +++ b/packages/docs/src/components/vanilla/dockview.tsx @@ -0,0 +1,80 @@ +import { + DockviewComponent, + GroupPanelContentPartInitParameters, + IContentRenderer, + ITabRenderer, +} from 'dockview-core'; +import * as React from 'react'; + +class CustomPanel implements IContentRenderer { + element = document.createElement('div'); + + init(parameters: GroupPanelContentPartInitParameters): void { + // + } +} + +class CustomTab implements ITabRenderer { + element = document.createElement('div'); + + init(parameters: GroupPanelContentPartInitParameters): void { + this.element.textContent = `Custom (${parameters.api.title})`; + } +} + +export const DockviewVanilla = () => { + const ref = React.useRef(); + + React.useEffect(() => { + if (!ref.current) { + return; + } + + const container = document.createElement('div'); + ref.current.appendChild(container); + + const dockviewComponent = new DockviewComponent(container, { + components: { + myCustomPanel: CustomPanel, + }, + tabComponents: { + myCustomTab: CustomTab, + }, + }); + + const observer = new ResizeObserver((entires) => { + const firstEntry = entires[0]; + const { width, height } = firstEntry.contentRect; + dockviewComponent.layout(width, height); + }); + + observer.observe(ref.current); + + dockviewComponent.addPanel({ + component: 'myCustomPanel', + tabComponent: 'myCustomTab', + id: '1', + title: 'Panel 1', + }); + dockviewComponent.addPanel({ + component: 'myCustomPanel', + id: '2', + title: 'Panel 2', + }); + + return () => { + dockviewComponent.dispose(); + }; + }, []); + + return ( +
+ ); +}; diff --git a/packages/docs/versioned_docs/version-1.5.1/basics.mdx b/packages/docs/versioned_docs/version-1.5.1/basics.mdx deleted file mode 100644 index 91fdcbfd9..000000000 --- a/packages/docs/versioned_docs/version-1.5.1/basics.mdx +++ /dev/null @@ -1,119 +0,0 @@ ---- -sidebar_position: 1 -description: How to get started with Dockview ---- - -import { SimpleSplitview } from '@site/src/components/simpleSplitview'; -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 - -The below examples use `ReactSplitview` but the logic holds for `ReactPaneview`, `ReactGridview` and `ReactDockview` using their respective implementations and interfaces. -All components require you to provide an `onReady` prop which you can use to build and control your component. - -### Adding a panel with parameters - -You can pass parameters to a panel through the `params` object - -```tsx -const onReady = (event: SplitviewReadyEvent) => { - event.api.addPanel({ - id: 'panel_1', - component: 'myComponent', - params: { - title: 'My Title', - }, - }); -}; -``` - -and you can access those properties through the `props.params` object. The TypeScript interface accepts an optional generic type `T` that corresponds to the params objects type. - -```tsx -const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => { - return
{`My first panel has the title: ${props.params.title}`}
; -}; -``` - -## API - -There are two types of API you will interact with using `dockview`. - -- The `panel API` is accessible via `props.api` in user defined panels and via the `.api` variable found on panel instances. This API contains actions and variable related to the the individual panel. -- The `container API` is accessible via `event.api` in the `onReady` events and `props.containerApi` in user defined panels. This API contains actions and variable related to the component as a whole. - -```tsx -const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => { - React.useEffect(() => { - const disposable = props.api.onDidActiveChange((event) => { - console.log(`is panel active: ${event.isActive}`); - }); - - return () => { - disposable.dispose(); // remember to dispose of any subscriptions - }; - }, [props.api]); - - const addAnotherPanel = React.useCallback(() => { - props.containerApi.addPanel({ - id: 'another_id', - component: 'anotherComponent', - }); - }, [props.containerApi]); - - return ( -
- {`My first panel has the title: ${props.params.title}`} - -
- ); -}; -``` - -### Serialization - -All components support `toJSON(): T` which returns a Typed object representation of the components state. This same Typed object can be used to deserialize a view using `fromJSON(object: T): void`. - -## Auto resizing - -`SplitviewReact`, `GridviewReact`, `PaneviewReact` and `DockviewReact` will all automatically resize to fill the size of their parent element. -Internally this is achieved using a [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) which some users may need to polyfill. -You can disable this by settings the `disableAutoResizing` prop to be `true`. - -You can manually resize a component using the API method `layout(width: number, height: number): void`. -An advanced case may use this in conjunction with `disableAutoResizing=true` to allow a parent component to have ultimate control over the dimensions of the component. - -## Events - -Many API properties can be listened on using the `Event` pattern. For example `api.onDidFocusChange(() => {...})`. -You should dispose of any event listeners you create cleaning up any listeners you would have created. - -```tsx -React.useEffect(() => { - const disposable = api.onDidFocusChange(() => { - // write some code - }); - - return () => { - disposable.dispose(); - }; -}, []); -``` - -## Proportional layout - -The `proportionalLayout` property indicates the expected behaviour of the component as it's container resizes, should all views resize equally or should just one view expand to fill the new space. `proportionalLayout` can be set as a property on `SplitviewReact` and `GridviewReact` components. -Although not configurable on `DockviewReact` and `PaneviewReact` these both behave as if `proportionalLayout=true` was set for them. - - - - - -## Browser support - -dockview is intended to support all major browsers. Some users may require a polyfill for [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver). diff --git a/packages/docs/versioned_docs/version-1.5.1/components/_category_.json b/packages/docs/versioned_docs/version-1.5.1/components/_category_.json deleted file mode 100644 index 366718010..000000000 --- a/packages/docs/versioned_docs/version-1.5.1/components/_category_.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "label": "Components", - "collapsible": true, - "collapsed": false, - "link": { - "type": "generated-index", - "title": "Components" - } -} \ No newline at end of file diff --git a/packages/docs/versioned_docs/version-1.5.1/components/dockview.mdx b/packages/docs/versioned_docs/version-1.5.1/components/dockview.mdx deleted file mode 100644 index 4af21aca7..000000000 --- a/packages/docs/versioned_docs/version-1.5.1/components/dockview.mdx +++ /dev/null @@ -1,372 +0,0 @@ ---- -description: Dockview Documentation ---- - -import { SimpleDockview } from '@site/src/components/simpleDockview'; -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 Link from '@docusaurus/Link'; - -# Dockview - -## Introduction - -Dockview is an abstraction built on top of [Gridviews](./gridview) where each view is a container of many tabbed panels. - -
- -
- -You can access the panels associated group through the `panel.group` variable. -The group will always be defined and will change if a panel is moved into another group. - -## DockviewReact Component - -You can create a Dockview through the use of the `ReactDockview` component. - -```tsx -import { ReactDockview } from 'dockview'; -``` - -| Property | Type | Optional | Default | Description | -| ------------------- | ------------------------------------ | -------- | ------- | ------------------------------------------------------------ | -| onReady | (event: SplitviewReadyEvent) => void | No | | | -| components | object | No | | | -| tabComponents | object | Yes | | | -| watermarkComponent | object | Yes | | | -| hideBorders | boolean | Yes | false | | -| className | string | Yes | '' | | -| disableAutoResizing | boolean | Yes | false | See Auto Resizing | -| onDidDrop | Event | Yes | false | | -| showDndOverlay | Event | Yes | false | | - -## Dockview API - -The Dockview API is exposed both at the `onReady` event and on each panel through `props.containerApi`. -Through this API you can control general features of the component and access all added panels. - -```tsx title="Dockview API via Panel component" -const MyComponent = (props: IDockviewPanelProps<{ title: string }>) => { - // props.containerApi... - - return
{`My first panel has the title: ${props.params.title}`}
; -}; -``` - -```tsx title="Dockview API via the onReady callback" -const onReady = (event: DockviewReadyEvent) => { - // event.api... -}; -``` - -| Property | Type | Description | -| ---------------------- | ---------------------------------------------------- | -------------------------------------------------------- | -| height | `number` | Component pixel height | -| width | `number` | Component pixel width | -| minimumHeight | `number` | | -| maximumHeight | `number` | | -| maximumWidth | `number` | | -| maximumWidth | `number` | | -| length | `number` | Number of panels | -| size | `number` | Number of Groups | -| panels | `IDockviewPanel[]` | | -| groups | `GroupPanel[]` | | -| activePanel | `IDockviewPanel \| undefined` | | -| activeGroup | `IDockviewPanel \| undefined` | | -| | | | -| onDidLayoutChange | `Event` | | -| onDidLayoutFromJSON | `Event` | | -| onDidAddGroup | `Event` | | -| onDidRemoveGroup | `Event` | | -| onDidActiveGroupChange | `Event` | | -| onDidAddPanel | `Event` | | -| onDidRemovePanel | `Event` | | -| onDidActivePanelChange | `Event` | | -| onDidDrop | `EventAuto Resizing | -| fromJSON | `(data: SerializedDockview): void` | Serialization | -| toJSON | `(): SerializedDockview` | Serialization | -| clear | `(): void` | Clears the current layout | - -## Dockview Panel API - -```tsx -const MyComponent = (props: IDockviewPanelProps<{ title: string }>) => { - // props.api... - - return
{`My first panel has the title: ${props.params.title}`}
; -}; -``` - -| Property | Type | Description | -| ---------------------- | ----------------------------------------------------------- | --------------- | -| id | `string` | Panel id | -| isFocused | `boolean` | Is panel focsed | -| isActive | `boolean` | Is panel active | -| width | `number` | Panel width | -| height | `number` | Panel height | -| onDidDimensionsChange | `Event` | | -| onDidFocusChange | `Event` | | -| onDidVisibilityChange | `Event` | | -| onDidActiveChange | `Event` | | -| setActive | `(): void` | | -| | | | -| onDidConstraintsChange | `onDidConstraintsChange: Event` | | -| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | | -| setSize | `(event: SizeEvent): void` | | -| | | | -| group | `GroupPanel | undefined` | -| isGroupActive | `boolean` | | -| title | `string` | | -| suppressClosable | `boolean` | | -| close | `(): void` | | -| setTitle | `(title: string): void` | | - -## Advanced Features - -### Resizing via API - -Each Dockview is comprised of a number of groups, each of which have a number of panels. -Logically most people would want to resize a panel but practically this really translates to resizing the group to which the panel belongs. - -From the api you can access the panels group object (`props.group`) which exposes it's own api object (`props.groups.api`). -This api is largly similar to the Gridview API. - -To resize an individual panel you could create a snippet similar to below. - -```tsx -const onResizePanel = () => { - props.api.group.api.setSize({ - height: 100, - }); -}; -``` - -```tsx -const onResizePanel = () => { - props.api.group.api.setSize({ - width: 100, - }); -}; -``` - -### Locked group - -Locking a group will disable all drop events for this group ensuring a user can not add additional panels to the group. -You can still add groups to a locked panel programatically using the API. - -```tsx -panel.group.locked = true; -``` - -### Group header - -You may wish to hide the header section of a group. This can achieved through setting the `hidden` variable on `panel.group.header`. - -```tsx -panel.group.header.hidden = true; -``` - -### Custom Tab Headers - -You can provide custom renderers for your tab headers. -A default implementation of `DockviewDefaultTab` is provided should you only wish to attach minor -changes and events that do not alter the default behaviour, for example to add a custom context menu event -handler. - -You are also free to define a custom renderer entirely from scratch and not make use of the `DockviewDefaultTab` component. - -```tsx title="Attaching a custom context menu event handlers to a custom header" -import { IDockviewPanelHeaderProps, DockviewDefaultTab } from 'dockview'; - -const MyCustomheader = (props: IDockviewPanelHeaderProps) => { - const onContextMenu = (event: React.MouseEvent) => { - event.preventDefault(); - alert('context menu'); - }; - return ; -}; -``` - -To use a custom renderer you can must register a collection of tab components - -```tsx -const tabComponents = { - myCustomHeader: MyCustomHeader, -}; - -return ; -``` - -```tsx -api.addPanel({ - id: 'panel_1', - component: 'default', - tabComponent: 'myCustomHeader', // <-- - title: 'Panel 1', -}); -``` - -You can also override the default tab renderer which will be used when no `tabComponent` is provided to the `addPanel` function. - -```tsx -; -``` - -As a simple example the below attachs a custom event handler for the context menu on all tabs as a default tab renderer - - - -### Rendering - -Although `DockviewReact` will only add those tabs that are visible to the DOM all associated React Components for each tab including those that -are not initially visible will be created. -This will mean that any hooks in those components will run and if you running expensive operations in the tabs you may end up doing a lot of initial -work for what are hidden tabs. - -This is the default behaviour to ensure the greatest flexibility for the user but you can create a Higher-Order component wrapping your components that -will ensure the component is only created if the tab is visible as below: - -```tsx -import { PanelApi } from 'dockview'; -import * as React from 'react'; - -function RenderWhenVisible< - T extends { api: Pick } ->(component: React.FunctionComponent) { - const HigherOrderComponent = (props: T) => { - const [visible, setVisible] = React.useState( - props.api.isVisible - ); - - React.useEffect(() => { - const disposable = props.api.onDidVisibilityChange((event) => - setVisible(event.isVisible) - ); - - return () => { - disposable.dispose(); - }; - }, [props.api]); - - if (!visible) { - return null; - } - - return React.createElement(component, props); - }; - return HigherOrderComponent; -} -``` - -```tsx -const component = RenderWhenVisible(MyComponent); -``` - -Through toggling the checkbox you can see that when you only render those panels which are visible the underling React component is destroyed when it becomes hidden and re-created when it becomes visible. - - -
- -
- -### Drag And Drop - -The component exposes some method to help determine whether external drag events should be interacted with or not. - -```tsx -/** - * called when an ondrop event which does not originate from the dockview libray and - * passes the showDndOverlay condition occurs - **/ -const onDidDrop = (event: DockviewDropEvent) => { - const { group } = event; - - event.api.addPanel({ - id: 'test', - component: 'default', - position: { - referencePanel: group.activePanel.id, - direction: 'within', - }, - }); -}; - -/** - * 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; -}; - -return ( - -); -``` - - - -### Events - - - -### 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`. - - - -### Group Controls Panel - -`DockviewReact` accepts a prop `groupControlComponent` which expects a React component whos props are `IDockviewGroupControlProps`. -This control will be rendered inside the header bar on the right hand side for each group of tabs. - -```tsx -const Component: React.FunctionComponent = () => { - return
{'...'}
; -}; - -return ; -``` diff --git a/packages/docs/versioned_docs/version-1.5.1/components/gridview.mdx b/packages/docs/versioned_docs/version-1.5.1/components/gridview.mdx deleted file mode 100644 index d531f7fdc..000000000 --- a/packages/docs/versioned_docs/version-1.5.1/components/gridview.mdx +++ /dev/null @@ -1,120 +0,0 @@ ---- -description: Gridview Documentation ---- - -import { SimpleGridview } from '@site/src/components/simpleGridview'; -import { EventsGridview } from '@site/src/components/gridview/events'; -import Link from '@docusaurus/Link'; - -# Gridview - -## Introduction - -
- -
- -## GridviewReact Component - -```tsx -import { ReactGridview } from 'dockview'; -``` - -| Property | Type | Optional | Default | Description | -| ------------------- | ------------------------------------ | -------- | ---------------------- | ------------------------------------------------------------------------ | -| onReady | (event: SplitviewReadyEvent) => void | No | | | -| components | object | No | | | -| orientation | Orientation | Yes | Orientation.HORIZONTAL | | -| proportionalLayout | boolean | Yes | true | See Proportional layout | -| hideBorders | boolean | Yes | false | | -| className | string | Yes | '' | | -| disableAutoResizing | boolean | Yes | false | See Auto Resizing | - -## Gridview API - -```tsx -const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => { - // props.containerApi... - - return
{`My first panel has the title: ${props.params.title}`}
; -}; -``` - -```tsx -const onReady = (event: GridviewReadyEvent) => { - // event.api... -}; -``` - -| Property | Type | Description | -| ---------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | -| height | `number` | Component pixel height | -| width | `number` | Component pixel width | -| minimumHeight | `number` | | -| maximumHeight | `number` | | -| maximumWidth | `number` | | -| maximumWidth | `number` | | -| length | `number` | Number of panels | -| panels | `ISplitviewPanel[]` | all panels | -| orientation | `Orientation` | | -| | | | -| onDidLayoutChange | `Event` | Fires on layout change | -| onDidLayoutFromJSON | `Event` | Fires of layout change caused by a fromJSON deserialization call | -| onDidAddPanel | `Event` | Fires when a view is added | -| onDidRemovePanel | `Event` | Fires when a view is removed | -| onDidActivePanelChange | `Event` | Fires when the active group changes | -| | | | -| addPanel | `addPanel(options: AddComponentOptions): IGridviewPanel` | | -| removePanel | `(panel: IGridviewPanel, sizing?: Sizing): void` | | -| movePanel | `(panel: IGridviewPanel, options: {direction: Direction, refernece:string, size?: number}): void` | | -| getPanel | `(id: string) \| IGridviewPanel \| undefined` | | -| | | | -| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | | -| focus | `(): void` | Focus the active panel, if exists | -| layout | `(width: number, height:number): void` | Auto Resizing | -| fromJSON | `(data: SerializedGridview): void` | Serialization | -| toJSON | `(): SerializedGridview` | Serialization | -| clear | `(): void` | Clears the current layout | - -## Gridview Panel API - -```tsx -const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => { - // props.api... - - return
{`My first panel has the title: ${props.params.title}`}
; -}; -``` - -| Property | Type | Description | -| ---------------------- | ----------------------------------------------------------- | ---------------- | -| id | `string` | Panel id | -| isFocused | `boolean` | Is panel focsed | -| isActive | `boolean` | Is panel active | -| isVisible | `boolean` | Is panel visible | -| width | `number` | Panel width | -| height | `number` | Panel height | -| | | | -| onDidDimensionsChange | `Event` | | -| onDidFocusChange | `Event` | | -| onDidVisibilityChange | `Event` | | -| onDidActiveChange | `Event` | | -| onDidConstraintsChange | `onDidConstraintsChange: Event` | | -| | | | -| setVisible | `(isVisible: boolean): void` | | -| setActive | `(): void` | | -| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | | -| setSize | `(event: SizeEvent): void` | | - -## Events - -`GridviewReact` exposes a number of events that the developer can listen to and below is a simple example with a log panel showing those events that occur. - - diff --git a/packages/docs/versioned_docs/version-1.5.1/components/paneview.mdx b/packages/docs/versioned_docs/version-1.5.1/components/paneview.mdx deleted file mode 100644 index 87efc8eaa..000000000 --- a/packages/docs/versioned_docs/version-1.5.1/components/paneview.mdx +++ /dev/null @@ -1,285 +0,0 @@ ---- -description: Paneview Documentation ---- - -import { SimplePaneview } from '@site/src/components/simplePaneview'; -import { CustomHeaderPaneview } from '@site/src/components/paneview/customHeader'; -import { DragAndDropPaneview } from '@site/src/components/paneview/dragAndDrop'; -import { SideBySidePaneview } from '@site/src/components/paneview/sideBySide'; -import Link from '@docusaurus/Link'; - -# Paneview - -A paneview is a collapsed collection of vertically stacked panels and panel headers. -The panel header will always remain visible however the panel will only be visible when the panel is expanded. - -:::info - -Paneview panels can be re-ordered by dragging and dropping the panel headers. - -::: - ---- - -# Introduction - -
- -
- -```tsx title="Simple Paneview example" -import { - IPaneviewPanelProps, - PaneviewReact, - PaneviewReadyEvent, -} from 'dockview'; - -const components = { - default: (props: IPaneviewPanelProps<{ title: string }>) => { - return ( -
- {props.params.title} -
- ); - }, -}; - -SimplePaneview = () => { - const onReady = (event: PaneviewReadyEvent) => { - event.api.addPanel({ - id: 'panel_1', - component: 'default', - params: { - title: 'Panel 1', - }, - title: 'Panel 1', - }); - - event.api.addPanel({ - id: 'panel_2', - component: 'default', - params: { - title: 'Panel 2', - }, - title: 'Panel 2', - }); - - event.api.addPanel({ - id: 'panel_3', - component: 'default', - params: { - title: 'Panel 3', - }, - title: 'Panel 3', - }); - }; - - return ( - - ); -}; -``` - -## PaneviewReact Component - -You can create a Paneview through the use of the `ReactPaneview` component. - -```tsx -import { ReactPaneview } from 'dockview'; -``` - -| Property | Type | Optional | Default | Description | -| ------------------- | ------------------------------------ | -------- | ------- | -------------------------------------------------------- | -| onReady | (event: SplitviewReadyEvent) => void | No | | | -| components | object | No | | | -| headerComponents | object | Yes | | | -| className | string | Yes | '' | | -| disableAutoResizing | boolean | Yes | false | Auto Resizing | -| disableDnd | boolean | Yes | false | | -| onDidDrop | Event | Yes | | | - -## Paneview API - -The Paneview API is exposed both at the `onReady` event and on each panel through `props.containerApi`. -Through this API you can control general features of the component and access all added panels. - -```tsx title="Paneview API via Panel component" -const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => { - // props.containerApi... - - return
{`My first panel has the title: ${props.params.title}`}
; -}; -``` - -```tsx title="Paneview API via the onReady callback" -const onReady = (event: GridviewReadyEvent) => { - // event.api... -}; -``` - -| Property | Type | Description | -| ------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -| height | `number` | Component pixel height | -| width | `number` | Component pixel width | -| minimumSize | `number` | The sum of the `minimumSize` property for each panel | -| maximumSize | `number` | The sum of the `maximumSize` property for each panel | -| length | `number` | Number of panels | -| panels | `IPaneviewPanel[]` | All panels | -| | | | -| onDidLayoutChange | `Event` | Fires on layout change | -| onDidLayoutFromJSON | `Event` | Fires of layout change caused by a fromJSON deserialization call | -| onDidAddView | `Event` | Fires when a view is added | -| onDidRemoveView | `Event` | Fires when a view is removed | -| onDidDrop | `EventDrag and Drop) | -| | | | -| addPanel | `addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel` | | -| removePanel | `(panel: IPaneviewPanel): void` | | -| movePanel | `(from: number, to: number): void` | | -| getPanel | `(id:string): IPaneviewPanel \| undefined` | | -| | | | -| focus | `(): void` | Focus the active panel, if exists | -| layout | `(width: number, height:number): void` | See Auto Resizing | -| fromJSON | `(data: SerializedPaneview): void` | Serialization | -| toJSON | `(): SerializedPaneview` | Serialization | -| clear | `(): void` | Clears the current layout | - -## Paneview Panel API - -```tsx -const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => { - // props.api... - - return
{`My first panel has the title: ${props.params.title}`}
; -}; -``` - -| Property | Type | Description | -| ---------------------- | ----------------------------------------------------------- | ---------------- | -| id | `string` | Panel id | -| isFocused | `boolean` | Is panel focsed | -| isActive | `boolean` | Is panel active | -| isVisible | `boolean` | Is panel visible | -| width | `number` | Panel width | -| height | `number` | Panel height | -| | | -| onDidDimensionsChange | `Event` | | -| onDidFocusChange | `Event` | | -| onDidVisibilityChange | `Event` | | -| onDidActiveChange | `Event` | | -| onDidConstraintsChange | `onDidConstraintsChange: Event` | | -| | | -| setVisible | `(isVisible: boolean): void` | | -| setActive | `(): void` | | -| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | | -| setSize | `(event: SizeEvent): void` | | - -## Advanced Features - -### Custom Header - -You can provide a custom component to render an alternative header. - -
- -
- -You can provide a `headerComponent` option when creating a panel to tell the library to use a custom header component. - -```tsx -const onReady = (event: PaneviewReadyEvent) => { - event.api.addPanel({ - id: 'panel_1', - component: 'default', - headerComponent: 'myHeaderComponent', - params: { - valueA: 'A', - }, - title: 'Panel 1', - }); -}; -``` - -This header must be defined in the collection of components provided to the `headerComponents` props for `ReactPaneivew` - -```tsx -import { IPaneviewPanelProps } from 'dockview'; - -const MyHeaderComponent = (props: IPaneviewPanelProps<{ title: string }>) => { - const [expanded, setExpanded] = React.useState( - props.api.isExpanded - ); - - React.useEffect(() => { - const disposable = props.api.onDidExpansionChange((event) => { - setExpanded(event.isExpanded); - }); - - return () => { - disposable.dispose(); - }; - }, []); - - const onClick = () => { - props.api.setExpanded(!expanded); - }; - - return ( - - ); -}; - -const headerComponents = { myHeaderComponent: MyHeaderComponent }; -``` - -### Drag And Drop - -If you provide the `PaneviewReact` component with the prop `onDidDrop` you will be able to interact with custom drop events. - - - -### Interactions - -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`. - -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. - - diff --git a/packages/docs/versioned_docs/version-1.5.1/components/splitview.mdx b/packages/docs/versioned_docs/version-1.5.1/components/splitview.mdx deleted file mode 100644 index a32e6d5a2..000000000 --- a/packages/docs/versioned_docs/version-1.5.1/components/splitview.mdx +++ /dev/null @@ -1,246 +0,0 @@ ---- -description: Splitview Documentation ---- - -import { SimpleSplitview } from '@site/src/components/simpleSplitview'; -import { SplitviewExample1 } from '@site/src/components/splitview/active'; -import Link from '@docusaurus/Link'; - -# Splitview - -## Introduction - -A Splitview is a collection of resizable horizontally or vertically stacked panels. - -
- -
- -```tsx title="Simple Splitview example" -import { - ISplitviewPanelProps, - Orientation, - SplitviewReact, - SplitviewReadyEvent, -} from 'dockview'; - -const components = { - default: (props: ISplitviewPanelProps<{ title: string }>) => { - return
{props.params.title}
; - }, -}; - -export const SimpleSplitview = () => { - const onReady = (event: SplitviewReadyEvent) => { - event.api.addPanel({ - id: 'panel_1', - component: 'default', - params: { - title: 'Panel 1', - }, - }); - - event.api.addPanel({ - id: 'panel_2', - component: 'default', - params: { - title: 'Panel 2', - }, - }); - - event.api.addPanel({ - id: 'panel_3', - component: 'default', - params: { - title: 'Panel 3', - }, - }); - }; - - return ( - - ); -}; -``` - -## SplitviewReact Component - -You can create a Splitview through the use of the `ReactSplitview` component. - -```tsx -import { ReactSplitview } from 'dockview'; -``` - -Using the `onReady` prop you can access to the component `api` and add panels either through deserialization or the individual addition of panels. - -| Property | Type | Optional | Default | Description | -| ------------------- | -------------------------------------- | -------- | ------------------------ | ------------------------------------------------------------------------ | -| onReady | `(event: SplitviewReadyEvent) => void` | No | | Function | -| components | `Record` | No | | Panel renderers | -| orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview | -| proportionalLayout | `boolean` | Yes | `true` | See Proportional layout | -| hideBorders | `boolean` | Yes | `false` | Hide the borders between panels | -| className | `string` | Yes | `''` | Attaches a classname | -| disableAutoResizing | `boolean` | Yes | `false` | See Auto Resizing | - -## Splitview API - -The Splitview API is exposed both at the `onReady` event and on each panel through `props.containerApi`. -Through this API you can control general features of the component and access all added panels. - -```tsx title="Splitview API via Panel component" -const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => { - // props.containerApi... - - return
{`My first panel has the title: ${props.params.title}`}
; -}; -``` - -```tsx title="Splitview API via the onReady callback" -const onReady = (event: SplitviewReadyEvent) => { - // event.api... -}; -``` - -| Property | Type | Description | -| ------------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------- | -| height | `number` | Component pixel height | -| width | `number` | Component pixel width | -| minimumSize | `number` | The sum of the `minimumSize` property for each panel | -| maximumSize | `number` | The sum of the `maximumSize` property for each panel | -| length | `number` | Number of panels | -| panels | `ISplitviewPanel[]` | All panels | -| | | | -| onDidLayoutChange | `Event` | Fires on layout change | -| onDidLayoutFromJSON | `Event` | Fires of layout change caused by a fromJSON deserialization call | -| onDidAddView | `Event` | Fires when a view is added | -| onDidRemoveView | `Event` | Fires when a view is removed | -| | | | -| addPanel | `addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel` | | -| removePanel | `(panel: ISplitviewPanel, sizing?: Sizing): void` | | -| getPanel | `(id:string): ISplitviewPanel \| undefined` | | -| movePanel | `(from: number, to: number): void` | | -| | | -| updateOptions | `(options: SplitviewComponentUpdateOptions): void` | | -| focus | `(): void` | Focus the active panel, if exists | -| layout | `(width: number, height:number): void` | See Auto Resizing | -| fromJSON | `(data: SerializedSplitview): void` | Serialization | -| toJSON | `(): SerializedSplitview` | Serialization | -| clear | `(): void` | Clears the current layout | - -## Splitview Panel API - -The Splitview panel API is exposed on each panel containing actions and variables specific to that panel. - -```tsx title="Splitview panel API via Panel component" -const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => { - // props.api... - - return
{`My first panel has the title: ${props.params.title}`}
; -}; -``` - -| Property | Type | Description | -| ---------------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | -| id | `string` | Panel id | -| isFocused | `boolean` | Is panel focsed | -| isActive | `boolean` | Is panel active | -| isVisible | `boolean` | Is panel visible | -| width | `number` | Panel width | -| height | `number` | Panel height | -| | | | -| onDidDimensionsChange | `Event` | Fires when panel dimensions change | -| onDidFocusChange | `Event` | Fire when panel is focused and blurred | -| onDidVisibilityChange | `Event` | Fires when the panels visiblity property is changed (see Panel Visibility) | -| onDidActiveChange | `Event` | Fires when the panels active property is changed (see Active Panel) | -| onDidConstraintsChange | `onDidConstraintsChange: Event` | Fires when the panels size contrainsts change (see Panel Constraints) | -| | | | -| setVisible | `(isVisible: boolean): void` | | -| setActive | `(): void` | | -| | | | -| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | | -| setSize | `(event: PanelSizeEvent): void` | | - -## Advanced Features - -Listed below are some functionalities avalaible through both the panel and component APIs. The live demo shows examples of these in real-time. - -
- -
- -### Visibility - -A panels visibility can be controlled and monitored through the following code. -A panel with visibility set to `false` will remain as a part of the components list of panels but will not be rendered. - -```tsx -const disposable = props.api.onDidVisibilityChange(({ isVisible }) => { - // -}); -``` - -```tsx -api.setVisible(true); -``` - -### Active - -Only one panel in the `splitview` can be the active panel at any one time. -Setting a panel as active will set all the others as inactive. -A focused panel is always the active panel but an active panel is not always focused. - -```tsx -const disposable = props.api.onDidActiveChange(({ isActive }) => { - // -}); -``` - -```tsx -api.setActive(); -``` - -### Contraints - -When adding a panel you can specify pixel size contraints - -```tsx -event.api.addPanel({ - id: 'panel_3', - component: 'default', - minimumSize: 100, - maximumSize: 1000, -}); -``` - -These contraints can be updated throughout the lifecycle of the `splitview` using the panel API - -```tsx -props.api.onDidConstraintsChange(({ maximumSize, minimumSize }) => { - // -}); -``` - -```tsx -api.setConstraints({ - maximumSize: 200, - minimumSize: 400, -}); -``` diff --git a/packages/docs/versioned_docs/version-1.5.1/examples.mdx b/packages/docs/versioned_docs/version-1.5.1/examples.mdx deleted file mode 100644 index e608a2378..000000000 --- a/packages/docs/versioned_docs/version-1.5.1/examples.mdx +++ /dev/null @@ -1,25 +0,0 @@ ---- -sidebar_position: 4 -description: Dockview examples ---- - -import { SimpleSplitview } from '@site/src/components/simpleSplitview'; -import { SimpleGridview } from '@site/src/components/simpleGridview'; -import { SimplePaneview } from '@site/src/components/simplePaneview'; -import { SimpleDockview } from '@site/src/components/simpleDockview'; - -# Examples - - diff --git a/packages/docs/versioned_docs/version-1.5.1/index.mdx b/packages/docs/versioned_docs/version-1.5.1/index.mdx deleted file mode 100644 index 12068f080..000000000 --- a/packages/docs/versioned_docs/version-1.5.1/index.mdx +++ /dev/null @@ -1,149 +0,0 @@ ---- -sidebar_position: 0 -description: A zero dependency layout manager built for React ---- - -import { SimpleSplitview } from '@site/src/components/simpleSplitview'; -import { SimpleGridview } from '@site/src/components/simpleGridview'; -import { SimplePaneview } from '@site/src/components/simplePaneview'; -import { SimpleDockview } from '@site/src/components/simpleDockview'; - -# Introduction - -**dockview** is a zero dependency layout manager that supports tab, grids and splitviews. - -## Features - -- Themable and customizable -- Support for the serialization and deserialization of layouts -- Drag and drop support - -## Quick start - -`dockview` has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. To install `dockview` you can run: - -```shell -npm install dockview -``` - -You must also import the dockview stylesheet found under [`dockview/dict/styles/dockview.css`](https://unpkg.com/browse/dockview@latest/dist/styles/dockview.css), -depending on your solution this might be: - -```css -@import './node_modules/dockview/dist/styles/dockview.css'; -``` - -A dark and light theme are provided, one of these classes (or a custom theme) must be attached at any point above your components in the HTML tree. To cover the entire web page you might attach the class to the `body` component: - -```html - - ... - - - ... - -``` - -There are 4 components you may want to use: - -Splitview - -
- -
- -
- -
- -
- -
- -
- -
- -```tsx -import { - DockviewReact, - DockviewReadyEvent, - PanelCollection, - IDockviewPanelProps, - IDockviewPanelHeaderProps, -} from 'dockview'; - -const components: PanelCollection = { - default: (props: IDockviewPanelProps<{ someProps: string }>) => { - return
{props.params.someProps}
; - }, -}; - -const headers: PanelCollection = { - customTab: (props: IDockviewPanelHeaderProps) => { - return ( -
- {props.api.title} - props.api.close()}>{'[x]'} -
- ); - }, -}; - -const Component = () => { - const onReady = (event: DockviewReadyEvent) => { - event.api.addPanel({ - id: 'panel1', - component: 'default', - tabComponent: 'customTab', // optional custom header - params: { - someProps: 'Hello', - }, - }); - event.api.addPanel({ - id: 'panel2', - component: 'default', - params: { - someProps: 'World', - }, - position: { referencePanel: 'panel1', direction: 'below' }, - }); - }; - - return ( - - ); -}; -``` diff --git a/packages/docs/versioned_docs/version-1.5.1/theme.mdx b/packages/docs/versioned_docs/version-1.5.1/theme.mdx deleted file mode 100644 index bd770f5d7..000000000 --- a/packages/docs/versioned_docs/version-1.5.1/theme.mdx +++ /dev/null @@ -1,89 +0,0 @@ ---- -sidebar_position: 3 -description: Theming Dockview Components ---- - -import { CustomCSSDockview } from '@site/src/components/dockview/customCss'; - -# Theme - -## Introduction - -`dockview` requires some css to work correctly. -The css is exported as one file under [`dockview/dict/styles/dockview.css`](https://unpkg.com/browse/dockview@latest/dist/styles/dockview.css) -and depending can be imported - -```css -@import './node_modules/dockview/dist/styles/dockview.css'; -``` - -## Provided themes - -The following are provided as classes that you can attached to your components for themeing - -- `.dockview-theme-light` -- `.dockview-theme-dark` -- `.dockview-theme-abyss` - -## Customizing Theme - -`dockview` supports theming through the use of css properties. -You can view the built-in themes at [`dockview/src/theme.scss`](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/theme.scss) -and are free to build your own themes based on these css properties. - -| CSS Property | Description | -| ---------------------------------------------------- | ----------- | -| --dv-paneview-active-outline-color | | -| --dv-tabs-and-actions-container-font-size | | -| --dv-tabs-and-actions-container-height | | -| --dv-tab-close-icon | | -| --dv-drag-over-background-color | | -| --dv-drag-over-border-color | | -| --dv-tabs-container-scrollbar-color | | -| | | -| --dv-group-view-background-color | | -| | | -| --dv-tabs-and-actions-container-background-color | | -| | | -| --dv-activegroup-visiblepanel-tab-background-color | | -| --dv-activegroup-hiddenpanel-tab-background-color | | -| --dv-inactivegroup-visiblepanel-tab-background-color | | -| --dv-inactivegroup-hiddenpanel-tab-background-color | | -| --dv-tab-divider-color | | -| | | -| --dv-activegroup-visiblepanel-tab-color | | -| --dv-activegroup-hiddenpanel-tab-color | | -| --dv-inactivegroup-visiblepanel-tab-color | | -| --dv-inactivegroup-hiddenpanel-tab-color | | -| | | -| --dv-separator-border | | -| --dv-paneview-header-border-color | | - -You can further customise the theme through adjusting class properties but this is up you. -As an example if you wanted to add a bottom border to the tab container for an active group in the `DockviewReact` component you could write: - -```css -.groupview { - &.active-group { - > .tabs-and-actions-container { - border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color); - } - } - &.inactive-group { - > .tabs-and-actions-container { - border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color); - } - } -} -``` - -
- -
diff --git a/packages/docs/versioned_docs/version-1.5.2/basics.mdx b/packages/docs/versioned_docs/version-1.5.2/basics.mdx deleted file mode 100644 index 91fdcbfd9..000000000 --- a/packages/docs/versioned_docs/version-1.5.2/basics.mdx +++ /dev/null @@ -1,119 +0,0 @@ ---- -sidebar_position: 1 -description: How to get started with Dockview ---- - -import { SimpleSplitview } from '@site/src/components/simpleSplitview'; -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 - -The below examples use `ReactSplitview` but the logic holds for `ReactPaneview`, `ReactGridview` and `ReactDockview` using their respective implementations and interfaces. -All components require you to provide an `onReady` prop which you can use to build and control your component. - -### Adding a panel with parameters - -You can pass parameters to a panel through the `params` object - -```tsx -const onReady = (event: SplitviewReadyEvent) => { - event.api.addPanel({ - id: 'panel_1', - component: 'myComponent', - params: { - title: 'My Title', - }, - }); -}; -``` - -and you can access those properties through the `props.params` object. The TypeScript interface accepts an optional generic type `T` that corresponds to the params objects type. - -```tsx -const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => { - return
{`My first panel has the title: ${props.params.title}`}
; -}; -``` - -## API - -There are two types of API you will interact with using `dockview`. - -- The `panel API` is accessible via `props.api` in user defined panels and via the `.api` variable found on panel instances. This API contains actions and variable related to the the individual panel. -- The `container API` is accessible via `event.api` in the `onReady` events and `props.containerApi` in user defined panels. This API contains actions and variable related to the component as a whole. - -```tsx -const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => { - React.useEffect(() => { - const disposable = props.api.onDidActiveChange((event) => { - console.log(`is panel active: ${event.isActive}`); - }); - - return () => { - disposable.dispose(); // remember to dispose of any subscriptions - }; - }, [props.api]); - - const addAnotherPanel = React.useCallback(() => { - props.containerApi.addPanel({ - id: 'another_id', - component: 'anotherComponent', - }); - }, [props.containerApi]); - - return ( -
- {`My first panel has the title: ${props.params.title}`} - -
- ); -}; -``` - -### Serialization - -All components support `toJSON(): T` which returns a Typed object representation of the components state. This same Typed object can be used to deserialize a view using `fromJSON(object: T): void`. - -## Auto resizing - -`SplitviewReact`, `GridviewReact`, `PaneviewReact` and `DockviewReact` will all automatically resize to fill the size of their parent element. -Internally this is achieved using a [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) which some users may need to polyfill. -You can disable this by settings the `disableAutoResizing` prop to be `true`. - -You can manually resize a component using the API method `layout(width: number, height: number): void`. -An advanced case may use this in conjunction with `disableAutoResizing=true` to allow a parent component to have ultimate control over the dimensions of the component. - -## Events - -Many API properties can be listened on using the `Event` pattern. For example `api.onDidFocusChange(() => {...})`. -You should dispose of any event listeners you create cleaning up any listeners you would have created. - -```tsx -React.useEffect(() => { - const disposable = api.onDidFocusChange(() => { - // write some code - }); - - return () => { - disposable.dispose(); - }; -}, []); -``` - -## Proportional layout - -The `proportionalLayout` property indicates the expected behaviour of the component as it's container resizes, should all views resize equally or should just one view expand to fill the new space. `proportionalLayout` can be set as a property on `SplitviewReact` and `GridviewReact` components. -Although not configurable on `DockviewReact` and `PaneviewReact` these both behave as if `proportionalLayout=true` was set for them. - - - - - -## Browser support - -dockview is intended to support all major browsers. Some users may require a polyfill for [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver). diff --git a/packages/docs/versioned_docs/version-1.5.2/components/_category_.json b/packages/docs/versioned_docs/version-1.5.2/components/_category_.json deleted file mode 100644 index 366718010..000000000 --- a/packages/docs/versioned_docs/version-1.5.2/components/_category_.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "label": "Components", - "collapsible": true, - "collapsed": false, - "link": { - "type": "generated-index", - "title": "Components" - } -} \ No newline at end of file diff --git a/packages/docs/versioned_docs/version-1.5.2/components/dockview.mdx b/packages/docs/versioned_docs/version-1.5.2/components/dockview.mdx deleted file mode 100644 index 0faa319cf..000000000 --- a/packages/docs/versioned_docs/version-1.5.2/components/dockview.mdx +++ /dev/null @@ -1,377 +0,0 @@ ---- -description: Dockview Documentation ---- - -import { SimpleDockview } from '@site/src/components/simpleDockview'; -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 { ResizeDockview } from '@site/src/components/dockview/resize'; -import Link from '@docusaurus/Link'; - -# Dockview - -## Introduction - -Dockview is an abstraction built on top of [Gridviews](./gridview) where each view is a container of many tabbed panels. - -
- -
- -You can access the panels associated group through the `panel.group` variable. -The group will always be defined and will change if a panel is moved into another group. - -## DockviewReact Component - -You can create a Dockview through the use of the `ReactDockview` component. - -```tsx -import { ReactDockview } from 'dockview'; -``` - -| Property | Type | Optional | Default | Description | -| ------------------- | ------------------------------------ | -------- | ------- | ------------------------------------------------------------ | -| onReady | (event: SplitviewReadyEvent) => void | No | | | -| components | object | No | | | -| tabComponents | object | Yes | | | -| watermarkComponent | object | Yes | | | -| hideBorders | boolean | Yes | false | | -| className | string | Yes | '' | | -| disableAutoResizing | boolean | Yes | false | See Auto Resizing | -| onDidDrop | Event | Yes | false | | -| showDndOverlay | Event | Yes | false | | - -## Dockview API - -The Dockview API is exposed both at the `onReady` event and on each panel through `props.containerApi`. -Through this API you can control general features of the component and access all added panels. - -```tsx title="Dockview API via Panel component" -const MyComponent = (props: IDockviewPanelProps<{ title: string }>) => { - // props.containerApi... - - return
{`My first panel has the title: ${props.params.title}`}
; -}; -``` - -```tsx title="Dockview API via the onReady callback" -const onReady = (event: DockviewReadyEvent) => { - // event.api... -}; -``` - -| Property | Type | Description | -| ---------------------- | ---------------------------------------------------- | -------------------------------------------------------- | -| height | `number` | Component pixel height | -| width | `number` | Component pixel width | -| minimumHeight | `number` | | -| maximumHeight | `number` | | -| maximumWidth | `number` | | -| maximumWidth | `number` | | -| length | `number` | Number of panels | -| size | `number` | Number of Groups | -| panels | `IDockviewPanel[]` | | -| groups | `GroupPanel[]` | | -| activePanel | `IDockviewPanel \| undefined` | | -| activeGroup | `IDockviewPanel \| undefined` | | -| | | | -| onDidLayoutChange | `Event` | | -| onDidLayoutFromJSON | `Event` | | -| onDidAddGroup | `Event` | | -| onDidRemoveGroup | `Event` | | -| onDidActiveGroupChange | `Event` | | -| onDidAddPanel | `Event` | | -| onDidRemovePanel | `Event` | | -| onDidActivePanelChange | `Event` | | -| onDidDrop | `EventAuto Resizing | -| fromJSON | `(data: SerializedDockview): void` | Serialization | -| toJSON | `(): SerializedDockview` | Serialization | -| clear | `(): void` | Clears the current layout | - -## Dockview Panel API - -```tsx -const MyComponent = (props: IDockviewPanelProps<{ title: string }>) => { - // props.api... - - return
{`My first panel has the title: ${props.params.title}`}
; -}; -``` - -| Property | Type | Description | -| ---------------------- | ----------------------------------------------------------- | --------------- | -| id | `string` | Panel id | -| isFocused | `boolean` | Is panel focsed | -| isActive | `boolean` | Is panel active | -| width | `number` | Panel width | -| height | `number` | Panel height | -| onDidDimensionsChange | `Event` | | -| onDidFocusChange | `Event` | | -| onDidVisibilityChange | `Event` | | -| onDidActiveChange | `Event` | | -| setActive | `(): void` | | -| | | | -| onDidConstraintsChange | `onDidConstraintsChange: Event` | | -| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | | -| setSize | `(event: SizeEvent): void` | | -| | | | -| group | `GroupPanel | undefined` | -| isGroupActive | `boolean` | | -| title | `string` | | -| suppressClosable | `boolean` | | -| close | `(): void` | | -| setTitle | `(title: string): void` | | - -## Advanced Features - -### Resizing via API - -Each Dockview is comprised of a number of groups, each of which have a number of panels. -Logically most people would want to resize a panel but practically this really translates to resizing the group to which the panel belongs. - -From the api you can access the panels group object (`props.group`) which exposes it's own api object (`props.groups.api`). -This api is largly similar to the Gridview API. - -To resize an individual panel you could create a snippet similar to below. - -```tsx -const onResizePanel = () => { - props.api.group.api.setSize({ - height: 100, - }); -}; -``` - -```tsx -const onResizePanel = () => { - props.api.group.api.setSize({ - width: 100, - }); -}; -``` - -Here is a working example of resizing panels via these API methods. - - - -### Locked group - -Locking a group will disable all drop events for this group ensuring a user can not add additional panels to the group. -You can still add groups to a locked panel programatically using the API. - -```tsx -panel.group.locked = true; -``` - -### Group header - -You may wish to hide the header section of a group. This can achieved through setting the `hidden` variable on `panel.group.header`. - -```tsx -panel.group.header.hidden = true; -``` - -### Custom Tab Headers - -You can provide custom renderers for your tab headers. -A default implementation of `DockviewDefaultTab` is provided should you only wish to attach minor -changes and events that do not alter the default behaviour, for example to add a custom context menu event -handler. - -You are also free to define a custom renderer entirely from scratch and not make use of the `DockviewDefaultTab` component. - -```tsx title="Attaching a custom context menu event handlers to a custom header" -import { IDockviewPanelHeaderProps, DockviewDefaultTab } from 'dockview'; - -const MyCustomheader = (props: IDockviewPanelHeaderProps) => { - const onContextMenu = (event: React.MouseEvent) => { - event.preventDefault(); - alert('context menu'); - }; - return ; -}; -``` - -To use a custom renderer you can must register a collection of tab components - -```tsx -const tabComponents = { - myCustomHeader: MyCustomHeader, -}; - -return ; -``` - -```tsx -api.addPanel({ - id: 'panel_1', - component: 'default', - tabComponent: 'myCustomHeader', // <-- - title: 'Panel 1', -}); -``` - -You can also override the default tab renderer which will be used when no `tabComponent` is provided to the `addPanel` function. - -```tsx -; -``` - -As a simple example the below attachs a custom event handler for the context menu on all tabs as a default tab renderer - - - -### Rendering - -Although `DockviewReact` will only add those tabs that are visible to the DOM all associated React Components for each tab including those that -are not initially visible will be created. -This will mean that any hooks in those components will run and if you running expensive operations in the tabs you may end up doing a lot of initial -work for what are hidden tabs. - -This is the default behaviour to ensure the greatest flexibility for the user but you can create a Higher-Order component wrapping your components that -will ensure the component is only created if the tab is visible as below: - -```tsx -import { PanelApi } from 'dockview'; -import * as React from 'react'; - -function RenderWhenVisible< - T extends { api: Pick } ->(component: React.FunctionComponent) { - const HigherOrderComponent = (props: T) => { - const [visible, setVisible] = React.useState( - props.api.isVisible - ); - - React.useEffect(() => { - const disposable = props.api.onDidVisibilityChange((event) => - setVisible(event.isVisible) - ); - - return () => { - disposable.dispose(); - }; - }, [props.api]); - - if (!visible) { - return null; - } - - return React.createElement(component, props); - }; - return HigherOrderComponent; -} -``` - -```tsx -const component = RenderWhenVisible(MyComponent); -``` - -Through toggling the checkbox you can see that when you only render those panels which are visible the underling React component is destroyed when it becomes hidden and re-created when it becomes visible. - - -
- -
- -### Drag And Drop - -The component exposes some method to help determine whether external drag events should be interacted with or not. - -```tsx -/** - * called when an ondrop event which does not originate from the dockview libray and - * passes the showDndOverlay condition occurs - **/ -const onDidDrop = (event: DockviewDropEvent) => { - const { group } = event; - - event.api.addPanel({ - id: 'test', - component: 'default', - position: { - referencePanel: group.activePanel.id, - direction: 'within', - }, - }); -}; - -/** - * 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; -}; - -return ( - -); -``` - - - -### Events - - - -### 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`. - - - -### Group Controls Panel - -`DockviewReact` accepts a prop `groupControlComponent` which expects a React component whos props are `IDockviewGroupControlProps`. -This control will be rendered inside the header bar on the right hand side for each group of tabs. - -```tsx -const Component: React.FunctionComponent = () => { - return
{'...'}
; -}; - -return ; -``` diff --git a/packages/docs/versioned_docs/version-1.5.2/components/gridview.mdx b/packages/docs/versioned_docs/version-1.5.2/components/gridview.mdx deleted file mode 100644 index d531f7fdc..000000000 --- a/packages/docs/versioned_docs/version-1.5.2/components/gridview.mdx +++ /dev/null @@ -1,120 +0,0 @@ ---- -description: Gridview Documentation ---- - -import { SimpleGridview } from '@site/src/components/simpleGridview'; -import { EventsGridview } from '@site/src/components/gridview/events'; -import Link from '@docusaurus/Link'; - -# Gridview - -## Introduction - -
- -
- -## GridviewReact Component - -```tsx -import { ReactGridview } from 'dockview'; -``` - -| Property | Type | Optional | Default | Description | -| ------------------- | ------------------------------------ | -------- | ---------------------- | ------------------------------------------------------------------------ | -| onReady | (event: SplitviewReadyEvent) => void | No | | | -| components | object | No | | | -| orientation | Orientation | Yes | Orientation.HORIZONTAL | | -| proportionalLayout | boolean | Yes | true | See Proportional layout | -| hideBorders | boolean | Yes | false | | -| className | string | Yes | '' | | -| disableAutoResizing | boolean | Yes | false | See Auto Resizing | - -## Gridview API - -```tsx -const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => { - // props.containerApi... - - return
{`My first panel has the title: ${props.params.title}`}
; -}; -``` - -```tsx -const onReady = (event: GridviewReadyEvent) => { - // event.api... -}; -``` - -| Property | Type | Description | -| ---------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | -| height | `number` | Component pixel height | -| width | `number` | Component pixel width | -| minimumHeight | `number` | | -| maximumHeight | `number` | | -| maximumWidth | `number` | | -| maximumWidth | `number` | | -| length | `number` | Number of panels | -| panels | `ISplitviewPanel[]` | all panels | -| orientation | `Orientation` | | -| | | | -| onDidLayoutChange | `Event` | Fires on layout change | -| onDidLayoutFromJSON | `Event` | Fires of layout change caused by a fromJSON deserialization call | -| onDidAddPanel | `Event` | Fires when a view is added | -| onDidRemovePanel | `Event` | Fires when a view is removed | -| onDidActivePanelChange | `Event` | Fires when the active group changes | -| | | | -| addPanel | `addPanel(options: AddComponentOptions): IGridviewPanel` | | -| removePanel | `(panel: IGridviewPanel, sizing?: Sizing): void` | | -| movePanel | `(panel: IGridviewPanel, options: {direction: Direction, refernece:string, size?: number}): void` | | -| getPanel | `(id: string) \| IGridviewPanel \| undefined` | | -| | | | -| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | | -| focus | `(): void` | Focus the active panel, if exists | -| layout | `(width: number, height:number): void` | Auto Resizing | -| fromJSON | `(data: SerializedGridview): void` | Serialization | -| toJSON | `(): SerializedGridview` | Serialization | -| clear | `(): void` | Clears the current layout | - -## Gridview Panel API - -```tsx -const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => { - // props.api... - - return
{`My first panel has the title: ${props.params.title}`}
; -}; -``` - -| Property | Type | Description | -| ---------------------- | ----------------------------------------------------------- | ---------------- | -| id | `string` | Panel id | -| isFocused | `boolean` | Is panel focsed | -| isActive | `boolean` | Is panel active | -| isVisible | `boolean` | Is panel visible | -| width | `number` | Panel width | -| height | `number` | Panel height | -| | | | -| onDidDimensionsChange | `Event` | | -| onDidFocusChange | `Event` | | -| onDidVisibilityChange | `Event` | | -| onDidActiveChange | `Event` | | -| onDidConstraintsChange | `onDidConstraintsChange: Event` | | -| | | | -| setVisible | `(isVisible: boolean): void` | | -| setActive | `(): void` | | -| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | | -| setSize | `(event: SizeEvent): void` | | - -## Events - -`GridviewReact` exposes a number of events that the developer can listen to and below is a simple example with a log panel showing those events that occur. - - diff --git a/packages/docs/versioned_docs/version-1.5.2/components/paneview.mdx b/packages/docs/versioned_docs/version-1.5.2/components/paneview.mdx deleted file mode 100644 index 87efc8eaa..000000000 --- a/packages/docs/versioned_docs/version-1.5.2/components/paneview.mdx +++ /dev/null @@ -1,285 +0,0 @@ ---- -description: Paneview Documentation ---- - -import { SimplePaneview } from '@site/src/components/simplePaneview'; -import { CustomHeaderPaneview } from '@site/src/components/paneview/customHeader'; -import { DragAndDropPaneview } from '@site/src/components/paneview/dragAndDrop'; -import { SideBySidePaneview } from '@site/src/components/paneview/sideBySide'; -import Link from '@docusaurus/Link'; - -# Paneview - -A paneview is a collapsed collection of vertically stacked panels and panel headers. -The panel header will always remain visible however the panel will only be visible when the panel is expanded. - -:::info - -Paneview panels can be re-ordered by dragging and dropping the panel headers. - -::: - ---- - -# Introduction - -
- -
- -```tsx title="Simple Paneview example" -import { - IPaneviewPanelProps, - PaneviewReact, - PaneviewReadyEvent, -} from 'dockview'; - -const components = { - default: (props: IPaneviewPanelProps<{ title: string }>) => { - return ( -
- {props.params.title} -
- ); - }, -}; - -SimplePaneview = () => { - const onReady = (event: PaneviewReadyEvent) => { - event.api.addPanel({ - id: 'panel_1', - component: 'default', - params: { - title: 'Panel 1', - }, - title: 'Panel 1', - }); - - event.api.addPanel({ - id: 'panel_2', - component: 'default', - params: { - title: 'Panel 2', - }, - title: 'Panel 2', - }); - - event.api.addPanel({ - id: 'panel_3', - component: 'default', - params: { - title: 'Panel 3', - }, - title: 'Panel 3', - }); - }; - - return ( - - ); -}; -``` - -## PaneviewReact Component - -You can create a Paneview through the use of the `ReactPaneview` component. - -```tsx -import { ReactPaneview } from 'dockview'; -``` - -| Property | Type | Optional | Default | Description | -| ------------------- | ------------------------------------ | -------- | ------- | -------------------------------------------------------- | -| onReady | (event: SplitviewReadyEvent) => void | No | | | -| components | object | No | | | -| headerComponents | object | Yes | | | -| className | string | Yes | '' | | -| disableAutoResizing | boolean | Yes | false | Auto Resizing | -| disableDnd | boolean | Yes | false | | -| onDidDrop | Event | Yes | | | - -## Paneview API - -The Paneview API is exposed both at the `onReady` event and on each panel through `props.containerApi`. -Through this API you can control general features of the component and access all added panels. - -```tsx title="Paneview API via Panel component" -const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => { - // props.containerApi... - - return
{`My first panel has the title: ${props.params.title}`}
; -}; -``` - -```tsx title="Paneview API via the onReady callback" -const onReady = (event: GridviewReadyEvent) => { - // event.api... -}; -``` - -| Property | Type | Description | -| ------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -| height | `number` | Component pixel height | -| width | `number` | Component pixel width | -| minimumSize | `number` | The sum of the `minimumSize` property for each panel | -| maximumSize | `number` | The sum of the `maximumSize` property for each panel | -| length | `number` | Number of panels | -| panels | `IPaneviewPanel[]` | All panels | -| | | | -| onDidLayoutChange | `Event` | Fires on layout change | -| onDidLayoutFromJSON | `Event` | Fires of layout change caused by a fromJSON deserialization call | -| onDidAddView | `Event` | Fires when a view is added | -| onDidRemoveView | `Event` | Fires when a view is removed | -| onDidDrop | `EventDrag and Drop) | -| | | | -| addPanel | `addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel` | | -| removePanel | `(panel: IPaneviewPanel): void` | | -| movePanel | `(from: number, to: number): void` | | -| getPanel | `(id:string): IPaneviewPanel \| undefined` | | -| | | | -| focus | `(): void` | Focus the active panel, if exists | -| layout | `(width: number, height:number): void` | See Auto Resizing | -| fromJSON | `(data: SerializedPaneview): void` | Serialization | -| toJSON | `(): SerializedPaneview` | Serialization | -| clear | `(): void` | Clears the current layout | - -## Paneview Panel API - -```tsx -const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => { - // props.api... - - return
{`My first panel has the title: ${props.params.title}`}
; -}; -``` - -| Property | Type | Description | -| ---------------------- | ----------------------------------------------------------- | ---------------- | -| id | `string` | Panel id | -| isFocused | `boolean` | Is panel focsed | -| isActive | `boolean` | Is panel active | -| isVisible | `boolean` | Is panel visible | -| width | `number` | Panel width | -| height | `number` | Panel height | -| | | -| onDidDimensionsChange | `Event` | | -| onDidFocusChange | `Event` | | -| onDidVisibilityChange | `Event` | | -| onDidActiveChange | `Event` | | -| onDidConstraintsChange | `onDidConstraintsChange: Event` | | -| | | -| setVisible | `(isVisible: boolean): void` | | -| setActive | `(): void` | | -| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | | -| setSize | `(event: SizeEvent): void` | | - -## Advanced Features - -### Custom Header - -You can provide a custom component to render an alternative header. - -
- -
- -You can provide a `headerComponent` option when creating a panel to tell the library to use a custom header component. - -```tsx -const onReady = (event: PaneviewReadyEvent) => { - event.api.addPanel({ - id: 'panel_1', - component: 'default', - headerComponent: 'myHeaderComponent', - params: { - valueA: 'A', - }, - title: 'Panel 1', - }); -}; -``` - -This header must be defined in the collection of components provided to the `headerComponents` props for `ReactPaneivew` - -```tsx -import { IPaneviewPanelProps } from 'dockview'; - -const MyHeaderComponent = (props: IPaneviewPanelProps<{ title: string }>) => { - const [expanded, setExpanded] = React.useState( - props.api.isExpanded - ); - - React.useEffect(() => { - const disposable = props.api.onDidExpansionChange((event) => { - setExpanded(event.isExpanded); - }); - - return () => { - disposable.dispose(); - }; - }, []); - - const onClick = () => { - props.api.setExpanded(!expanded); - }; - - return ( - - ); -}; - -const headerComponents = { myHeaderComponent: MyHeaderComponent }; -``` - -### Drag And Drop - -If you provide the `PaneviewReact` component with the prop `onDidDrop` you will be able to interact with custom drop events. - - - -### Interactions - -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`. - -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. - - diff --git a/packages/docs/versioned_docs/version-1.5.2/components/splitview.mdx b/packages/docs/versioned_docs/version-1.5.2/components/splitview.mdx deleted file mode 100644 index a32e6d5a2..000000000 --- a/packages/docs/versioned_docs/version-1.5.2/components/splitview.mdx +++ /dev/null @@ -1,246 +0,0 @@ ---- -description: Splitview Documentation ---- - -import { SimpleSplitview } from '@site/src/components/simpleSplitview'; -import { SplitviewExample1 } from '@site/src/components/splitview/active'; -import Link from '@docusaurus/Link'; - -# Splitview - -## Introduction - -A Splitview is a collection of resizable horizontally or vertically stacked panels. - -
- -
- -```tsx title="Simple Splitview example" -import { - ISplitviewPanelProps, - Orientation, - SplitviewReact, - SplitviewReadyEvent, -} from 'dockview'; - -const components = { - default: (props: ISplitviewPanelProps<{ title: string }>) => { - return
{props.params.title}
; - }, -}; - -export const SimpleSplitview = () => { - const onReady = (event: SplitviewReadyEvent) => { - event.api.addPanel({ - id: 'panel_1', - component: 'default', - params: { - title: 'Panel 1', - }, - }); - - event.api.addPanel({ - id: 'panel_2', - component: 'default', - params: { - title: 'Panel 2', - }, - }); - - event.api.addPanel({ - id: 'panel_3', - component: 'default', - params: { - title: 'Panel 3', - }, - }); - }; - - return ( - - ); -}; -``` - -## SplitviewReact Component - -You can create a Splitview through the use of the `ReactSplitview` component. - -```tsx -import { ReactSplitview } from 'dockview'; -``` - -Using the `onReady` prop you can access to the component `api` and add panels either through deserialization or the individual addition of panels. - -| Property | Type | Optional | Default | Description | -| ------------------- | -------------------------------------- | -------- | ------------------------ | ------------------------------------------------------------------------ | -| onReady | `(event: SplitviewReadyEvent) => void` | No | | Function | -| components | `Record` | No | | Panel renderers | -| orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview | -| proportionalLayout | `boolean` | Yes | `true` | See Proportional layout | -| hideBorders | `boolean` | Yes | `false` | Hide the borders between panels | -| className | `string` | Yes | `''` | Attaches a classname | -| disableAutoResizing | `boolean` | Yes | `false` | See Auto Resizing | - -## Splitview API - -The Splitview API is exposed both at the `onReady` event and on each panel through `props.containerApi`. -Through this API you can control general features of the component and access all added panels. - -```tsx title="Splitview API via Panel component" -const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => { - // props.containerApi... - - return
{`My first panel has the title: ${props.params.title}`}
; -}; -``` - -```tsx title="Splitview API via the onReady callback" -const onReady = (event: SplitviewReadyEvent) => { - // event.api... -}; -``` - -| Property | Type | Description | -| ------------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------- | -| height | `number` | Component pixel height | -| width | `number` | Component pixel width | -| minimumSize | `number` | The sum of the `minimumSize` property for each panel | -| maximumSize | `number` | The sum of the `maximumSize` property for each panel | -| length | `number` | Number of panels | -| panels | `ISplitviewPanel[]` | All panels | -| | | | -| onDidLayoutChange | `Event` | Fires on layout change | -| onDidLayoutFromJSON | `Event` | Fires of layout change caused by a fromJSON deserialization call | -| onDidAddView | `Event` | Fires when a view is added | -| onDidRemoveView | `Event` | Fires when a view is removed | -| | | | -| addPanel | `addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel` | | -| removePanel | `(panel: ISplitviewPanel, sizing?: Sizing): void` | | -| getPanel | `(id:string): ISplitviewPanel \| undefined` | | -| movePanel | `(from: number, to: number): void` | | -| | | -| updateOptions | `(options: SplitviewComponentUpdateOptions): void` | | -| focus | `(): void` | Focus the active panel, if exists | -| layout | `(width: number, height:number): void` | See Auto Resizing | -| fromJSON | `(data: SerializedSplitview): void` | Serialization | -| toJSON | `(): SerializedSplitview` | Serialization | -| clear | `(): void` | Clears the current layout | - -## Splitview Panel API - -The Splitview panel API is exposed on each panel containing actions and variables specific to that panel. - -```tsx title="Splitview panel API via Panel component" -const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => { - // props.api... - - return
{`My first panel has the title: ${props.params.title}`}
; -}; -``` - -| Property | Type | Description | -| ---------------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | -| id | `string` | Panel id | -| isFocused | `boolean` | Is panel focsed | -| isActive | `boolean` | Is panel active | -| isVisible | `boolean` | Is panel visible | -| width | `number` | Panel width | -| height | `number` | Panel height | -| | | | -| onDidDimensionsChange | `Event` | Fires when panel dimensions change | -| onDidFocusChange | `Event` | Fire when panel is focused and blurred | -| onDidVisibilityChange | `Event` | Fires when the panels visiblity property is changed (see Panel Visibility) | -| onDidActiveChange | `Event` | Fires when the panels active property is changed (see Active Panel) | -| onDidConstraintsChange | `onDidConstraintsChange: Event` | Fires when the panels size contrainsts change (see Panel Constraints) | -| | | | -| setVisible | `(isVisible: boolean): void` | | -| setActive | `(): void` | | -| | | | -| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | | -| setSize | `(event: PanelSizeEvent): void` | | - -## Advanced Features - -Listed below are some functionalities avalaible through both the panel and component APIs. The live demo shows examples of these in real-time. - -
- -
- -### Visibility - -A panels visibility can be controlled and monitored through the following code. -A panel with visibility set to `false` will remain as a part of the components list of panels but will not be rendered. - -```tsx -const disposable = props.api.onDidVisibilityChange(({ isVisible }) => { - // -}); -``` - -```tsx -api.setVisible(true); -``` - -### Active - -Only one panel in the `splitview` can be the active panel at any one time. -Setting a panel as active will set all the others as inactive. -A focused panel is always the active panel but an active panel is not always focused. - -```tsx -const disposable = props.api.onDidActiveChange(({ isActive }) => { - // -}); -``` - -```tsx -api.setActive(); -``` - -### Contraints - -When adding a panel you can specify pixel size contraints - -```tsx -event.api.addPanel({ - id: 'panel_3', - component: 'default', - minimumSize: 100, - maximumSize: 1000, -}); -``` - -These contraints can be updated throughout the lifecycle of the `splitview` using the panel API - -```tsx -props.api.onDidConstraintsChange(({ maximumSize, minimumSize }) => { - // -}); -``` - -```tsx -api.setConstraints({ - maximumSize: 200, - minimumSize: 400, -}); -``` diff --git a/packages/docs/versioned_docs/version-1.5.2/examples.mdx b/packages/docs/versioned_docs/version-1.5.2/examples.mdx deleted file mode 100644 index e608a2378..000000000 --- a/packages/docs/versioned_docs/version-1.5.2/examples.mdx +++ /dev/null @@ -1,25 +0,0 @@ ---- -sidebar_position: 4 -description: Dockview examples ---- - -import { SimpleSplitview } from '@site/src/components/simpleSplitview'; -import { SimpleGridview } from '@site/src/components/simpleGridview'; -import { SimplePaneview } from '@site/src/components/simplePaneview'; -import { SimpleDockview } from '@site/src/components/simpleDockview'; - -# Examples - - diff --git a/packages/docs/versioned_docs/version-1.5.2/index.mdx b/packages/docs/versioned_docs/version-1.5.2/index.mdx deleted file mode 100644 index 12068f080..000000000 --- a/packages/docs/versioned_docs/version-1.5.2/index.mdx +++ /dev/null @@ -1,149 +0,0 @@ ---- -sidebar_position: 0 -description: A zero dependency layout manager built for React ---- - -import { SimpleSplitview } from '@site/src/components/simpleSplitview'; -import { SimpleGridview } from '@site/src/components/simpleGridview'; -import { SimplePaneview } from '@site/src/components/simplePaneview'; -import { SimpleDockview } from '@site/src/components/simpleDockview'; - -# Introduction - -**dockview** is a zero dependency layout manager that supports tab, grids and splitviews. - -## Features - -- Themable and customizable -- Support for the serialization and deserialization of layouts -- Drag and drop support - -## Quick start - -`dockview` has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. To install `dockview` you can run: - -```shell -npm install dockview -``` - -You must also import the dockview stylesheet found under [`dockview/dict/styles/dockview.css`](https://unpkg.com/browse/dockview@latest/dist/styles/dockview.css), -depending on your solution this might be: - -```css -@import './node_modules/dockview/dist/styles/dockview.css'; -``` - -A dark and light theme are provided, one of these classes (or a custom theme) must be attached at any point above your components in the HTML tree. To cover the entire web page you might attach the class to the `body` component: - -```html - - ... - - - ... - -``` - -There are 4 components you may want to use: - -Splitview - -
- -
- -
- -
- -
- -
- -
- -
- -```tsx -import { - DockviewReact, - DockviewReadyEvent, - PanelCollection, - IDockviewPanelProps, - IDockviewPanelHeaderProps, -} from 'dockview'; - -const components: PanelCollection = { - default: (props: IDockviewPanelProps<{ someProps: string }>) => { - return
{props.params.someProps}
; - }, -}; - -const headers: PanelCollection = { - customTab: (props: IDockviewPanelHeaderProps) => { - return ( -
- {props.api.title} - props.api.close()}>{'[x]'} -
- ); - }, -}; - -const Component = () => { - const onReady = (event: DockviewReadyEvent) => { - event.api.addPanel({ - id: 'panel1', - component: 'default', - tabComponent: 'customTab', // optional custom header - params: { - someProps: 'Hello', - }, - }); - event.api.addPanel({ - id: 'panel2', - component: 'default', - params: { - someProps: 'World', - }, - position: { referencePanel: 'panel1', direction: 'below' }, - }); - }; - - return ( - - ); -}; -``` diff --git a/packages/docs/versioned_docs/version-1.5.2/theme.mdx b/packages/docs/versioned_docs/version-1.5.2/theme.mdx deleted file mode 100644 index bd770f5d7..000000000 --- a/packages/docs/versioned_docs/version-1.5.2/theme.mdx +++ /dev/null @@ -1,89 +0,0 @@ ---- -sidebar_position: 3 -description: Theming Dockview Components ---- - -import { CustomCSSDockview } from '@site/src/components/dockview/customCss'; - -# Theme - -## Introduction - -`dockview` requires some css to work correctly. -The css is exported as one file under [`dockview/dict/styles/dockview.css`](https://unpkg.com/browse/dockview@latest/dist/styles/dockview.css) -and depending can be imported - -```css -@import './node_modules/dockview/dist/styles/dockview.css'; -``` - -## Provided themes - -The following are provided as classes that you can attached to your components for themeing - -- `.dockview-theme-light` -- `.dockview-theme-dark` -- `.dockview-theme-abyss` - -## Customizing Theme - -`dockview` supports theming through the use of css properties. -You can view the built-in themes at [`dockview/src/theme.scss`](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/theme.scss) -and are free to build your own themes based on these css properties. - -| CSS Property | Description | -| ---------------------------------------------------- | ----------- | -| --dv-paneview-active-outline-color | | -| --dv-tabs-and-actions-container-font-size | | -| --dv-tabs-and-actions-container-height | | -| --dv-tab-close-icon | | -| --dv-drag-over-background-color | | -| --dv-drag-over-border-color | | -| --dv-tabs-container-scrollbar-color | | -| | | -| --dv-group-view-background-color | | -| | | -| --dv-tabs-and-actions-container-background-color | | -| | | -| --dv-activegroup-visiblepanel-tab-background-color | | -| --dv-activegroup-hiddenpanel-tab-background-color | | -| --dv-inactivegroup-visiblepanel-tab-background-color | | -| --dv-inactivegroup-hiddenpanel-tab-background-color | | -| --dv-tab-divider-color | | -| | | -| --dv-activegroup-visiblepanel-tab-color | | -| --dv-activegroup-hiddenpanel-tab-color | | -| --dv-inactivegroup-visiblepanel-tab-color | | -| --dv-inactivegroup-hiddenpanel-tab-color | | -| | | -| --dv-separator-border | | -| --dv-paneview-header-border-color | | - -You can further customise the theme through adjusting class properties but this is up you. -As an example if you wanted to add a bottom border to the tab container for an active group in the `DockviewReact` component you could write: - -```css -.groupview { - &.active-group { - > .tabs-and-actions-container { - border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color); - } - } - &.inactive-group { - > .tabs-and-actions-container { - border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color); - } - } -} -``` - -
- -
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 972b8410c..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 @@ -2,27 +2,25 @@ description: Dockview Documentation --- -import { SimpleDockview } from '@site/src/components/simpleDockview'; 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 { ResizeDockview } from '@site/src/components/dockview/resize'; -import { DockviewGroupControl } from '@site/src/components/dockview/groupControl'; -import { DockviewWatermark } from '@site/src/components/dockview/watermark'; -import { DockviewPersistance } from '@site/src/components/dockview/persistance'; -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-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 ## Introduction diff --git a/packages/docs/versioned_docs/version-1.6.0/examples.mdx b/packages/docs/versioned_docs/version-1.6.0/examples.mdx deleted file mode 100644 index e608a2378..000000000 --- a/packages/docs/versioned_docs/version-1.6.0/examples.mdx +++ /dev/null @@ -1,25 +0,0 @@ ---- -sidebar_position: 4 -description: Dockview examples ---- - -import { SimpleSplitview } from '@site/src/components/simpleSplitview'; -import { SimpleGridview } from '@site/src/components/simpleGridview'; -import { SimplePaneview } from '@site/src/components/simplePaneview'; -import { SimpleDockview } from '@site/src/components/simpleDockview'; - -# Examples - - diff --git a/packages/docs/versioned_docs/version-1.6.0/index.mdx b/packages/docs/versioned_docs/version-1.6.0/index.mdx index 12068f080..0e96a515f 100644 --- a/packages/docs/versioned_docs/version-1.6.0/index.mdx +++ b/packages/docs/versioned_docs/version-1.6.0/index.mdx @@ -6,7 +6,7 @@ description: A zero dependency layout manager built for React import { SimpleSplitview } from '@site/src/components/simpleSplitview'; import { SimpleGridview } from '@site/src/components/simpleGridview'; import { SimplePaneview } from '@site/src/components/simplePaneview'; -import { SimpleDockview } from '@site/src/components/simpleDockview'; +import SimpleDockview from '@site/sandboxes/simple-dockview/src/app'; # Introduction diff --git a/packages/docs/versioned_sidebars/version-1.5.1-sidebars.json b/packages/docs/versioned_sidebars/version-1.5.1-sidebars.json deleted file mode 100644 index caea0c03b..000000000 --- a/packages/docs/versioned_sidebars/version-1.5.1-sidebars.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "tutorialSidebar": [ - { - "type": "autogenerated", - "dirName": "." - } - ] -} diff --git a/packages/docs/versioned_sidebars/version-1.5.2-sidebars.json b/packages/docs/versioned_sidebars/version-1.5.2-sidebars.json deleted file mode 100644 index caea0c03b..000000000 --- a/packages/docs/versioned_sidebars/version-1.5.2-sidebars.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "tutorialSidebar": [ - { - "type": "autogenerated", - "dirName": "." - } - ] -} diff --git a/packages/docs/versions.json b/packages/docs/versions.json index 74b7fa6e1..abf62e307 100644 --- a/packages/docs/versions.json +++ b/packages/docs/versions.json @@ -1,5 +1,3 @@ [ - "1.6.0", - "1.5.2", - "1.5.1" -] + "1.6.0" +] \ No newline at end of file