splitpane SplitPaneHeader.tsx

0% Statements 0/8

0% Branches 0/5

0% Functions 0/2

0% Lines 0/7

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  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;
  borderBottom?: boolean;
  onToggle?: () => void;
}
 
export const SplitPaneHeader: React.FC<SplitPaneHeaderProps> = ({
  children,
  buttons,
  onToggle,
  collapsed,
  variant,
  sticky,
  borderBottom = true,
}) => {
  const stopPropagation = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
    e.stopPropagation();
  }, []);
 
  return (
    <StyledSplitPaneHeader
      onClick={onToggle}
      $collapsible={!!onToggle}
      $variant={variant}
      $sticky={sticky}
      $borderBottom={borderBottom}
    >
      {onToggle && (
        <StyledSplitPaneHeaderCollapseIcon $collapsed={collapsed}>
          <TriangleIcon />
        </StyledSplitPaneHeaderCollapseIcon>
      )}
      <span>{children}</span>
      {buttons && (
        <StyledSplitPaneHeaderButtons onClick={stopPropagation}>
          {buttons}
        </StyledSplitPaneHeaderButtons>
      )}
    </StyledSplitPaneHeader>
  );
};