+ <>
{!isVizPickerOpen && (
<>
-
+
{
)}
{isVizPickerOpen && }
-
+
);
};
}
function getStyles(theme: GrafanaTheme2) {
return {
- pane: css({
- display: 'flex',
- flexDirection: 'column',
- flexGrow: '1',
- borderLeft: `1px solid ${theme.colors.border.weak}`,
- background: theme.colors.background.primary,
- }),
top: css({
display: 'flex',
flexDirection: 'column',
@@ -137,11 +101,9 @@ function getStyles(theme: GrafanaTheme2) {
interface VisualizationButtonProps {
pluginId: string;
onOpen: () => void;
- isOpen?: boolean;
- onTogglePane?: () => void;
}
-export function VisualizationButton({ pluginId, onOpen, isOpen, onTogglePane }: VisualizationButtonProps) {
+export function VisualizationButton({ pluginId, onOpen }: VisualizationButtonProps) {
const styles = useStyles2(getVizButtonStyles);
const pluginMeta = useMemo(() => getAllPanelPluginMeta().filter((p) => p.id === pluginId)[0], [pluginId]);
@@ -160,14 +122,6 @@ export function VisualizationButton({ pluginId, onOpen, isOpen, onTogglePane }:
>
{pluginMeta.name}
- {/*
*/}
);
}
diff --git a/public/app/features/dashboard-scene/panel-edit/splitter/useSnappingSplitter.ts b/public/app/features/dashboard-scene/panel-edit/splitter/useSnappingSplitter.ts
new file mode 100644
index 00000000000..95e78cac99c
--- /dev/null
+++ b/public/app/features/dashboard-scene/panel-edit/splitter/useSnappingSplitter.ts
@@ -0,0 +1,104 @@
+import React, { useCallback } from 'react';
+
+import { DragHandlePosition, useSplitter } from '@grafana/ui';
+
+export interface UseSnappingSplitterOptions {
+ /**
+ * The initial size of the primary pane between 0-1, defaults to 0.5
+ */
+ initialSize?: number;
+ direction: 'row' | 'column';
+ dragPosition?: DragHandlePosition;
+ paneOptions: PaneOptions;
+}
+
+interface PaneOptions {
+ collapseBelowPixels: number;
+ snapOpenToPixels?: number;
+}
+
+interface PaneState {
+ collapsed: boolean;
+ snapSize?: number;
+}
+
+export function useSnappingSplitter(options: UseSnappingSplitterOptions) {
+ const { paneOptions } = options;
+
+ const [state, setState] = React.useState
({ collapsed: false });
+
+ const onResizing = useCallback(
+ (flexSize: number, pixelSize: number) => {
+ if (flexSize <= 0 && pixelSize <= 0) {
+ return;
+ }
+
+ const optionsPixelSize = (pixelSize / flexSize) * (1 - flexSize);
+
+ if (state.collapsed && optionsPixelSize > paneOptions.collapseBelowPixels) {
+ setState({ collapsed: false });
+ }
+
+ if (!state.collapsed && optionsPixelSize < paneOptions.collapseBelowPixels) {
+ setState({ collapsed: true });
+ }
+ },
+ [state, paneOptions.collapseBelowPixels]
+ );
+
+ const onSizeChanged = useCallback(
+ (flexSize: number, pixelSize: number) => {
+ if (flexSize <= 0 && pixelSize <= 0) {
+ return;
+ }
+
+ const newSecondPaneSize = 1 - flexSize;
+ const isSnappedClosed = state.snapSize === 0;
+ const sizeOfBothPanes = pixelSize / flexSize;
+ const snapOpenToPixels = paneOptions.snapOpenToPixels ?? sizeOfBothPanes / 2;
+ const snapSize = snapOpenToPixels / sizeOfBothPanes;
+
+ if (state.collapsed) {
+ if (isSnappedClosed) {
+ setState({ snapSize: Math.max(newSecondPaneSize, snapSize), collapsed: false });
+ } else {
+ setState({ snapSize: 0, collapsed: true });
+ }
+ } else if (isSnappedClosed) {
+ setState({ snapSize: newSecondPaneSize, collapsed: false });
+ }
+ },
+ [state, paneOptions.snapOpenToPixels]
+ );
+
+ const onToggleCollapse = useCallback(() => {
+ setState({ collapsed: !state.collapsed });
+ }, [state.collapsed]);
+
+ const { containerProps, primaryProps, secondaryProps, splitterProps } = useSplitter({
+ ...options,
+ onResizing,
+ onSizeChanged,
+ });
+
+ // This is to allow resizing it beyond the content dimensions
+ secondaryProps.style.overflow = 'hidden';
+ secondaryProps.style.minWidth = 'unset';
+ secondaryProps.style.minHeight = 'unset';
+
+ if (state.snapSize) {
+ primaryProps.style = {
+ ...primaryProps.style,
+ flexGrow: 1 - state.snapSize,
+ };
+ secondaryProps.style.flexGrow = state.snapSize;
+ } else if (state.snapSize === 0) {
+ primaryProps.style.flexGrow = 1;
+ secondaryProps.style.flexGrow = 0;
+ secondaryProps.style.minWidth = 'unset';
+ secondaryProps.style.minHeight = 'unset';
+ secondaryProps.style.overflow = 'unset';
+ }
+
+ return { containerProps, primaryProps, secondaryProps, splitterProps, splitterState: state, onToggleCollapse };
+}