gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-20 13:32:00 +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}
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' ? (
<>
<div className='w-fit mx-auto'>
@@ -164,71 +172,74 @@ const ConfirmationModal = ({
</div>
</div>
)}
</div>
{children && <div className='w-full'>{children}</div>}
{children && (
<div className='w-full flex-1 overflow-y-auto'>{children}</div>
)}
{(secondaryButton || primaryButton) && (
<div
className={cn('w-full grid gap-3', {
{(secondaryButton || primaryButton) && (
<div
className={cn(
'w-full grid gap-3',
children && 'sticky bottom-0 bg-inherit z-10',
{
'grid-cols-2': secondaryButton && primaryButton,
'grid-cols-1':
(secondaryButton && !primaryButton) ||
(!secondaryButton && primaryButton),
})}
>
{secondaryButton && secondaryButton.text && (
<Button
{...secondaryButton}
variant='outline'
color={secondaryButton?.color}
isLoading={secondaryButton?.isLoading}
disabled={
secondaryButton?.isLoading !== undefined
? secondaryButton?.isLoading
: isPrimaryButtonLoading
}
)}
>
{secondaryButton && secondaryButton.text && (
<Button
{...secondaryButton}
variant='outline'
color={secondaryButton?.color}
isLoading={secondaryButton?.isLoading}
disabled={
secondaryButton?.isLoading !== undefined
? secondaryButton?.isLoading
: isPrimaryButtonLoading
}
onClick={(e) => {
if (secondaryButton?.onClick) {
secondaryButton.onClick(e);
} else {
closeModalHandler();
}
onClick={(e) => {
if (secondaryButton?.onClick) {
secondaryButton.onClick(e);
} else {
closeModalHandler();
}
}}
className={cn(
'p-2 rounded-xl text-sm',
secondaryButton?.className
)}
>
{secondaryButton?.text ?? 'Tidak'}
</Button>
)}
}}
className={cn(
'p-2 rounded-xl text-sm',
secondaryButton?.className
)}
>
{secondaryButton?.text ?? 'Tidak'}
</Button>
)}
{primaryButton && primaryButton.text && (
<Button
{...primaryButton}
color={primaryButton?.color ?? 'info'}
onClick={primaryButtonClickHandler}
isLoading={
primaryButton?.isLoading !== undefined
? primaryButton?.isLoading
: isPrimaryButtonLoading
}
disabled={
primaryButton?.isLoading !== undefined
? primaryButton?.isLoading
: isPrimaryButtonLoading
}
className={cn(
'p-2 rounded-xl text-sm',
primaryButton?.className
)}
>
{primaryButton?.text ?? 'Ya'}
</Button>
)}
</div>
)}
</div>
{primaryButton && primaryButton.text && (
<Button
{...primaryButton}
color={primaryButton?.color ?? 'info'}
onClick={primaryButtonClickHandler}
isLoading={
primaryButton?.isLoading !== undefined
? primaryButton?.isLoading
: isPrimaryButtonLoading
}
disabled={
primaryButton?.isLoading !== undefined
? primaryButton?.isLoading
: isPrimaryButtonLoading
}
className={cn('p-2 rounded-xl text-sm', primaryButton?.className)}
>
{primaryButton?.text ?? 'Ya'}
</Button>
)}
</div>
)}
</Modal>
);
};