gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-25 07:45:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(FE): Make ConfirmationModal body scrollable and sticky

Browse Source
This commit is contained in:
rstubryan
2026-02-03 11:46:45 +07:00
parent e5d6be446a
commit 489e8a31f3
1 changed files with 70 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/modal/ConfirmationModal.tsx
+70 -59
View File
@@ -122,10 +122,18 @@ const ConfirmationModal = ({
closeOnBackdrop={closeOnBackdrop} closeOnBackdrop={closeOnBackdrop}
className={{ className={{
...className, ...className,
modalBox: cn('rounded-xl p-4', className?.modalBox), modalBox: cn(
'rounded-xl p-4 flex flex-col gap-4 max-h-[90vh]',
className?.modalBox
),
}} }}
> >
<div className='w-full flex flex-col gap-4'> <div
className={cn(
'flex flex-col gap-4',
children && 'sticky top-0 bg-inherit z-10'
)}
>
{iconPosition === 'center' ? ( {iconPosition === 'center' ? (
<> <>
<div className='w-fit mx-auto'> <div className='w-fit mx-auto'>
@@ -164,71 +172,74 @@ const ConfirmationModal = ({
</div> </div>
</div> </div>
)} )}
</div>
{children && <div className='w-full'>{children}</div>} {children && (
<div className='w-full flex-1 overflow-y-auto'>{children}</div>
)}
{(secondaryButton || primaryButton) && ( {(secondaryButton || primaryButton) && (
<div <div
className={cn('w-full grid gap-3', { className={cn(
'w-full grid gap-3',
children && 'sticky bottom-0 bg-inherit z-10',
{
'grid-cols-2': secondaryButton && primaryButton, 'grid-cols-2': secondaryButton && primaryButton,
'grid-cols-1': 'grid-cols-1':
(secondaryButton && !primaryButton) || (secondaryButton && !primaryButton) ||
(!secondaryButton && primaryButton), (!secondaryButton && primaryButton),
})} }
> )}
{secondaryButton && secondaryButton.text && ( >
<Button {secondaryButton && secondaryButton.text && (
{...secondaryButton} <Button
variant='outline' {...secondaryButton}
color={secondaryButton?.color} variant='outline'
isLoading={secondaryButton?.isLoading} color={secondaryButton?.color}
disabled={ isLoading={secondaryButton?.isLoading}
secondaryButton?.isLoading !== undefined disabled={
? secondaryButton?.isLoading secondaryButton?.isLoading !== undefined
: isPrimaryButtonLoading ? secondaryButton?.isLoading
: isPrimaryButtonLoading
}
onClick={(e) => {
if (secondaryButton?.onClick) {
secondaryButton.onClick(e);
} else {
closeModalHandler();
} }
onClick={(e) => { }}
if (secondaryButton?.onClick) { className={cn(
secondaryButton.onClick(e); 'p-2 rounded-xl text-sm',
} else { secondaryButton?.className
closeModalHandler(); )}
} >
}} {secondaryButton?.text ?? 'Tidak'}
className={cn( </Button>
'p-2 rounded-xl text-sm', )}
secondaryButton?.className
)}
>
{secondaryButton?.text ?? 'Tidak'}
</Button>
)}
{primaryButton && primaryButton.text && ( {primaryButton && primaryButton.text && (
<Button <Button
{...primaryButton} {...primaryButton}
color={primaryButton?.color ?? 'info'} color={primaryButton?.color ?? 'info'}
onClick={primaryButtonClickHandler} onClick={primaryButtonClickHandler}
isLoading={ isLoading={
primaryButton?.isLoading !== undefined primaryButton?.isLoading !== undefined
? primaryButton?.isLoading ? primaryButton?.isLoading
: isPrimaryButtonLoading : isPrimaryButtonLoading
} }
disabled={ disabled={
primaryButton?.isLoading !== undefined primaryButton?.isLoading !== undefined
? primaryButton?.isLoading ? primaryButton?.isLoading
: isPrimaryButtonLoading : isPrimaryButtonLoading
} }
className={cn( className={cn('p-2 rounded-xl text-sm', primaryButton?.className)}
'p-2 rounded-xl text-sm', >
primaryButton?.className {primaryButton?.text ?? 'Ya'}
)} </Button>
> )}
{primaryButton?.text ?? 'Ya'} </div>
</Button> )}
)}
</div>
)}
</div>
</Modal> </Modal>
); );
}; };