elastic / eui

Elastic UI Framework 🙌
https://eui.elastic.co/
Other
6.09k stars 836 forks source link

[EuiResizableContainer] Needs `isCollapsed` option #4736

Open KishorBudhathoki10 opened 3 years ago

KishorBudhathoki10 commented 3 years ago

It will be nice to have a props like isCollapsed for Resizeable Panel. I have a page where I have a resizable component. But when I go from one page to another the resizeable panel goes back to its previous state. I can manage the size of the panels but not collapsible state.

cchaos commented 3 years ago

So there actually should be a way to handle this already since you can trigger the collapsed state from outside of the container. I took the last example and added a useEffect to trigger the onChange even initially setting the id of a collapsed panel to 2. https://codesandbox.io/s/interesting-microservice-tkfu1

I'm not 100% sure this is the correct way, but it seems to work. @thompsongl Might have more info.

thompsongl commented 3 years ago

The useEffect method will work, but it's reasonable that there should be an isCollapsed and/or initialIsCollapsed prop on EuiResizablePanel.

Edit: I think initialIsCollapsed makes the most sense. The essential use case being to re-enable the previous state on mount.

KishorBudhathoki10 commented 3 years ago

@cchaos I saw in the examples that using buttons we can manage to hide the panel. But, to keep it collapsed with the open icon it does not seem to work. It seems that the collapsed panel gets the width of 33.33% as a inline style. Maybe cause of flex but not sure. You can check it in this link https://codesandbox.io/s/billowing-night-wsw1p.

In the code from sand box that I linked, if you changed the useEffect to:

 useEffect(() => {
    setTimeout(() => {
      onChange(1);
    }, 0);
  }, []);

It seems to work but with a glitch.

@thompsongl I also think initialIsCollapsed makes lot of sense.

github-actions[bot] commented 2 years ago

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

github-actions[bot] commented 2 years ago

❌ We're automatically closing this issue due to lack of activity. Please comment if you feel this was done in error.

darnautov commented 2 years ago

Thanks for reopening! We came up with a use-case when a resizable container with the isCollapsed prop would come in handy because we'd like to preserve it from the localStorage.

github-actions[bot] commented 2 years ago

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

github-actions[bot] commented 1 year ago

❌ We're automatically closing this issue due to lack of activity. Please comment if you feel this was done in error.

github-actions[bot] commented 1 year ago

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.

github-actions[bot] commented 5 months ago

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.