flowsheet Resizables.tsx

87.5% Statements 21/24

66.66% Branches 4/6

100% Functions 3/3

83.33% Lines 10/12

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  
 
 
 
120x
120x
 
 
120x
 
 
 
240x
 
 
 
3075x
 
 
 
 
 
 
 
 
 
3207x
 
12300x
 
 
 
13x
26x
 
 
103x
 
 
  import { type ReactNode, useRef } from "react";
import { cn } from "@/lib/utils";
import { ResizableGroupRefContext } from "./ResizableGroupContext";
 
function ResizableGroup({ children }: { children: ReactNode }) {
  const groupRef = useRef<HTMLDivElement>(null);
 
  return (
    <ResizableGroupRefContext.Provider value={groupRef}>
      <div ref={groupRef} className="flex-1 h-full flex grow">
        {children}
      </div>
    </ResizableGroupRefContext.Provider>
  );
}
 
function ResizablePanel({
  children,
  width,
  className,
}: {
  children: ReactNode;
  width: number;
  className?: string;
}) {
  return (
    <div className={cn("shrink-0 flex", className)} style={{ width: width }}>
      {children}
    </div>
  );
}
 
function MiddlePanel({ children }: { children: ReactNode }) {
  return <div className="grow">{children}</div>;
}
 
ResizablePanel.MiddlePanel = MiddlePanel;
 
export { ResizablePanel, ResizableGroup };