bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

AuthorizeRejectButtons: refactor button into a separate component

Browse source
This commit is contained in:
Alex Gleason 2023-03-27 16:59:55 -05:00
parent d08a2e215b
commit 63394bb1b4
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 53 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
app/soapbox/components/authorize-reject-buttons.tsx
View file

@ -1,3 +1,4 @@
import clsx from 'clsx';
import React, { useEffect, useRef, useState } from 'react';
import { FormattedMessage } from 'react-intl';
@ -10,7 +11,7 @@ interface IAuthorizeRejectButtons {
}
/** Buttons to approve or reject a pending item, usually an account. */
const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize, onReject, countdown = 0 }) => {
const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize, onReject, countdown }) => {
const [state, setState] = useState<'authorizing' | 'rejecting' | 'authorized' | 'rejected' | 'pending'>('pending');
const timeout = useRef<NodeJS.Timeout>();
@ -68,35 +69,60 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize
default:
return (
<HStack space={3} alignItems='center'>
<div className='relative'>
<IconButton
src={state === 'rejecting' ? require('@tabler/icons/player-stop-filled.svg') : require('@tabler/icons/x.svg')}
onClick={handleReject}
theme='seamless'
className='h-10 w-10 items-center justify-center border-2 border-danger-600/10 hover:border-danger-600'
iconClassName='h-6 w-6 text-danger-600'
<AuthorizeRejectButton
theme='danger'
icon={require('@tabler/icons/x.svg')}
action={handleReject}
isLoading={state === 'rejecting'}
disabled={state === 'authorizing'}
/>
{(state === 'rejecting') && (
<div className='pointer-events-none absolute inset-0 h-10 w-10 animate-spin rounded-full border-2 border-transparent border-t-danger-600' />
)}
</div>
<div className='relative'>
<IconButton
src={state === 'authorizing' ? require('@tabler/icons/player-stop-filled.svg') : require('@tabler/icons/check.svg')}
onClick={handleAuthorize}
theme='seamless'
className='h-10 w-10 items-center justify-center border-2 border-primary-500/10 hover:border-primary-500'
iconClassName='h-6 w-6 text-primary-500'
<AuthorizeRejectButton
theme='primary'
icon={require('@tabler/icons/check.svg')}
action={handleAuthorize}
isLoading={state === 'authorizing'}
disabled={state === 'rejecting'}
/>
{(state === 'authorizing') && (
<div className='pointer-events-none absolute inset-0 h-10 w-10 animate-spin rounded-full border-2 border-transparent border-t-primary-500' />
)}
</div>
</HStack>
);
}
};
interface IAuthorizeRejectButton {
theme: 'primary' | 'danger'
icon: string
action(): void
isLoading?: boolean
disabled?: boolean
}
const AuthorizeRejectButton: React.FC<IAuthorizeRejectButton> = ({ theme, icon, action, isLoading, disabled }) => {
return (
<div className='relative'>
<IconButton
src={isLoading ? require('@tabler/icons/player-stop-filled.svg') : icon}
onClick={action}
theme='seamless'
className={clsx('h-10 w-10 items-center justify-center border-2', {
'border-primary-500/10 hover:border-primary-500': theme === 'primary',
'border-danger-600/10 hover:border-danger-600': theme === 'danger',
})}
iconClassName={clsx('h-6 w-6', {
'text-primary-500': theme === 'primary',
'text-danger-600': theme === 'danger',
})}
disabled={disabled}
/>
{(isLoading) && (
<div
className={clsx('pointer-events-none absolute inset-0 h-10 w-10 animate-spin rounded-full border-2 border-transparent', {
'border-t-primary-500': theme === 'primary',
'border-t-danger-600': theme === 'danger',
})}
/>
)}
</div>
);
};
export { AuthorizeRejectButtons };