splitpane SplitPaneVerticalContainer.tsx

0% Statements 0/19
0% Branches 0/15
0% Functions 0/6
0% Lines 0/19
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React, {
  Children,
  ReactElement,
  ReactNode,
  isValidElement,
  useMemo,
} from "react";
import { SplitPaneVerticalDivider } from "ui/splitpane/SplitPaneDivider";
import useVerticalSplitPane, {
  SplitPaneLayout,
} from "ui/hooks/use-vertical-split-pane";
export type { SplitPaneLayout } from "ui/hooks/use-vertical-split-pane";
 
const COLLAPSED_SIZE = 30;
 
export interface SplitPaneChildProps {
  height?: number;
  onToggle?: () => void;
  ensureMinHeight?: (minHeight: number) => void;
}
 
interface SplitPaneVerticalContainerProps {
  height: number;
  children: ReactNode;
  minPaneSize?: number;
  collapsedSize?: number;
  defaultLayout?: SplitPaneLayout[];
}
 
const SplitPaneVerticalContainer = ({
  height,
  children,
  minPaneSize = COLLAPSED_SIZE,
  collapsedSize = COLLAPSED_SIZE,
  defaultLayout,
}: SplitPaneVerticalContainerProps) => {
  const childArray = useMemo(
    () =>
      Children.toArray(children).filter(
        (child): child is ReactElement<SplitPaneChildProps> =>
          isValidElement<SplitPaneChildProps>(child),
      ),
    [children],
  );
 
  const panelCount = childArray.length;
 
  const { sizes, onDragStart, togglePane, ensurePaneMinHeight } =
    useVerticalSplitPane({
      height,
      panelCount,
      minPaneSize,
      collapsedSize,
      defaultLayout,
    });
 
  Iif (panelCount <= 0 || height <= 0) {
    return null;
  }
 
  return (
    <>
      {childArray.map((child, index) => {
        const paneHeight = sizes[index] ?? 0;
        const isLast = index === panelCount - 1;
 
        return (
          <React.Fragment key={child.key ?? index}>
            {React.cloneElement(child, {
              height: paneHeight,
              onToggle: () => togglePane(index),
              ensureMinHeight: (minHeight: number) =>
                ensurePaneMinHeight(index, minHeight),
            })}
            {!isLast ? (
              <SplitPaneVerticalDivider onMouseDown={onDragStart(index)} />
            ) : null}
          </React.Fragment>
        );
      })}
    </>
  );
};
 
export default SplitPaneVerticalContainer;