|
|
|
@ -8,6 +8,8 @@ import { ToastText, ToastType } from 'soapbox/toast';
|
|
|
|
|
|
|
|
|
|
import HStack from '../hstack/hstack';
|
|
|
|
|
import Icon from '../icon/icon';
|
|
|
|
|
import Stack from '../stack/stack';
|
|
|
|
|
import Text from '../text/text';
|
|
|
|
|
|
|
|
|
|
const renderText = (text: ToastText) => {
|
|
|
|
|
if (typeof text === 'string') {
|
|
|
|
@ -24,13 +26,14 @@ interface IToast {
|
|
|
|
|
action?(): void
|
|
|
|
|
actionLink?: string
|
|
|
|
|
actionLabel?: ToastText
|
|
|
|
|
summary?: string
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Customizable Toasts for in-app notifications.
|
|
|
|
|
*/
|
|
|
|
|
const Toast = (props: IToast) => {
|
|
|
|
|
const { t, message, type, action, actionLink, actionLabel } = props;
|
|
|
|
|
const { t, message, type, action, actionLink, actionLabel, summary } = props;
|
|
|
|
|
|
|
|
|
|
const dismissToast = () => toast.dismiss(t.id);
|
|
|
|
|
|
|
|
|
@ -109,35 +112,46 @@ const Toast = (props: IToast) => {
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
<HStack space={4} alignItems='start'>
|
|
|
|
|
<HStack space={3} justifyContent='between' alignItems='start' className='w-0 flex-1'>
|
|
|
|
|
<HStack space={3} alignItems='start' className='w-0 flex-1'>
|
|
|
|
|
<div className='shrink-0'>
|
|
|
|
|
{renderIcon()}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<p className='pt-0.5 text-sm text-gray-900 dark:text-gray-100' data-testid='toast-message'>
|
|
|
|
|
{renderText(message)}
|
|
|
|
|
</p>
|
|
|
|
|
<Stack space={2}>
|
|
|
|
|
<HStack space={4} alignItems='start'>
|
|
|
|
|
<HStack space={3} justifyContent='between' alignItems='start' className='w-0 flex-1'>
|
|
|
|
|
<HStack space={3} alignItems='start' className='w-0 flex-1'>
|
|
|
|
|
<div className='shrink-0'>
|
|
|
|
|
{renderIcon()}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<Text
|
|
|
|
|
size='sm'
|
|
|
|
|
data-testid='toast-message'
|
|
|
|
|
className='pt-0.5'
|
|
|
|
|
weight={typeof summary === 'undefined' ? 'normal' : 'medium'}
|
|
|
|
|
>
|
|
|
|
|
{renderText(message)}
|
|
|
|
|
</Text>
|
|
|
|
|
</HStack>
|
|
|
|
|
|
|
|
|
|
{/* Action */}
|
|
|
|
|
{renderAction()}
|
|
|
|
|
</HStack>
|
|
|
|
|
|
|
|
|
|
{/* Action */}
|
|
|
|
|
{renderAction()}
|
|
|
|
|
{/* Dismiss Button */}
|
|
|
|
|
<div className='flex shrink-0 pt-0.5'>
|
|
|
|
|
<button
|
|
|
|
|
type='button'
|
|
|
|
|
className='inline-flex rounded-md text-gray-600 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:text-gray-600 dark:hover:text-gray-500'
|
|
|
|
|
onClick={dismissToast}
|
|
|
|
|
data-testid='toast-dismiss'
|
|
|
|
|
>
|
|
|
|
|
<span className='sr-only'>Close</span>
|
|
|
|
|
<Icon src={require('@tabler/icons/x.svg')} className='h-5 w-5' />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</HStack>
|
|
|
|
|
|
|
|
|
|
{/* Dismiss Button */}
|
|
|
|
|
<div className='flex shrink-0 pt-0.5'>
|
|
|
|
|
<button
|
|
|
|
|
type='button'
|
|
|
|
|
className='inline-flex rounded-md text-gray-600 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:text-gray-600 dark:hover:text-gray-500'
|
|
|
|
|
onClick={dismissToast}
|
|
|
|
|
data-testid='toast-dismiss'
|
|
|
|
|
>
|
|
|
|
|
<span className='sr-only'>Close</span>
|
|
|
|
|
<Icon src={require('@tabler/icons/x.svg')} className='h-5 w-5' />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</HStack>
|
|
|
|
|
{summary ? (
|
|
|
|
|
<Text theme='muted' size='sm'>{summary}</Text>
|
|
|
|
|
) : null}
|
|
|
|
|
</Stack>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|