) => {
- const onContextMenu = (event: React.MouseEvent) => {
- event.preventDefault();
- alert(
- `This custom header was parsed the params ${JSON.stringify(
- props.params
- )}`
- );
- };
- return ;
- },
-};
-
-const CustomHeadersDockview = (props: { theme?: string }) => {
- const onReady = (event: DockviewReadyEvent) => {
- event.api.addPanel({
- id: 'panel_1',
- component: 'default',
- title: 'Panel 1',
- params: {
- valueA: 'test value',
- },
- });
- event.api.addPanel({
- id: 'panel_2',
- component: 'default',
- title: 'Panel 2',
- params: {
- valueA: 'test value',
- },
- });
- event.api.addPanel({
- id: 'panel_3',
- component: 'default',
- title: 'Panel 3',
- params: {
- valueA: 'test value',
- },
- });
- event.api.addPanel({
- id: 'panel_4',
- component: 'default',
- title: 'Panel 4',
- position: { referencePanel: 'panel_3', direction: 'right' },
- params: {
- valueA: 'test value',
- },
- });
- event.api.addPanel({
- id: 'panel_5',
- component: 'default',
- title: 'Panel 5',
- position: { referencePanel: 'panel_4', direction: 'within' },
- params: {
- valueA: 'test value',
- },
- });
- const panel6 = event.api.addPanel({
- id: 'panel_6',
- component: 'default',
- title: 'Panel 6',
- position: { referencePanel: 'panel_4', direction: 'below' },
- params: {
- valueA: 'test value',
- },
- });
- panel6.group.locked = true;
- panel6.group.header.hidden = true;
- event.api.addPanel({
- id: 'panel_7',
- component: 'default',
- title: 'Panel 7',
- position: { referencePanel: 'panel_6', direction: 'right' },
- params: {
- valueA: 'test value',
- },
- });
- event.api.addPanel({
- id: 'panel_8',
- component: 'default',
-
- title: 'Panel 8',
- position: { referencePanel: 'panel_7', direction: 'within' },
- params: {
- valueA: 'test value',
- },
- });
-
- event.api.addGroup();
- };
-
- return (
-
- );
-};
-
-export default CustomHeadersDockview;
diff --git a/packages/docs/sandboxes/customheader-dockview/src/index.tsx b/packages/docs/sandboxes/customheader-dockview/src/index.tsx
deleted file mode 100644
index 2fe1be232..000000000
--- a/packages/docs/sandboxes/customheader-dockview/src/index.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-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
deleted file mode 100644
index 92b6a1b36..000000000
--- a/packages/docs/sandboxes/customheader-dockview/src/styles.css
+++ /dev/null
@@ -1,16 +0,0 @@
-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
deleted file mode 100644
index cdc4fb5f5..000000000
--- a/packages/docs/sandboxes/customheader-dockview/tsconfig.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
- "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
- }
-}
diff --git a/packages/docs/sandboxes/example-app-dockview/package.json b/packages/docs/sandboxes/example-app-dockview/package.json
deleted file mode 100644
index ee26e1635..000000000
--- a/packages/docs/sandboxes/example-app-dockview/package.json
+++ /dev/null
@@ -1,34 +0,0 @@
-{
- "name": "example-app-dockview",
- "description": "",
- "keywords": [
- "dockview"
- ],
- "version": "1.0.0",
- "main": "src/index.tsx",
- "dependencies": {
- "ag-grid-community": "^31.0.2",
- "ag-grid-react": "^31.0.2",
- "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"
- ]
-}
\ No newline at end of file
diff --git a/packages/docs/sandboxes/example-app-dockview/public/index.html b/packages/docs/sandboxes/example-app-dockview/public/index.html
deleted file mode 100644
index 1f8a52426..000000000
--- a/packages/docs/sandboxes/example-app-dockview/public/index.html
+++ /dev/null
@@ -1,44 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
- React App
-
-
-
-
-
-
-
-
-
diff --git a/packages/docs/sandboxes/example-app-dockview/src/app.scss b/packages/docs/sandboxes/example-app-dockview/src/app.scss
deleted file mode 100644
index 1b1438ec2..000000000
--- a/packages/docs/sandboxes/example-app-dockview/src/app.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.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/example-app-dockview/src/app.tsx b/packages/docs/sandboxes/example-app-dockview/src/app.tsx
deleted file mode 100644
index 4ccc39f25..000000000
--- a/packages/docs/sandboxes/example-app-dockview/src/app.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import {
- DockviewReact,
- DockviewReadyEvent,
- IDockviewPanelProps,
- IDockviewPanelHeaderProps,
-} from 'dockview';
-import * as React from 'react';
-import './app.scss';
-
-import { AgGridReact } from 'ag-grid-react';
-import { ColDef } from 'ag-grid-community';
-
-import 'ag-grid-community/styles/ag-grid.css';
-import 'ag-grid-community/styles/ag-theme-balham.css';
-
-const data = new Array(1000).fill(0).map((_, i) => {
- return {
- index: i,
- a: Math.random() * 100,
- b: Math.random() * 100,
- c: Math.random() * 100,
- d: Math.random() * 100,
- };
-});
-
-const columnDefs: ColDef[] = [
- {
- field: 'a',
- },
- {
- field: 'b',
- },
- {
- field: 'c',
- },
- {
- field: 'd',
- },
-];
-
-const components = {
- default: (props: IDockviewPanelProps<{ title: string; x?: number }>) => {
- return (
-
- {`${props.params.title}`}
- {props.params.x && {` ${props.params.x}`}}
-
- );
- },
- grid: () => {
- return (
-
- );
- },
-};
-
-const DockviewComponent = (props: { theme?: string }) => {
- const onReady = (event: DockviewReadyEvent) => {
- const panel1 = event.api.addPanel({
- id: 'panel_1',
- component: 'default',
- });
-
- event.api.addPanel({
- id: 'panel_2',
- component: 'grid',
- renderer: 'always',
- });
- };
-
- return (
-
- );
-};
-
-export default DockviewComponent;
diff --git a/packages/docs/sandboxes/example-app-dockview/src/index.tsx b/packages/docs/sandboxes/example-app-dockview/src/index.tsx
deleted file mode 100644
index 2fe1be232..000000000
--- a/packages/docs/sandboxes/example-app-dockview/src/index.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-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/example-app-dockview/src/styles.css b/packages/docs/sandboxes/example-app-dockview/src/styles.css
deleted file mode 100644
index 92b6a1b36..000000000
--- a/packages/docs/sandboxes/example-app-dockview/src/styles.css
+++ /dev/null
@@ -1,16 +0,0 @@
-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/example-app-dockview/tsconfig.json b/packages/docs/sandboxes/example-app-dockview/tsconfig.json
deleted file mode 100644
index cdc4fb5f5..000000000
--- a/packages/docs/sandboxes/example-app-dockview/tsconfig.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
- "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
- }
-}
diff --git a/packages/docs/src/components/ui/codeRunner.tsx b/packages/docs/src/components/ui/codeRunner.tsx
index 93107206c..8b0294391 100644
--- a/packages/docs/src/components/ui/codeRunner.tsx
+++ b/packages/docs/src/components/ui/codeRunner.tsx
@@ -8,29 +8,21 @@ const BASE_SANDBOX_URL =
export const _CodeRunner = (props: { id: string; height: number }) => {
const [framework] = useActiveFramework();
+ let frameworkName = framework.label.toLowerCase();
+
+ if (frameworkName === 'javascript') {
+ frameworkName = 'typescript';
+ }
+
const sandboxUrl = `${BASE_SANDBOX_URL}/templates/${
props.id
}/${framework.label.toLowerCase()}`;
- const path = `/templates/${
- props.id
- }/${framework.value.toLowerCase()}/index.html`;
+ const path = `/templates/${props.id}/${frameworkName}/index.html`;
return (
-
+
);
};