refactor(FE): Use className props for drawer widths

This commit is contained in:
rstubryan
2026-01-30 11:05:38 +07:00
parent b2670f76bf
commit 8babb4e3d7
2 changed files with 9 additions and 4 deletions
+5 -3
View File
@@ -16,7 +16,6 @@ interface DrawerProps {
onBackdropClick?: () => void; onBackdropClick?: () => void;
closeOnBackdropClick?: boolean; closeOnBackdropClick?: boolean;
expandedContent?: ReactNode; expandedContent?: ReactNode;
expandedWidth?: string;
} }
type DrawerClassName = { type DrawerClassName = {
@@ -25,6 +24,7 @@ type DrawerClassName = {
drawerSide?: string; drawerSide?: string;
drawerOverlay?: string; drawerOverlay?: string;
drawerSidebarContent?: string; drawerSidebarContent?: string;
drawerExpandedContent?: string;
}; };
const Drawer = ({ const Drawer = ({
@@ -39,7 +39,6 @@ const Drawer = ({
onBackdropClick, onBackdropClick,
closeOnBackdropClick = true, closeOnBackdropClick = true,
expandedContent, expandedContent,
expandedWidth = 'w-[400px]',
}: DrawerProps) => { }: DrawerProps) => {
const getDrawerClassNames = (): DrawerClassName => { const getDrawerClassNames = (): DrawerClassName => {
const baseClassNames = { const baseClassNames = {
@@ -56,6 +55,9 @@ const Drawer = ({
? 'w-full lg:min-w-[600px] lg:max-w-[600px]' ? 'w-full lg:min-w-[600px] lg:max-w-[600px]'
: 'w-full max-w-[300px] lg:w-[300px]'; : 'w-full max-w-[300px] lg:w-[300px]';
} }
if (className?.drawerSidebarContent) {
return '';
}
return 'w-full sm:min-w-120 sm:w-fit'; return 'w-full sm:min-w-120 sm:w-fit';
}; };
@@ -174,7 +176,7 @@ const Drawer = ({
<div <div
className={cn( className={cn(
'border-l border-gray-200 bg-white flex flex-col h-full', 'border-l border-gray-200 bg-white flex flex-col h-full',
expandedWidth className?.drawerExpandedContent
)} )}
> >
<div className='overflow-y-auto flex-1 h-full'> <div className='overflow-y-auto flex-1 h-full'>
@@ -58,7 +58,10 @@ export default function UniformityPageWrapper({
zIndex='99999' zIndex='99999'
sidebarContent={isOpen ? <div className=''>{children}</div> : null} sidebarContent={isOpen ? <div className=''>{children}</div> : null}
expandedContent={expandedDrawerOpen ? expandedDrawerContent : null} expandedContent={expandedDrawerOpen ? expandedDrawerContent : null}
expandedWidth='w-[500px]' className={{
drawerSidebarContent: 'w-[446px]',
drawerExpandedContent: 'w-[446px]',
}}
/> />
</> </>
); );