rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-01-22 17:35:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #449 from mathuo/446-content-container-does-not-scroll

Browse Source 
feat: scrollbar as default
This commit is contained in:
mathuo 2024-01-17 22:54:51 +00:00 committed by GitHub
commit c61cb1a6e8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 246 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.codesandbox/ci.json
View File

@ -28,6 +28,7 @@
"/packages/docs/sandboxes/rendermode-dockview",
"/packages/docs/sandboxes/resize-dockview",
"/packages/docs/sandboxes/resizecontainer-dockview",
"/packages/docs/sandboxes/scrollbars-dockview",
"/packages/docs/sandboxes/simple-dockview",
"/packages/docs/sandboxes/simple-gridview",
"/packages/docs/sandboxes/simple-paneview",
@ -40,4 +41,4 @@
"/packages/docs/sandboxes/javascript/vanilla-dockview"
],
"node": "18"
}
}

2
packages/dockview-core/src/dockview/dockviewGroupPanel.scss
View File

@ -17,7 +17,7 @@
> .content-container {
flex-grow: 1;
overflow: hidden;
min-height: 0;
outline: none;
}
}

17
packages/docs/docs/components/dockview.mdx
View File

@ -31,6 +31,7 @@ import DockviewKeyboard from '@site/sandboxes/keyboard-dockview/src/app';
import DockviewPopoutGroup from '@site/sandboxes/popoutgroup-dockview/src/app';
import DockviewMaximizeGroup from '@site/sandboxes/maximizegroup-dockview/src/app';
import DockviewRenderMode from '@site/sandboxes/rendermode-dockview/src/app';
import DockviewScrollbars from '@site/sandboxes/scrollbars-dockview/src/app';
import { DocRef } from '@site/src/components/ui/reference/docRef';
@ -196,6 +197,22 @@ If you refresh the page you should notice your layout is loaded as you left it.
react={DockviewPersistance}
/>
## Scrollbars
Scrollbars will appear if the contents of your view has a fixed height. If you are using a relative height such
as *100%* you will need to define an inner container with the appropiate `overflow` value to allow scrollbars to appear.
The following container three views:
- **Panel 1**: Sets `height: 100%` and no scrollbar appears even, the content is clipped.
- **Panel 2**: Sets `height: 2000px` and a scrollbar does appear since a fixed height has been used.
- **Panel 3**: Sets `height: 100%` and defines an inner component with `overflow: auto` to enable the scrollbars.
<MultiFrameworkContainer
sandboxId="scrollbars-dockview"
react={DockviewScrollbars}
/>
## Resizing
### Panel Resizing

34
packages/docs/sandboxes/scrollbars-dockview/package.json Normal file
View File

@ -0,0 +1,34 @@
{
"name": "scrollbars-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"
]
}

45
packages/docs/sandboxes/scrollbars-dockview/public/index.html Normal file
View File

@ -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>

16
packages/docs/sandboxes/scrollbars-dockview/src/app.scss Normal file
View File

@ -0,0 +1,16 @@
.group-control {
.action {
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: 18px;
cursor: pointer;
&:hover {
border-radius: 2px;
background-color: var(--dv-icon-hover-background-color);
}
}
}

77
packages/docs/sandboxes/scrollbars-dockview/src/app.tsx Normal file
View File

@ -0,0 +1,77 @@
import {
DockviewReact,
DockviewReadyEvent,
IDockviewPanelProps,
} from 'dockview';
import './app.scss';
const TEXT =
'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.';
const components = {
fixedHeightContainer: (props: IDockviewPanelProps<{ title: string }>) => {
return (
<div style={{ height: '100%', color: 'white' }}>
{[TEXT, '\n\n'].join('').repeat(20)}
</div>
);
},
overflowContainer: (props: IDockviewPanelProps<{ title: string }>) => {
return (
<div style={{ height: '2000px', overflow: 'auto', color: 'white' }}>
{[TEXT, '\n\n'].join('').repeat(20)}
</div>
);
},
userDefinedOverflowContainer: (
props: IDockviewPanelProps<{ title: string }>
) => {
return (
<div style={{ height: '100%', color: 'white' }}>
<div
style={{
height: '100%',
color: 'white',
overflow: 'auto',
}}
>
{[TEXT, '\n\n'].join('').repeat(20)}
</div>
</div>
);
},
};
const DockviewComponent = (props: { theme?: string }) => {
const onReady = (event: DockviewReadyEvent) => {
event.api.addPanel({
id: 'panel_1',
component: 'fixedHeightContainer',
title: 'Panel 1',
});
event.api.addPanel({
id: 'panel_2',
component: 'overflowContainer',
title: 'Panel 2',
position: { direction: 'right' },
});
event.api.addPanel({
id: 'panel_3',
component: 'userDefinedOverflowContainer',
title: 'Panel 3',
position: { direction: 'right' },
});
};
return (
<DockviewReact
components={components}
onReady={onReady}
className={props.theme || 'dockview-theme-abyss'}
/>
);
};
export default DockviewComponent;

20
packages/docs/sandboxes/scrollbars-dockview/src/index.tsx Normal file
View File

@ -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>
);
}

16
packages/docs/sandboxes/scrollbars-dockview/src/styles.css Normal file
View File

@ -0,0 +1,16 @@
body {
margin: 0px;
color: white;
font-family: sans-serif;
text-align: center;
}
#root {
height: 100vh;
width: 100vw;
}
.app {
height: 100%;
}

18
packages/docs/sandboxes/scrollbars-dockview/tsconfig.json Normal file
View File

@ -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
}
}