Skip to content

Commit 25489bf

Browse files
mathuomathuo
authored
Merge pull request #770 from mathuo/689-docs-demos-for-vanilla-js-support
chore: fix files
2 parents be628a5 + 9564319 commit 25489bf

File tree

150 files changed

+7574
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

150 files changed

+7574
-0
lines changed

‎.codesandbox/ci.json‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,41 @@
66
"packages/dockview"
77
],
88
"sandboxes": [
9+
"/packages/docs/sandboxes/constraints-dockview",
10+
"/packages/docs/sandboxes/customheader-dockview",
11+
"/packages/docs/sandboxes/demo-dockview",
12+
"/packages/docs/sandboxes/dnd-dockview",
13+
"/packages/docs/sandboxes/dockview-app",
14+
"/packages/docs/sandboxes/editor-gridview",
15+
"/packages/docs/sandboxes/events-dockview",
16+
"/packages/docs/sandboxes/externaldnd-dockview",
17+
"/packages/docs/sandboxes/floatinggroup-dockview",
18+
"/packages/docs/sandboxes/fullwidthtab-dockview",
19+
"/packages/docs/sandboxes/headeractions-dockview",
20+
"/packages/docs/sandboxes/groupcontol-dockview",
21+
"/packages/docs/sandboxes/iframe-dockview",
22+
"/packages/docs/sandboxes/keyboard-dockview",
23+
"/packages/docs/sandboxes/layout-dockview",
24+
"/packages/docs/sandboxes/lockedgroup-dockview",
25+
"/packages/docs/sandboxes/maximizegroup-dockview",
26+
"/packages/docs/sandboxes/nativeapp-dockview",
27+
"/packages/docs/sandboxes/nested-dockview",
28+
"/packages/docs/sandboxes/popoutgroup-dockview",
29+
"/packages/docs/sandboxes/rendering-dockview",
30+
"/packages/docs/sandboxes/rendermode-dockview",
31+
"/packages/docs/sandboxes/resize-dockview",
32+
"/packages/docs/sandboxes/resizecontainer-dockview",
33+
"/packages/docs/sandboxes/scrollbars-dockview",
34+
"/packages/docs/sandboxes/simple-dockview",
35+
"/packages/docs/sandboxes/simple-gridview",
36+
"/packages/docs/sandboxes/simple-paneview",
37+
"/packages/docs/sandboxes/tabheight-dockview",
38+
"/packages/docs/sandboxes/updatetitle-dockview",
39+
"/packages/docs/sandboxes/watermark-dockview",
40+
"/packages/docs/sandboxes/javascript/fullwidthtab-dockview",
41+
"/packages/docs/sandboxes/javascript/simple-dockview",
42+
"/packages/docs/sandboxes/javascript/tabheight-dockview",
43+
"/packages/docs/sandboxes/javascript/vanilla-dockview"
944
],
1045
"node": "18"
1146
}

‎packages/docs/sandboxes/customheader-dockview/package.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "customheader-dockview",
3+
"description": "",
4+
"keywords": [
5+
"dockview"
6+
],
7+
"version": "1.0.0",
8+
"main": "src/index.tsx",
9+
"dependencies": {
10+
"dockview": "*",
11+
"react": "^18.2.0",
12+
"react-dom": "^18.2.0"
13+
},
14+
"devDependencies": {
15+
"@types/react": "^18.0.28",
16+
"@types/react-dom": "^18.0.11",
17+
"typescript": "^4.9.5",
18+
"react-scripts": "*"
19+
},
20+
"scripts": {
21+
"start": "react-scripts start",
22+
"build": "react-scripts build",
23+
"test": "react-scripts test --env=jsdom",
24+
"eject": "react-scripts eject"
25+
},
26+
"browserslist": [
27+
">0.2%",
28+
"not dead",
29+
"not ie <= 11",
30+
"not op_mini all"
31+
]
32+
}

