Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 1x 1x 1x 1x | import React, { ReactNode, useCallback } from "react";
import { TriangleIcon } from "ui/icons/Icons";
import {
StyledSplitPaneHeader,
StyledSplitPaneHeaderButtons,
StyledSplitPaneHeaderCollapseIcon,
} from "ui/splitpane/style";
interface SplitPaneHeaderProps {
variant?: "normal" | "secondary";
children: ReactNode;
buttons?: ReactNode;
collapsed: boolean;
sticky?: boolean;
borderTop?: boolean;
borderBottom?: boolean;
onToggle?: () => void;
}
export const SplitPaneHeader: React.FC<SplitPaneHeaderProps> = ({
children,
buttons,
onToggle,
collapsed,
variant,
sticky,
borderTop = false,
borderBottom = true,
}) => {
const stopPropagation = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
e.stopPropagation();
}, []);
return (
<StyledSplitPaneHeader
onClick={onToggle}
$collapsible={!!onToggle}
$variant={variant}
$sticky={sticky}
$borderTop={borderTop}
$borderBottom={borderBottom}
>
{onToggle && (
<StyledSplitPaneHeaderCollapseIcon $collapsed={collapsed}>
<TriangleIcon />
</StyledSplitPaneHeaderCollapseIcon>
)}
<span>{children}</span>
{buttons && (
<StyledSplitPaneHeaderButtons onClick={stopPropagation}>
{buttons}
</StyledSplitPaneHeaderButtons>
)}
</StyledSplitPaneHeader>
);
};
|