From 4d1952387c3845a6e214983190f2798673416b7a Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Tue, 19 Sep 2023 20:59:23 +0100 Subject: [PATCH] chore: sandbox paneview examples --- .codesandbox/ci.json | 1 + packages/docs/docs/components/paneview.mdx | 14 +-- .../sandboxes/simple-paneview/package.json | 32 ++++++ .../simple-paneview/public/index.html | 44 ++++++++ .../sandboxes/simple-paneview/src/app.tsx | 104 ++++++++++++++++++ .../sandboxes/simple-paneview/src/index.tsx | 20 ++++ .../sandboxes/simple-paneview/src/styles.css | 16 +++ .../sandboxes/simple-paneview/tsconfig.json | 18 +++ 8 files changed, 238 insertions(+), 11 deletions(-) create mode 100644 packages/docs/sandboxes/simple-paneview/package.json create mode 100644 packages/docs/sandboxes/simple-paneview/public/index.html create mode 100644 packages/docs/sandboxes/simple-paneview/src/app.tsx create mode 100644 packages/docs/sandboxes/simple-paneview/src/index.tsx create mode 100644 packages/docs/sandboxes/simple-paneview/src/styles.css create mode 100644 packages/docs/sandboxes/simple-paneview/tsconfig.json diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index 986267fe3..10a0ad555 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -23,6 +23,7 @@ "/packages/docs/sandboxes/resize-dockview", "/packages/docs/sandboxes/resizecontainer-dockview", "/packages/docs/sandboxes/simple-dockview", + "/packages/docs/sandboxes/simple-paneview", "/packages/docs/sandboxes/tabheight-dockview", "/packages/docs/sandboxes/updatetitle-dockview", "/packages/docs/sandboxes/watermark-dockview", diff --git a/packages/docs/docs/components/paneview.mdx b/packages/docs/docs/components/paneview.mdx index c33fe43aa..4b7c9cc8b 100644 --- a/packages/docs/docs/components/paneview.mdx +++ b/packages/docs/docs/components/paneview.mdx @@ -2,7 +2,8 @@ description: Paneview Documentation --- -import { SimplePaneview } from '@site/src/components/simplePaneview'; +import { MultiFrameworkContainer } from '@site/src/components/ui/container'; +import SimplePaneview from '@site/sandboxes/simple-paneview/src/app'; import { CustomHeaderPaneview } from '@site/src/components/paneview/customHeader'; import { DragAndDropPaneview } from '@site/src/components/paneview/dragAndDrop'; import { SideBySidePaneview } from '@site/src/components/paneview/sideBySide'; @@ -23,16 +24,7 @@ Paneview panels can be re-ordered by dragging and dropping the panel headers. # Introduction -
- -
+ ```tsx title="Simple Paneview example" import { diff --git a/packages/docs/sandboxes/simple-paneview/package.json b/packages/docs/sandboxes/simple-paneview/package.json new file mode 100644 index 000000000..a6d697518 --- /dev/null +++ b/packages/docs/sandboxes/simple-paneview/package.json @@ -0,0 +1,32 @@ +{ + "name": "simple-paneview", + "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", + "react-scripts": "*" + }, + "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" + ] +} diff --git a/packages/docs/sandboxes/simple-paneview/public/index.html b/packages/docs/sandboxes/simple-paneview/public/index.html new file mode 100644 index 000000000..1f8a52426 --- /dev/null +++ b/packages/docs/sandboxes/simple-paneview/public/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/sandboxes/simple-paneview/src/app.tsx b/packages/docs/sandboxes/simple-paneview/src/app.tsx new file mode 100644 index 000000000..5f982595e --- /dev/null +++ b/packages/docs/sandboxes/simple-paneview/src/app.tsx @@ -0,0 +1,104 @@ +import { + PaneviewReact, + PaneviewReadyEvent, + IPaneviewPanelProps, +} from 'dockview'; +import * as React from 'react'; + +const components = { + default: (props: IPaneviewPanelProps<{ title: string }>) => { + return ( +
+ {props.params.title} +
+ ); + }, +}; + +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 ( +
+ + {props.params.title} +
+ ); +}; + +const headerComponents = { + myHeaderComponent: MyHeaderComponent, +}; + +export const App: React.FC = (props: { theme?: string }) => { + 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 ( + + ); +}; + +export default App; diff --git a/packages/docs/sandboxes/simple-paneview/src/index.tsx b/packages/docs/sandboxes/simple-paneview/src/index.tsx new file mode 100644 index 000000000..2fe1be232 --- /dev/null +++ b/packages/docs/sandboxes/simple-paneview/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-paneview/src/styles.css b/packages/docs/sandboxes/simple-paneview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/simple-paneview/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-paneview/tsconfig.json b/packages/docs/sandboxes/simple-paneview/tsconfig.json new file mode 100644 index 000000000..cdc4fb5f5 --- /dev/null +++ b/packages/docs/sandboxes/simple-paneview/tsconfig.json @@ -0,0 +1,18 @@ +{ + "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 + } +}