Example code is wrong or outdated for mail

[samiy803]

The following code for the mail sidebar no longer works.

https://github.com/shadcn-ui/ui/blob/8f3b28f50fb17f8af652ef514a1648307d05e7a9/apps/www/app/examples/mail/components/mail.tsx?plain=1#L75-L80

onCollapse no longer sends collapsed state, a quick fix would be to use onCollapse and onExpand:

https://github.com/bvaughn/react-resizable-panels/issues/244#issuecomment-1870076975

[0r0loo]

react-resizable-panels/src/Pannel.ts

🥲

[0r0loo]

     <ResizablePanel
          collapsible
          minSize={15}
          maxSize={20}
          onCollapse={() => {
            console.log('onCollapse');
          }}
          onExpand={() => {
            console.log('onExpand');
          }}
          collapsedSize={4}
        >

collapsible=true

onCollapse=()=>void

onExpand=()=>void

https://github.com/bvaughn/react-resizable-panels/releases/tag/0.0.51

This changed in version 0.0.51.

😡

[gruckion]

Solution.

import { ImperativePanelHandle } from "react-resizable-panels";
const leftPanelRef = useRef<ImperativePanelHandle>(null);

            <ResizablePanel
              ref={leftPanelRef}
              defaultSize={defaultLayout[0]}
              collapsedSize={4}
              collapsible={true}
              minSize={15}
              maxSize={20}
              onCollapse={() => {
                const panel = leftPanelRef.current;
                if (panel?.isCollapsed()) {
                  setIsCollapsed(true);
                  document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(true)}`;
                }
              }}
              onExpand={() => {
                const panel = leftPanelRef.current;
                if (!panel?.isCollapsed()) {
                  setIsCollapsed(false);
                  document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(false)}`;
                }
              }}
              className={cn(false && "min-w-[50px] transition-all duration-300 ease-in-out")}
            >

[JheanAntunes]

Solução.

import { ImperativePanelHandle } from "react-resizable-panels";
const leftPanelRef = useRef<ImperativePanelHandle>(null);

            <ResizablePanel
              ref={leftPanelRef}
              defaultSize={defaultLayout[0]}
              collapsedSize={4}
              collapsible={true}
              minSize={15}
              maxSize={20}
              onCollapse={() => {
                const panel = leftPanelRef.current;
                if (panel?.isCollapsed()) {
                  setIsCollapsed(true);
                  document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(true)}`;
                }
              }}
              onExpand={() => {
                const panel = leftPanelRef.current;
                if (!panel?.isCollapsed()) {
                  setIsCollapsed(false);
                  document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(false)}`;
                }
              }}
              className={cn(false && "min-w-[50px] transition-all duration-300 ease-in-out")}
            >

if (panel?.is Collapsed()) { console.log('collapse') } this condition is false and the style did not change, I removed this condition and the ResizablePanel style worked onCollapse={() => {

              setIsCollapsed(true);
              document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(true)}`;
          }}

[samiy803]

This solution is good. Please remove JSON.stringify(false) and JSON.stringify(true) and replace them with false and true directly. There is also no need for a ref:

 <ResizablePanel
              defaultSize={defaultLayout[0]}
              collapsedSize={4}
              collapsible={true}
              minSize={15}
              maxSize={20}
              onCollapse={() => {
                setIsCollapsed(true);
                document.cookie = "react-resizable-panels:collapsed=true";
              }}
              onExpand={() => {
                setIsCollapsed(false);
                document.cookie = "react-resizable-panels:collapsed=false";
              }}
              className={cn(false && "min-w-[50px] transition-all duration-300 ease-in-out")}
            >

This can be implemented when react-resizable-panels is upgraded, though I'm not sure if that will break other things

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.