chore: navigation examples

mathuo · Sep 29, 2023 · a15e895 · a15e895
1 parent 4ad5b0f
commit a15e895
Show file tree

Hide file tree

Showing 9 changed files with 303 additions and 2 deletions.
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -15,6 +15,7 @@
     "/packages/docs/sandboxes/fullwidthtab-dockview",
     "/packages/docs/sandboxes/groupcontol-dockview",
     "/packages/docs/sandboxes/iframe-dockview",
+    "/packages/docs/sandboxes/keyboard-dockview",
     "/packages/docs/sandboxes/layout-dockview",
     "/packages/docs/sandboxes/lockedgroup-dockview",
     "/packages/docs/sandboxes/nativeapp-dockview",
@@ -32,4 +33,4 @@
     "/packages/docs/sandboxes/javascript/vanilla-dockview"
   ],
   "node": "16"
-}
+}
diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx
@@ -27,6 +27,7 @@ import DockviewTabheight from '@site/sandboxes/tabheight-dockview/src/app';
 import DockviewWithIFrames from '@site/sandboxes/iframe-dockview/src/app';
 import DockviewFloating from '@site/sandboxes/floatinggroup-dockview/src/app';
 import DockviewLockedGroup from '@site/sandboxes/lockedgroup-dockview/src/app';
+import DockviewKeyboard from '@site/sandboxes/keyboard-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';
@@ -899,7 +900,15 @@ A simple example showing events fired by `dockviewz that can be interacted with.
     react={EventsDockview}
 />
 
-## Advanced Examples
+## Keyboard Navigation
+
+Keyboard shortcuts
+
+<MultiFrameworkContainer
+    height={600}
+    sandboxId="keyboard-dockview"
+    react={DockviewKeyboard}
+/>
 
 ### Nested Dockviews
 

diff --git a/packages/docs/sandboxes/keyboard-dockview/package.json b/packages/docs/sandboxes/keyboard-dockview/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "keyboard-dockview",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@types/uuid": "^9.0.0",
+    "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/keyboard-dockview/public/index.html b/packages/docs/sandboxes/keyboard-dockview/public/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/packages/docs/sandboxes/keyboard-dockview/src/app.scss b/packages/docs/sandboxes/keyboard-dockview/src/app.scss
@@ -0,0 +1,21 @@
+.keyboard-example-panel {
+    padding: 20px;
+    color: white;
+    font-size: 13px;
+
+    input {
+        &:focus {
+            outline: 1px solid dodgerblue;
+        }
+    }
+
+    .keyboard-example-description {
+        padding: 10px 0px;
+        .keyboard-example-shortcut {
+            background-color: lightblue;
+            color: black;
+            padding: 2px 4px;
+            border-radius: 4px;
+        }
+    }
+}
diff --git a/packages/docs/sandboxes/keyboard-dockview/src/app.tsx b/packages/docs/sandboxes/keyboard-dockview/src/app.tsx
@@ -0,0 +1,137 @@
+import {
+    DockviewApi,
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview';
+import './app.scss';
+import * as React from 'react';
+
+const components = {
+    default: (props: IDockviewPanelProps<{ title: string }>) => {
+        const [active, setActive] = React.useState<boolean>(props.api.isActive);
+        const ref = React.useRef<HTMLInputElement>(null);
+
+        React.useEffect(() => {
+            const disposable = props.api.onDidActiveChange((event) => {
+                setActive(props.api.isActive);
+            });
+
+            return () => {
+                disposable.dispose();
+            };
+        }, [props.api]);
+
+        React.useEffect(() => {
+            if (!active) {
+                return;
+            }
+
+            requestAnimationFrame(() => {
+                ref.current?.focus();
+            });
+        }, [active]);
+
+        return (
+            <div
+                className="keyboard-example-panel"
+                style={{ padding: '20px', color: 'white' }}
+            >
+                <div style={{ padding: '10px 0px' }}>
+                    <span>{props.api.title}</span>
+                </div>
+                <div className="keyboard-example-description">
+                    {'Use '}
+                    <span className="keyboard-example-shortcut">
+                        {'Ctrl+ArrowLeft'}
+                    </span>
+                    {' and '}
+                    <span className="keyboard-example-shortcut ">
+                        {'Ctrl+ArrowRight'}
+                    </span>
+                    {' to nativgate between tabs.'}
+                </div>
+
+                <div style={{ padding: '10px 0px' }}>
+                    <div>
+                        {
+                            'This input box should take focus when the panel is active to demonsrate managed focus'
+                        }
+                        <input ref={ref} type="text" />
+                    </div>
+                </div>
+
+                <div>
+                    <span>{'isPanelActive: '}</span>
+                    <span>{active ? 'true' : 'false'}</span>
+                </div>
+            </div>
+        );
+    },
+};
+
+const DockviewDemo = (props: { theme?: string }) => {
+    const [api, setApi] = React.useState<DockviewApi>();
+
+    const onReady = (event: DockviewReadyEvent) => {
+        event.api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+            title: 'Panel 1',
+        });
+        event.api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            title: 'Panel 2',
+        });
+        event.api.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            title: 'Panel 3',
+        });
+        event.api.addPanel({
+            id: 'panel_4',
+            component: 'default',
+            title: 'Panel 4',
+            position: { referencePanel: 'panel_3', direction: 'right' },
+        });
+        event.api.addPanel({
+            id: 'panel_5',
+            component: 'default',
+            title: 'Panel 5',
+            position: { referencePanel: 'panel_4', direction: 'within' },
+        });
+
+        event.api.getPanel('panel_1')!.api.setActive();
+
+        setApi(event.api);
+    };
+
+    const onKeyDown = (event: React.KeyboardEvent) => {
+        if (!api) {
+            return;
+        }
+
+        if (event.ctrlKey && event.code === 'ArrowLeft') {
+            // move backwards
+            api.moveToPrevious({ includePanel: true });
+        }
+
+        if (event.ctrlKey && event.code === 'ArrowRight') {
+            // move backwards
+            api.moveToNext({ includePanel: true });
+        }
+    };
+
+    return (
+        <div style={{ height: '100%' }} onKeyDown={onKeyDown}>
+            <DockviewReact
+                components={components}
+                onReady={onReady}
+                className={props.theme || 'dockview-theme-abyss'}
+            />
+        </div>
+    );
+};
+
+export default DockviewDemo;
diff --git a/packages/docs/sandboxes/keyboard-dockview/src/index.tsx b/packages/docs/sandboxes/keyboard-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(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/keyboard-dockview/src/styles.css b/packages/docs/sandboxes/keyboard-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/keyboard-dockview/tsconfig.json b/packages/docs/sandboxes/keyboard-dockview/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
+    }
+}