Limit size of elements - add maxSize option?

[idobrusin]

For certain applications it would be helpful to limit the size of the panels programmatically. Settings the width via CSS (e.g. max-width attribute) on a panel will limit the size but the adjacent element will still be resized when resizing, leading to strange display behaviour where one panel stays fixed while the others get resized.

Is there an easy way to limit the max size of a panel programmatically?

[nathancahill]

When using maxSize with minSize, which would take precedence? Alternatively, is there a way to flip your logic to set the opposite element's minSize?

[pesla]

Would this comment be sufficient to resume looking at this enhancement?

[coreybruyere]

Has anyone here found a workaround to create a max size ?

[RamonSaldanha]

my solution

var sizes = localStorage.getItem('split-sizes')

var maxSize = 30;
var rest = (100 - maxSize);
if (sizes) {
    sizes = JSON.parse(sizes)
} else {
    sizes = [75, 25] // default sizes
}

var split = Split(['#files', '#right'], {
    sizes: sizes,
    cursor: 'e-resize',
    onDrag: function(sizes) {
        if(sizes[1] > maxSize) {
            split.setSizes([rest, maxSize])
        }
    },
    onDragEnd: function(sizes) {
        localStorage.setItem('split-sizes', JSON.stringify(sizes))
    },
})

[rsshilli]

@nathancahill Can you please provide a release of React-Split to npm so we can use @RamonSaldanha's workaround above?

[JakeSchroeder]

Not sure if this is the best way but heres a typescript react implementation that worked for me based on Ramons answer:

interface IControlPanelGroup {
  children: ReactNode;
  options?: {
    split: "x" | "y" | "both";
    minW: number[];
    maxW: number[];
  }
  className: string;
}

type SplitType = {
  split: {
    setSizes: (number: number[]) => void;
  };
};

export function ControlPanelGroup({ children, options, className }: IControlPanelGroup) {
  const splitRef = useRef(undefined);
  return (
    <Split
      ref={splitRef}
      sizes={options.minW}
      direction={options?.split === "x" ? "horizontal" : "vertical"}
      gutterSize={3}
      minSize={32}
      className={`flex w-full h-full ${className}`}
      onDrag={(sizes) => {
        if (sizes[0] > options.maxW[0]) {
          if (splitRef.current as SplitType) {
            splitRef.current.split.setSizes(options.maxW);
          }
        }
      }}
    >
      {children}
    </Split>
  );
}

Usage:

<ControlPanelGroup className="items-center justify-start" options={{ minW: [15, 85], maxW: [25, 75], split: "x" }}>
  <ControlPanel>
    ...
  </ControlPanel>
  <ControlPanel>
   ...
  </ControlPanel>
</ControlPanelGroup>