File size: 2,255 Bytes
f0743f4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | import { forwardRef } from 'react';
import { CheckIcon } from 'lucide-react';
import { Spinner, DialogButton, InfoHoverCard, ESide } from '@librechat/client';
import type { TDangerButtonProps } from '~/common';
import type { ForwardedRef } from 'react';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils';
const DangerButton = (props: TDangerButtonProps, ref: ForwardedRef<HTMLButtonElement>) => {
const {
id,
onClick,
mutation,
disabled,
confirmClear,
infoTextCode,
actionTextCode,
className = '',
showText = true,
dataTestIdInitial,
dataTestIdConfirm,
infoDescriptionCode,
confirmActionTextCode = 'com_ui_confirm_action',
} = props;
const localize = useLocalize();
const renderMutation = (node: React.ReactNode | string) => {
if (mutation && mutation.isLoading) {
return <Spinner className="h-5 w-5" />;
}
return node;
};
return (
<div className="flex items-center justify-between">
{showText && (
<div className={`flex items-center ${infoDescriptionCode ? 'space-x-2' : ''}`}>
<div>{localize(infoTextCode)}</div>
{infoDescriptionCode && <InfoHoverCard side={ESide.Bottom} text={infoDescriptionCode} />}
</div>
)}
<DialogButton
id={id}
ref={ref}
disabled={disabled}
onClick={onClick}
className={cn(
'btn relative border-none bg-red-500 text-white hover:bg-red-700 dark:hover:bg-red-700',
className,
)}
>
{confirmClear ? (
<div
className="flex w-full items-center justify-center gap-2"
id={`${id}-text`}
data-testid={dataTestIdConfirm}
>
{renderMutation(<CheckIcon className="h-5 w-5" />)}
{mutation && mutation.isLoading ? null : localize(confirmActionTextCode)}
</div>
) : (
<div
className="flex w-full items-center justify-center gap-2"
id={`${id}-text`}
data-testid={dataTestIdInitial}
>
{renderMutation(localize(actionTextCode))}
</div>
)}
</DialogButton>
</div>
);
};
export default forwardRef(DangerButton);
|