Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add option to have panel collapsed on load #41

Open
mhkeller opened this issue Aug 18, 2024 · 5 comments
Open

Add option to have panel collapsed on load #41

mhkeller opened this issue Aug 18, 2024 · 5 comments
Labels
enhancement New feature or request

Comments

@mhkeller
Copy link

mhkeller commented Aug 18, 2024

Describe the feature in detail (code, mocks, or screenshots encouraged)

Currently, you can set a defaultSize to determine the height on load, but you can't default to having a panel be collapsed on load. I wanted to set the defaultSize for when the panel is in its expanded state but have the panel start off on load. I couldn't find any current way to do this with props.

Here's what I ended up doing to solve it:

function togglePane() {
  if (myPane.isCollapsed()) {
    myPane.expand();

    // We can't set a default size of 50 and also have it be collapsed on load
    // so the first time we expand it, we set it to 50
    const currentSize = myPane.getSize();
    if (currentSize === 0) {
      myPane.resize(50);
    }
    
  } else {
    myPane.collapse();
  }
}

It would be helpful if there were a collapse prop on the component so I could do something like this instead:

<Pane defaultSize={50} minSize={0} collapsed={myPaneIsCollapsed} />

What type of pull request would this be?

New feature

@mhkeller mhkeller added the enhancement New feature or request label Aug 18, 2024
@huntabyte
Copy link
Member

Couldn't this be accomplished like this?

<Pane defaultSize={myPaneIsCollapsed ? 0 : 50} minSize={0} />

@eelcodoornbos
Copy link

eelcodoornbos commented Oct 9, 2024

I'm running into this as well. Both solutions require keeping track of state outside of the PaneAPI in the myPaneIsCollapsed variable, while the API can already tell me if the panel is collapsed or not. It just cannot yet be used to set it to collapsed on first load, as far as I can see.

My toggle button is in a different component from the PaneGroup, so I would have to pass that additional state around using a store, in addition to that PaneAPI object.

I think a nice clean solution could be to just have an extra prop, something like this:
<Pane defaultSize={50} minSize={0} defaultCollapsed={true} />

@huntabyte
Copy link
Member

But regardless, you need to keep track of the state anyway. The default size is there for a reason—to set the default size. If you want it to be collapsed by default, it should be set to the minSize.

I'm not convinced about the value of adding another prop.

@eelcodoornbos
Copy link

But if the default size is set to 0, what would be the new size if the expand() method is called on the Pane's API? There is anyway one piece of information that I cannot specify for this use case.

@LePau
Copy link

LePau commented Dec 19, 2024

Couldn't this be accomplished like this?

<Pane defaultSize={myPaneIsCollapsed ? 0 : 50} minSize={0} />

None of the size attributes seem to be reactive. So, for this to work I had to wrap the pane in a svelte key block. This can be inefficient if the contents of the pane are costly to re-render, which is unfortunately my case.

Here is the key block workaround in case it helps anyone: https://svelte.dev/playground/b5dfd709e6cd45b58ec10ade65548b3c?version=4.2.18

Unfortunately, this also has the same pane resizer bug as #28 which I wasn't able to find a workaround for.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

4 participants