Collapse/Expand Split.Pane with Double Click of Pane Gutter about mantine-split-pane

[bnapora]

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

[linear]

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>
  );
}