Skip to content

Commit 0df4062

Browse files
mathuomathuo
committed
feat: scrollbar as default
1 parent 8a67f60 commit 0df4062

File tree

10 files changed

+246
-2
lines changed

10 files changed

+246
-2
lines changed

‎.codesandbox/ci.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"/packages/docs/sandboxes/rendermode-dockview",
2929
"/packages/docs/sandboxes/resize-dockview",
3030
"/packages/docs/sandboxes/resizecontainer-dockview",
31+
"/packages/docs/sandboxes/scrollbars-dockview",
3132
"/packages/docs/sandboxes/simple-dockview",
3233
"/packages/docs/sandboxes/simple-gridview",
3334
"/packages/docs/sandboxes/simple-paneview",
@@ -40,4 +41,4 @@
4041
"/packages/docs/sandboxes/javascript/vanilla-dockview"
4142
],
4243
"node": "18"
43-
}
44+
}

‎packages/dockview-core/src/dockview/dockviewGroupPanel.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
> .content-container {
1919
flex-grow: 1;
20-
overflow: hidden;
20+
min-height: 0;
2121
outline: none;
2222
}
2323
}

‎packages/docs/docs/components/dockview.mdx

+17
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import DockviewKeyboard from '@site/sandboxes/keyboard-dockview/src/app';
3131
import DockviewPopoutGroup from '@site/sandboxes/popoutgroup-dockview/src/app';
3232
import DockviewMaximizeGroup from '@site/sandboxes/maximizegroup-dockview/src/app';
3333
import DockviewRenderMode from '@site/sandboxes/rendermode-dockview/src/app';
34+
import DockviewScrollbars from '@site/sandboxes/scrollbars-dockview/src/app';
3435

3536
import { DocRef } from '@site/src/components/ui/reference/docRef';
3637

@@ -196,6 +197,22 @@ If you refresh the page you should notice your layout is loaded as you left it.
196197
react={DockviewPersistance}
197198
/>
198199

200+
## Scrollbars
201+
202+
Scrollbars will appear if the contents of your view has a fixed height. If you are using a relative height such
203+
as *100%* you will need to define an inner container with the appropiate `overflow` value to allow scrollbars to appear.
204+
205+
The following container three views:
206+
- **Panel 1**: Sets `height: 100%` and no scrollbar appears even, the content is clipped.
207+
- **Panel 2**: Sets `height: 2000px` and a scrollbar does appear since a fixed height has been used.
208+
- **Panel 3**: Sets `height: 100%` and defines an inner component with `overflow: auto` to enable the scrollbars.
209+
210+
211+
<MultiFrameworkContainer
212+
sandboxId="scrollbars-dockview"
213+
react={DockviewScrollbars}
214+
/>
215+
199216
## Resizing
200217

201218
### Panel Resizing

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

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "scrollbars-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+
"uuid": "^9.0.0"
14+
},
15+
"devDependencies": {
16+
"@types/react": "^18.0.28",
17+
"@types/react-dom": "^18.0.11",
18+
"@types/uuid": "^9.0.0",
19+
"typescript": "^4.9.5",
20+
"react-scripts": "*"
21+
},
22+
"scripts": {
23+
"start": "react-scripts start",
24+
"build": "react-scripts build",
25+
"test": "react-scripts test --env=jsdom",
26+
"eject": "react-scripts eject"
27+
},
28+
"browserslist": [
29+
">0.2%",
30+
"not dead",
31+
"not ie <= 11",
32+
"not op_mini all"
33+
]
34+
}

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

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
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+
<!--
17+
Notice the use of %PUBLIC_URL% in the tags above.
18+
It will be replaced with the URL of the `public` folder during the build.
19+
Only files inside the `public` folder can be referenced from the HTML.
20+
21+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22+
work correctly both with client-side routing and a non-root public URL.
23+
Learn how to configure a non-root public URL by running `npm run build`.
24+
-->
25+
<title>React App</title>
26+
</head>
27+
28+
<body>
29+
<noscript>
30+
You need to enable JavaScript to run this app.
31+
</noscript>
32+
<div id="root"></div>
33+
<!--
34+
This HTML file is a template.
35+
If you open it directly in the browser, you will see an empty page.
36+
37+
You can add webfonts, meta tags, or analytics to this file.
38+
The build step will place the bundled scripts into the <body> tag.
39+
40+
To begin the development, run `npm start` or `yarn start`.
41+
To create a production bundle, use `npm run build` or `yarn build`.
42+
-->
43+
</body>
44+
45+
</html>

‎packages/docs/sandboxes/scrollbars-dockview/src/app.scss

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.group-control {
2+
.action {
3+
padding: 4px;
4+
display: flex;
5+
align-items: center;
6+
justify-content: center;
7+
box-sizing: border-box;
8+
font-size: 18px;
9+
cursor: pointer;
10+
11+
&:hover {
12+
border-radius: 2px;
13+
background-color: var(--dv-icon-hover-background-color);
14+
}
15+
}
16+
}

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

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import {
2+
DockviewReact,
3+
DockviewReadyEvent,
4+
IDockviewPanelProps,
5+
} from 'dockview';
6+
import './app.scss';
7+
8+
const TEXT =
9+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
10+
11+
const components = {
12+
fixedHeightContainer: (props: IDockviewPanelProps<{ title: string }>) => {
13+
return (
14+
<div style={{ height: '100%', color: 'white' }}>
15+
{[TEXT, '\n\n'].join('').repeat(20)}
16+
</div>
17+
);
18+
},
19+
overflowContainer: (props: IDockviewPanelProps<{ title: string }>) => {
20+
return (
21+
<div style={{ height: '2000px', overflow: 'auto', color: 'white' }}>
22+
{[TEXT, '\n\n'].join('').repeat(20)}
23+
</div>
24+
);
25+
},
26+
userDefinedOverflowContainer: (
27+
props: IDockviewPanelProps<{ title: string }>
28+
) => {
29+
return (
30+
<div style={{ height: '100%', color: 'white' }}>
31+
<div
32+
style={{
33+
height: '100%',
34+
color: 'white',
35+
overflow: 'auto',
36+
}}
37+
>
38+
{[TEXT, '\n\n'].join('').repeat(20)}
39+
</div>
40+
</div>
41+
);
42+
},
43+
};
44+
45+
const DockviewComponent = (props: { theme?: string }) => {
46+
const onReady = (event: DockviewReadyEvent) => {
47+
event.api.addPanel({
48+
id: 'panel_1',
49+
component: 'fixedHeightContainer',
50+
title: 'Panel 1',
51+
});
52+
53+
event.api.addPanel({
54+
id: 'panel_2',
55+
component: 'overflowContainer',
56+
title: 'Panel 2',
57+
position: { direction: 'right' },
58+
});
59+
60+
event.api.addPanel({
61+
id: 'panel_3',
62+
component: 'userDefinedOverflowContainer',
63+
title: 'Panel 3',
64+
position: { direction: 'right' },
65+
});
66+
};
67+
68+
return (
69+
<DockviewReact
70+
components={components}
71+
onReady={onReady}
72+
className={props.theme || 'dockview-theme-abyss'}
73+
/>
74+
);
75+
};
76+
77+
export default DockviewComponent;

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

+20
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/scrollbars-dockview/src/styles.css

+16
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/scrollbars-dockview/tsconfig.json

+18
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+
}

0 commit comments

Comments
 (0)