diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index 4d276169b..be48bfccc 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -22,7 +22,7 @@ "/packages/docs/sandboxes/simple-dockview", "/packages/docs/sandboxes/tabheight-dockview", "/packages/docs/sandboxes/updatetitle-dockview", - "/packages/docs/sandboxes/vanilla-dockview", + "/packages/docs/sandboxes/typescript/vanilla-dockview", "/packages/docs/sandboxes/watermark-dockview" ], "node": "16" diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx index b6d1a3e46..8a4807c11 100644 --- a/packages/docs/docs/components/dockview.mdx +++ b/packages/docs/docs/components/dockview.mdx @@ -2,7 +2,10 @@ description: Dockview Documentation --- -import { Container } from '@site/src/components/ui/container'; +import { + Container, + MultiFrameworkContainer, +} from '@site/src/components/ui/container'; import Link from '@docusaurus/Link'; import useBaseUrl from '@docusaurus/useBaseUrl'; @@ -24,7 +27,9 @@ import RenderingDockview from '@site/sandboxes/rendering-dockview/src/app'; import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app'; import DockviewResizeContainer from '@site/sandboxes/resizecontainer-dockview/src/app'; import DockviewTabheight from '@site/sandboxes/tabheight-dockview/src/app'; -import { attach as attachDockviewVanilla } from '@site/sandboxes/vanilla-dockview/src/app'; + +import { attach as attachDockviewVanilla } from '@site/sandboxes/javascript/vanilla-dockview/src/app'; +import { attach as attachSimpleDockview } from '@site/sandboxes/javascript/simple-dockview/src/app'; # Dockview @@ -32,12 +37,16 @@ import { attach as attachDockviewVanilla } from '@site/sandboxes/vanilla-dockvie 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. +
+ +> 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 @@ -705,19 +714,11 @@ If you wish to interact with the drop event from one dockview instance in anothe -### Example - -hello +### Window-like mananger with tabs -hello 2 - -
- -
- -## VanillaJS +## Vanilla JS > Note: This section is experimental and support for Vanilla JS is a work in progress. @@ -728,6 +729,6 @@ The core library is published as an independant package under the name `dockview > `dockview-core` is a dependency of `dockview` and automatically installed during the installation process of `dockview` via `npm install dockview`. diff --git a/packages/docs/sandboxes/javascript/simple-dockview/package.json b/packages/docs/sandboxes/javascript/simple-dockview/package.json new file mode 100644 index 000000000..bc36e6b5d --- /dev/null +++ b/packages/docs/sandboxes/javascript/simple-dockview/package.json @@ -0,0 +1,27 @@ +{ + "name": "javascript-simple-dockview", + "description": "", + "keywords": [ + "dockview" + ], + "version": "1.0.0", + "main": "src/index.ts", + "dependencies": { + "dockview-core": "*" + }, + "devDependencies": { + "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/vanilla-dockview/public/index.html b/packages/docs/sandboxes/javascript/simple-dockview/public/index.html similarity index 100% rename from packages/docs/sandboxes/vanilla-dockview/public/index.html rename to packages/docs/sandboxes/javascript/simple-dockview/public/index.html diff --git a/packages/docs/sandboxes/javascript/simple-dockview/src/app.ts b/packages/docs/sandboxes/javascript/simple-dockview/src/app.ts new file mode 100644 index 000000000..e368f3e42 --- /dev/null +++ b/packages/docs/sandboxes/javascript/simple-dockview/src/app.ts @@ -0,0 +1,114 @@ +import { + DockviewComponent, + IContentRenderer, + IGroupPanelInitParameters, +} from 'dockview-core'; + +class DefaultPanel implements IContentRenderer { + private _element: HTMLElement; + + get element(): HTMLElement { + return this._element; + } + + constructor() { + this._element = document.createElement('div'); + this._element.style.padding = '20px'; + this._element.style.color = 'white'; + } + + init(params: IGroupPanelInitParameters): void { + this._element.textContent = params.params.title; + } +} + +export function attach(parent: HTMLElement): { + dispose: () => void; +} { + const element = document.createElement('div'); + element.className = 'dockview-theme-abyss'; + element.style.height = '100%'; + element.style.width = '100%'; + + const dockview = new DockviewComponent({ + components: { + default: DefaultPanel, + }, + parentElement: element, + }); + + parent.appendChild(element); + + const { clientWidth, clientHeight } = parent; + dockview.layout(clientWidth, clientHeight); + + const panel = dockview.addPanel({ + id: 'panel_1', + component: 'default', + params: { + title: 'Panel 1', + }, + }); + + panel.group.locked = true; + panel.group.header.hidden = true; + + dockview.addPanel({ + id: 'panel_2', + component: 'default', + params: { + title: 'Panel 2', + }, + }); + + dockview.addPanel({ + id: 'panel_3', + component: 'default', + params: { + title: 'Panel 3', + }, + }); + + dockview.addPanel({ + id: 'panel_4', + component: 'default', + params: { + title: 'Panel 4', + }, + position: { referencePanel: 'panel_1', direction: 'right' }, + }); + + const panel5 = dockview.addPanel({ + id: 'panel_5', + component: 'default', + params: { + title: 'Panel 5', + }, + position: { referencePanel: 'panel_3', direction: 'right' }, + }); + + dockview.addPanel({ + id: 'panel_6', + component: 'default', + params: { + title: 'Panel 6', + }, + position: { referencePanel: 'panel_5', direction: 'below' }, + }); + + dockview.addPanel({ + id: 'panel_7', + component: 'default', + params: { + title: 'Panel 7', + }, + position: { referencePanel: 'panel_6', direction: 'right' }, + }); + + return { + dispose: () => { + dockview.dispose(); + element.remove(); + }, + }; +} diff --git a/packages/docs/sandboxes/vanilla-dockview/src/index.ts b/packages/docs/sandboxes/javascript/simple-dockview/src/index.tsx similarity index 100% rename from packages/docs/sandboxes/vanilla-dockview/src/index.ts rename to packages/docs/sandboxes/javascript/simple-dockview/src/index.tsx diff --git a/packages/docs/sandboxes/vanilla-dockview/src/styles.css b/packages/docs/sandboxes/javascript/simple-dockview/src/styles.css similarity index 100% rename from packages/docs/sandboxes/vanilla-dockview/src/styles.css rename to packages/docs/sandboxes/javascript/simple-dockview/src/styles.css diff --git a/packages/docs/sandboxes/vanilla-dockview/tsconfig.json b/packages/docs/sandboxes/javascript/simple-dockview/tsconfig.json similarity index 100% rename from packages/docs/sandboxes/vanilla-dockview/tsconfig.json rename to packages/docs/sandboxes/javascript/simple-dockview/tsconfig.json diff --git a/packages/docs/sandboxes/vanilla-dockview/package.json b/packages/docs/sandboxes/javascript/vanilla-dockview/package.json similarity index 100% rename from packages/docs/sandboxes/vanilla-dockview/package.json rename to packages/docs/sandboxes/javascript/vanilla-dockview/package.json diff --git a/packages/docs/sandboxes/javascript/vanilla-dockview/public/index.html b/packages/docs/sandboxes/javascript/vanilla-dockview/public/index.html new file mode 100644 index 000000000..1f8a52426 --- /dev/null +++ b/packages/docs/sandboxes/javascript/vanilla-dockview/public/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/sandboxes/vanilla-dockview/src/app.ts b/packages/docs/sandboxes/javascript/vanilla-dockview/src/app.ts similarity index 100% rename from packages/docs/sandboxes/vanilla-dockview/src/app.ts rename to packages/docs/sandboxes/javascript/vanilla-dockview/src/app.ts diff --git a/packages/docs/sandboxes/javascript/vanilla-dockview/src/index.ts b/packages/docs/sandboxes/javascript/vanilla-dockview/src/index.ts new file mode 100644 index 000000000..249b56017 --- /dev/null +++ b/packages/docs/sandboxes/javascript/vanilla-dockview/src/index.ts @@ -0,0 +1,10 @@ +import './styles.css'; +import 'dockview-core/dist/styles/dockview.css'; + +import { attach } from './app'; + +const rootElement = document.getElementById('root'); + +if (rootElement) { + attach(rootElement); +} diff --git a/packages/docs/sandboxes/javascript/vanilla-dockview/src/styles.css b/packages/docs/sandboxes/javascript/vanilla-dockview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/javascript/vanilla-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/javascript/vanilla-dockview/tsconfig.json b/packages/docs/sandboxes/javascript/vanilla-dockview/tsconfig.json new file mode 100644 index 000000000..6e13e47b5 --- /dev/null +++ b/packages/docs/sandboxes/javascript/vanilla-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/src/app.tsx b/packages/docs/sandboxes/updatetitle-dockview/src/app.tsx index 93a3b1762..8c9115df6 100644 --- a/packages/docs/sandboxes/updatetitle-dockview/src/app.tsx +++ b/packages/docs/sandboxes/updatetitle-dockview/src/app.tsx @@ -6,10 +6,8 @@ import { import * as React from 'react'; const components = { - default: ( - props: IDockviewPanelProps<{ title: string; myValue: string }> - ) => { - const [title, setTitle] = React.useState(props.params.title); + default: (props: IDockviewPanelProps<{ myValue: string }>) => { + const [title, setTitle] = React.useState(props.api.title); const onChange = (event: React.ChangeEvent) => { setTitle(event.target.value); @@ -27,6 +25,7 @@ const components = { + {JSON.stringify(Object.keys(props.params))} ); }, @@ -44,7 +43,6 @@ export const App: React.FC = () => { id: 'panel_2', component: 'default', title: 'Panel 2', - position: { referencePanel: panel }, }); @@ -60,7 +58,6 @@ export const App: React.FC = () => { id: 'panel_4', component: 'default', title: 'Panel 4', - position: { referencePanel: panel3 }, }); }; diff --git a/packages/docs/src/components/ui/container.scss b/packages/docs/src/components/ui/container.scss new file mode 100644 index 000000000..e69de29bb diff --git a/packages/docs/src/components/ui/container.tsx b/packages/docs/src/components/ui/container.tsx index 1345315bf..5ad78067e 100644 --- a/packages/docs/src/components/ui/container.tsx +++ b/packages/docs/src/components/ui/container.tsx @@ -1,5 +1,8 @@ import * as React from 'react'; import { CodeSandboxButton } from './codeSandboxButton'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import './container.scss'; +import { Spinner } from './spinner'; export const Container = (props: { children?: React.ReactNode; @@ -41,3 +44,147 @@ export const Container = (props: { ); }; + +const ReactIcon = (props: { height: number; width: number }) => { + return ( + + ); +}; + +const JavascriptIcon = (props: { height: number; width: number }) => { + return ( + + ); +}; + +export const MultiFrameworkContainer = (props: { + react: React.FC; + typescript: (parent: HTMLElement) => { dispose: () => void }; + sandboxId: string; + height?: number; +}) => { + const ref = React.useRef(null); + + const [framework, setFramework] = React.useState('React'); + + const [animation, setAnimation] = React.useState(false); + + React.useEffect(() => { + setAnimation(true); + + setTimeout(() => { + setAnimation(false); + }, 500); + }, [framework]); + + React.useEffect(() => { + if (!ref.current) { + return; + } + + if (framework === 'Javascript') { + const disposable = props.typescript(ref.current); + + return () => { + disposable.dispose(); + }; + } + + return; + }, [props.typescript, framework]); + + const sandboxId = React.useMemo(() => { + if (framework === 'Javascript') { + return `javascript/${props.sandboxId}`; + } + return props.sandboxId; + }, [props.sandboxId, framework]); + + return ( + <> +
+ {animation && ( +
+ +
+ )} + {framework === 'React' && } +
+
+
+ {framework === 'React' ? ( + + ) : ( + + )} + +
+ + +
+ + ); +}; diff --git a/packages/docs/src/components/ui/referenceTable.tsx b/packages/docs/src/components/ui/referenceTable.tsx new file mode 100644 index 000000000..1423122cc --- /dev/null +++ b/packages/docs/src/components/ui/referenceTable.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; + +export interface ReferenceProps { + props: { + prop: string; + default?: string; + type: string; + }[]; +} + +export const ReferenceTable = (props: ReferenceProps) => { + return ( + + + + + + + + + + {props.props.map((property) => { + return ( + + + + + + ); + })} + +
PropertyTypeDefault
+ {property.prop} + + {property.type} + + {property.default !== undefined && ( + {property.default} + )} +
+ ); +}; diff --git a/packages/docs/src/components/ui/spinner.scss b/packages/docs/src/components/ui/spinner.scss new file mode 100644 index 000000000..847ee4d22 --- /dev/null +++ b/packages/docs/src/components/ui/spinner.scss @@ -0,0 +1,55 @@ +.lds-ellipsis { + display: inline-block; + position: relative; + width: 80px; + height: 80px; +} +.lds-ellipsis div { + position: absolute; + top: 33px; + width: 13px; + height: 13px; + border-radius: 50%; + background: #fff; + animation-timing-function: cubic-bezier(0, 1, 1, 0); +} +.lds-ellipsis div:nth-child(1) { + left: 8px; + animation: lds-ellipsis1 0.6s infinite; +} +.lds-ellipsis div:nth-child(2) { + left: 8px; + animation: lds-ellipsis2 0.6s infinite; +} +.lds-ellipsis div:nth-child(3) { + left: 32px; + animation: lds-ellipsis2 0.6s infinite; +} +.lds-ellipsis div:nth-child(4) { + left: 56px; + animation: lds-ellipsis3 0.6s infinite; +} +@keyframes lds-ellipsis1 { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + } +} +@keyframes lds-ellipsis3 { + 0% { + transform: scale(1); + } + 100% { + transform: scale(0); + } +} +@keyframes lds-ellipsis2 { + 0% { + transform: translate(0, 0); + } + 100% { + transform: translate(24px, 0); + } +} diff --git a/packages/docs/src/components/ui/spinner.tsx b/packages/docs/src/components/ui/spinner.tsx new file mode 100644 index 000000000..9627e3762 --- /dev/null +++ b/packages/docs/src/components/ui/spinner.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; +import './spinner.scss'; + +export const Spinner = () => { + return ( +
+
+
+
+
+
+ ); +}; diff --git a/packages/docs/static/img/js-icon.svg b/packages/docs/static/img/js-icon.svg new file mode 100644 index 000000000..9650ca78e --- /dev/null +++ b/packages/docs/static/img/js-icon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/docs/static/img/react-icon.svg b/packages/docs/static/img/react-icon.svg new file mode 100644 index 000000000..ea77a618d --- /dev/null +++ b/packages/docs/static/img/react-icon.svg @@ -0,0 +1,9 @@ + + React Logo + + + + + + + diff --git a/packages/docs/versioned_docs/version-1.7.2/components/dockview.mdx b/packages/docs/versioned_docs/version-1.7.2/components/dockview.mdx index b6d1a3e46..8097910eb 100644 --- a/packages/docs/versioned_docs/version-1.7.2/components/dockview.mdx +++ b/packages/docs/versioned_docs/version-1.7.2/components/dockview.mdx @@ -24,7 +24,7 @@ import RenderingDockview from '@site/sandboxes/rendering-dockview/src/app'; import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app'; import DockviewResizeContainer from '@site/sandboxes/resizecontainer-dockview/src/app'; import DockviewTabheight from '@site/sandboxes/tabheight-dockview/src/app'; -import { attach as attachDockviewVanilla } from '@site/sandboxes/vanilla-dockview/src/app'; +import { attach as attachDockviewVanilla } from '@site/sandboxes/javascript/vanilla-dockview/src/app'; # Dockview @@ -728,6 +728,6 @@ The core library is published as an independant package under the name `dockview > `dockview-core` is a dependency of `dockview` and automatically installed during the installation process of `dockview` via `npm install dockview`.