‎packages/docs/sandboxes/customheader-dockview/public/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
<meta name="theme-color" content="#000000">
8+
<!--
9+
manifest.json provides metadata used when your web app is added to the
10+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
11+
-->
12+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14+
<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" />
15+
<!--
16+
Notice the use of %PUBLIC_URL% in the tags above.
17+
It will be replaced with the URL of the `public` folder during the build.
18+
Only files inside the `public` folder can be referenced from the HTML.
19+
20+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
21+
work correctly both with client-side routing and a non-root public URL.
22+
Learn how to configure a non-root public URL by running `npm run build`.
23+
-->
24+
<title>React App</title>
25+
</head>
26+
27+
<body>
28+
<noscript>
29+
You need to enable JavaScript to run this app.
30+
</noscript>
31+
<div id="root"></div>
32+
<!--
33+
This HTML file is a template.
34+
If you open it directly in the browser, you will see an empty page.
35+
36+
You can add webfonts, meta tags, or analytics to this file.
37+
The build step will place the bundled scripts into the <body> tag.
38+
39+
To begin the development, run `npm start` or `yarn start`.
40+
To create a production bundle, use `npm run build` or `yarn build`.
41+
-->
42+
</body>
43+
44+
</html>

‎packages/docs/sandboxes/customheader-dockview/src/app.tsx‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import {
2+
DockviewDefaultTab,
3+
DockviewReact,
4+
DockviewReadyEvent,
5+
IDockviewPanelHeaderProps,
6+
IDockviewPanelProps,
7+
} from 'dockview';
8+
import * as React from 'react';
9+
10+
interface CustomProps {
11+
valueA: string;
12+
}
13+
14+
const components = {
15+
default: (props: IDockviewPanelProps<CustomProps>) => {
16+
return <div style={{ padding: '20px' }}>{props.api.title}</div>;
17+
},
18+
};
19+
20+
const headerComponents = {
21+
default: (props: IDockviewPanelHeaderProps<CustomProps>) => {
22+
const onContextMenu = (event: React.MouseEvent) => {
23+
event.preventDefault();
24+
alert(
25+
`This custom header was parsed the params ${JSON.stringify(
26+
props.params
27+
)}`
28+
);
29+
};
30+
return <DockviewDefaultTab onContextMenu={onContextMenu} {...props} />;
31+
},
32+
};
33+
34+
const CustomHeadersDockview = (props: { theme?: string }) => {
35+
const onReady = (event: DockviewReadyEvent) => {
36+
event.api.addPanel({
37+
id: 'panel_1',
38+
component: 'default',
39+
title: 'Panel 1',
40+
params: {
41+
valueA: 'test value',
42+
},
43+
});
44+
event.api.addPanel({
45+
id: 'panel_2',
46+
component: 'default',
47+
title: 'Panel 2',
48+
params: {
49+
valueA: 'test value',
50+
},
51+
});
52+
event.api.addPanel({
53+
id: 'panel_3',
54+
component: 'default',
55+
title: 'Panel 3',
56+
params: {
57+
valueA: 'test value',
58+
},
59+
});
60+
event.api.addPanel({
61+
id: 'panel_4',
62+
component: 'default',
63+
title: 'Panel 4',
64+
position: { referencePanel: 'panel_3', direction: 'right' },
65+
params: {
66+
valueA: 'test value',
67+
},
68+
});
69+
event.api.addPanel({
70+
id: 'panel_5',
71+
component: 'default',
72+
title: 'Panel 5',
73+
position: { referencePanel: 'panel_4', direction: 'within' },
74+
params: {
75+
valueA: 'test value',
76+
},
77+
});
78+
const panel6 = event.api.addPanel({
79+
id: 'panel_6',
80+
component: 'default',
81+
title: 'Panel 6',
82+
position: { referencePanel: 'panel_4', direction: 'below' },
83+
params: {
84+
valueA: 'test value',
85+
},
86+
});
87+
panel6.group.locked = true;
88+
panel6.group.header.hidden = true;
89+
event.api.addPanel({
90+
id: 'panel_7',
91+
component: 'default',
92+
title: 'Panel 7',
93+
position: { referencePanel: 'panel_6', direction: 'right' },
94+
params: {
95+
valueA: 'test value',
96+
},
97+
});
98+
event.api.addPanel({
99+
id: 'panel_8',
100+
component: 'default',
101+
102+
title: 'Panel 8',
103+
position: { referencePanel: 'panel_7', direction: 'within' },
104+
params: {
105+
valueA: 'test value',
106+
},
107+
});
108+
109+
event.api.addGroup();
110+
};
111+
112+
return (
113+
<DockviewReact
114+
components={components}
115+
defaultTabComponent={headerComponents.default}
116+
onReady={onReady}
117+
className={`${props.theme || 'dockview-theme-abyss'}`}
118+
/>
119+
);
120+
};
121+
122+
export default CustomHeadersDockview;

