mirror of https://github.com/grafana/grafana
Explore: Revert split pane resize feature (#56310)
* Revert "Explore: Prevent panes from disappearing when resizing window in split view (#55696)" This reverts commitpull/55959/head^20a5aa19ca2. * Revert "Explore: Add resize to split view, with Min/Max button (#54420)" This reverts commitc3e4f1f876.
Giordano Ricci
3 years ago
committed by
GitHub
parent
d3f50f791c
commit
a7de5182b0
@ -1,93 +0,0 @@ |
||||
import { css } from '@emotion/css'; |
||||
import { useViewportSize } from '@react-aria/utils'; |
||||
import React, { ReactNode } from 'react'; |
||||
import SplitPane from 'react-split-pane'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { useStyles2 } from '@grafana/ui'; |
||||
|
||||
interface Props { |
||||
children: [ReactNode, ReactNode]; |
||||
uiState: { rightPaneSize: number }; |
||||
minSize?: number; |
||||
onResize?: (size: number) => void; |
||||
} |
||||
|
||||
const onDragFinished = (size: number, onResize?: (size: number) => void) => { |
||||
document.body.style.cursor = 'auto'; |
||||
onResize?.(size); |
||||
}; |
||||
|
||||
const onDragStarted = () => { |
||||
document.body.style.cursor = 'row-resize'; |
||||
}; |
||||
|
||||
const getResizerStyles = (hasSplit: boolean) => (theme: GrafanaTheme2) => |
||||
css` |
||||
position: relative; |
||||
display: ${hasSplit ? 'block' : 'none'}; |
||||
|
||||
&::before { |
||||
content: ''; |
||||
position: absolute; |
||||
transition: 0.2s border-color ease-in-out; |
||||
border-right: 1px solid ${theme.colors.border.weak}; |
||||
height: 100%; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
} |
||||
|
||||
&::after { |
||||
background: ${theme.colors.border.weak}; |
||||
content: ''; |
||||
position: absolute; |
||||
left: 50%; |
||||
top: 50%; |
||||
transition: 0.2s background ease-in-out; |
||||
transform: translate(-50%, -50%); |
||||
border-radius: 4px; |
||||
height: 200px; |
||||
width: 4px; |
||||
} |
||||
|
||||
&:hover { |
||||
&::before { |
||||
border-color: ${theme.colors.primary.main}; |
||||
} |
||||
|
||||
&::after { |
||||
background: ${theme.colors.primary.main}; |
||||
} |
||||
} |
||||
|
||||
cursor: col-resize; |
||||
width: ${theme.spacing(2)}; |
||||
`;
|
||||
|
||||
export const SplitView = ({ uiState: { rightPaneSize }, children, minSize = 200, onResize }: Props) => { |
||||
const { width } = useViewportSize(); |
||||
|
||||
// create two elements for library, even if only one exists (one will be hidden)
|
||||
const hasSplit = children.filter(Boolean).length === 2; |
||||
|
||||
const existingChildren = [ |
||||
<React.Fragment key="leftPane">{children[0]}</React.Fragment>, |
||||
<React.Fragment key="rightPane">{hasSplit && children[1]}</React.Fragment>, |
||||
]; |
||||
|
||||
return ( |
||||
<SplitPane |
||||
split="vertical" |
||||
size={rightPaneSize} |
||||
primary="second" |
||||
minSize={minSize} |
||||
maxSize={width - minSize} |
||||
resizerClassName={useStyles2(getResizerStyles(hasSplit))} |
||||
paneStyle={{ overflow: 'auto', display: 'flex', flexDirection: 'column', overflowY: 'scroll' }} |
||||
onDragStarted={onDragStarted} |
||||
onDragFinished={(size: number) => onDragFinished(size, onResize)} |
||||
> |
||||
{existingChildren} |
||||
</SplitPane> |
||||
); |
||||
}; |
||||
Loading…
Reference in new issue