Can I use conditional rendering with imperative group panel API?
alissa-tung opened this issue · 4 comments
In addition, I am using a version wrapped by https://ui.shadcn.com/ , and I had add the shadcn-ui/ui#2699 support
updated: i had tested on the raw version of this library, still not work too
here the terms conditional rendering refers to https://react-resizable-panels.vercel.app/examples/conditional , and imperative group panel API refers to https://react-resizable-panels.vercel.app/examples/imperative-panel-group-api .
I had done a lot of test, when using something like
<ResizablePanelGroup
direction="horizontal"
ref={colImperativePanelGroupHandle}
>
{layoutState.layoutColumnTwoLeftButtonFocusState ? <></> : leftPanel}
<ResizablePanel id="main-panel" order={2}>
{editorDiv}
</ResizablePanel>
{layoutState.layoutColumnTwoRightButtonFocusState ? <></> : rightPanel}
</ResizablePanelGroup>and the setLayout is from
const leftPanelSize = !layoutState.layoutColumnTwoLeftButtonFocusState
? layoutState.leftPanelSize
: 0;
const rightPanelSize = !layoutState.layoutColumnTwoRightButtonFocusState
? layoutState.rightPanelSize
: 0;
const mainPanelSize = 100 - leftPanelSize - rightPanelSize;
return [leftPanelSize, mainPanelSize, rightPanelSize].filter((x) => x !== 0);the layout does not respect to the value of getLayout() after setLayout.
but just not use conditional render {?:}, instead of set the panel size to zero (without filtering the list) makes the layout seems normal, except there is a 0 width panel and 1 width panel handle.
Can I use conditional rendering with imperative group panel API?
No. The concept of conditional rendering is that sometimes you render a panel, and sometimes you don't. In order to use the imperative API, the panel must be rendered (even if it's collapsed).
but just not use conditional render {?:}, instead of set the panel size to zero (without filtering the list) makes the layout seems normal, except there is a 0 width panel and 1 width panel handle.
Yes. I suggest you just conditionally render them. There isn't really enough info in this issue for me to understand why that isn't sufficient.
I don't know anything about the shad UI library you're using, but if you can share a Code Sandbox showing what you're trying to do, I will take a look. I'll need to see complete code example though.
Can I use conditional rendering with imperative group panel API?
No. The concept of conditional rendering is that sometimes you render a panel, and sometimes you don't. In order to use the imperative API, the panel must be rendered (even if it's collapsed).
but just not use conditional render {?:}, instead of set the panel size to zero (without filtering the list) makes the layout seems normal, except there is a 0 width panel and 1 width panel handle.
Yes. I suggest you just conditionally render them. There isn't really enough info in this issue for me to understand why that isn't sufficient.
I don't know anything about the shad UI library you're using, but if you can share a Code Sandbox showing what you're trying to do, I will take a look. I'll need to see complete code example though.
Thank you for hints on collapsed, I had rewrite my code to using collapsed and expand, then everything works fine.
And my question is got answered by In order to use the imperative API, the panel must be rendered (even if it's collapsed). So I will close this as completed.