‎packages/docs/sandboxes/customheader-dockview/src/index.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { StrictMode } from 'react';
2+
import * as ReactDOMClient from 'react-dom/client';
3+
import './styles.css';
4+
import 'dockview/dist/styles/dockview.css';
5+
6+
import App from './app';
7+
8+
const rootElement = document.getElementById('root');
9+
10+
if (rootElement) {
11+
const root = ReactDOMClient.createRoot(rootElement);
12+
13+
root.render(
14+
<StrictMode>
15+
<div className="app">
16+
<App />
17+
</div>
18+
</StrictMode>
19+
);
20+
}

‎packages/docs/sandboxes/customheader-dockview/src/styles.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
body {
2+
margin: 0px;
3+
color: white;
4+
font-family: sans-serif;
5+
text-align: center;
6+
}
7+
8+
#root {
9+
height: 100vh;
10+
width: 100vw;
11+
}
12+
13+
.app {
14+
height: 100%;
15+
16+
}

‎packages/docs/sandboxes/customheader-dockview/tsconfig.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"compilerOptions": {
3+
"outDir": "build/dist",
4+
"module": "esnext",
5+
"target": "es5",
6+
"lib": ["es6", "dom"],
7+
"sourceMap": true,
8+
"allowJs": true,
9+
"jsx": "react-jsx",
10+
"moduleResolution": "node",
11+
"rootDir": "src",
12+
"forceConsistentCasingInFileNames": true,
13+
"noImplicitReturns": true,
14+
"noImplicitThis": true,
15+
"noImplicitAny": true,
16+
"strictNullChecks": true
17+
}
18+
}

‎packages/docs/sandboxes/react/dockview/constraints/package.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "dockview.constraints",
3+
"description": "",
4+
"keywords": [
5+
"dockview"
6+
],
7+
"version": "1.0.0",
8+
"main": "src/index.tsx",
9+
"dependencies": {
10+
"dockview": "*",
11+
"react": "^18.2.0",
12+
"react-dom": "^18.2.0"
13+
},
14+
"devDependencies": {
15+
"@types/react": "^18.0.28",
16+
"@types/react-dom": "^18.0.11",
17+
"typescript": "^4.9.5",
18+
"react-scripts": "*"
19+
},
20+
"scripts": {
21+
"start": "react-scripts start",
22+
"build": "react-scripts build",
23+
"test": "react-scripts test --env=jsdom",
24+
"eject": "react-scripts eject"
25+
},
26+
"browserslist": [
27+
">0.2%",
28+
"not dead",
29+
"not ie <= 11",
30+
"not op_mini all"
31+
]
32+
}

‎packages/docs/sandboxes/react/dockview/constraints/public/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
<meta name="theme-color" content="#000000">
8+
<!--
9+
manifest.json provides metadata used when your web app is added to the
10+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
11+
-->
12+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14+
<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" />
15+
<!--
16+
Notice the use of %PUBLIC_URL% in the tags above.
17+
It will be replaced with the URL of the `public` folder during the build.
18+
Only files inside the `public` folder can be referenced from the HTML.
19+
20+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
21+
work correctly both with client-side routing and a non-root public URL.
22+
Learn how to configure a non-root public URL by running `npm run build`.
23+
-->
24+
<title>React App</title>
25+
</head>
26+
27+
<body>
28+
<noscript>
29+
You need to enable JavaScript to run this app.
30+
</noscript>
31+
<div id="root"></div>
32+
<!--
33+
This HTML file is a template.
34+
If you open it directly in the browser, you will see an empty page.
35+
36+
You can add webfonts, meta tags, or analytics to this file.
37+
The build step will place the bundled scripts into the <body> tag.
38+
39+
To begin the development, run `npm start` or `yarn start`.
40+
To create a production bundle, use `npm run build` or `yarn build`.
41+
-->
42+
</body>
43+
44+
</html>

0 commit comments

Comments
 (0)