Collapse/Expand Split.Pane with Double Click of Pane Gutter

[bnapora]

Hi...great work on mantine-split-pane! Very nice codebase.

I've been testing it in our application and it is very promising. I've looked at the documentation available, and saw the secton on "Reset with Double Click". I'm trying to set up a 3 pane layout with a main center pane and then right and left panes that can be expanded or collapsed by clicking the pane gutter. I've attempted to use minWdith, initialWidth, and maxWdith to make it work. The double click collapses the pane, but does not restore to either the previous width or the initialWidth.

Is it possible to enable double click to collapse to 0 width and then on next double click expand to initialWidth?

Not sure if you're looking at feature requests yet, but this would be useful (in my opinion.)

[linear[bot]]

MANSP-1 Collapse/Expand Split.Pane with Double Click of Pane Gutter

[gfazioli]

@bnapora Thank you! I'm glad you like the mantine-split-pane codebase.

Actually, this feature is already possible but due to a bug in version 0.2.2, the double click was not being released correctly. Thanks to your report, I noticed it. 🙏

So, I have released version 0.2.3 with the double-click working and I have included an example that should address your request. Click here to see it in action

If you have any questions or need further assistance, feel free to ask!

import { Split } from '@gfazioli/mantine-split-pane';
import { Button, Group, Paper, Stack } from '@mantine/core';
import { useState } from 'react';

function Demo() {
  const [initialWidth, setInitialWidth] = useState(200);

  const handleDoubleClick = () => {
    setInitialWidth(initialWidth === 200 ? 100 : 200);
  };

  return (
    <Stack>
      <Split>
        <Split.Pane initialWidth={initialWidth} onDoubleClick={handleDoubleClick}>
          <Paper withBorder w="100%" mih="100%">
            <h3>
              Swap
              <br />
              Double Click →
            </h3>
          </Paper>
        </Split.Pane>

        <Split.Pane>
          <Paper withBorder w="100%" mih="100%">
            <h2>Pane 2</h2>
          </Paper>
        </Split.Pane>
      </Split>
    </Stack>
  );
}

[bnapora]

@gfazioli Excellent...I updated and tested and works great. Thanks for the quick fix.