Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | 6x 25x 1234x 1394x 1394x 1230x 1390x 1390x 6x 53x | import type React from "react";
import { useTranslation } from "react-i18next";
import { ConfirmModal } from "~app/components/confirm-modal";
import { Button } from "~components/button";
import { Icon } from "~components/icons";
export const SkeletonRemoveButton: React.FC<
React.ComponentProps<typeof Button>
> = ({ children, ...props }) => (
<Button
color="danger"
{...props}
startContent={<Icon className="size-6" name="trash" />}
// oxlint-disable-next-line typescript/strict-boolean-expressions
isIconOnly={!children}
>
{children}
</Button>
);
type ComponentProps = {
mutation: { isPending: boolean };
onRemove: () => void;
subtitle?: string;
children: (controls: { openModal: () => void }) => React.ReactNode;
};
export const RemoveComponent: React.FC<ComponentProps> = ({
mutation,
onRemove,
children,
subtitle,
}) => {
const { t } = useTranslation("default");
return (
<ConfirmModal
onConfirm={onRemove}
isLoading={mutation.isPending}
title={t("components.removeButton.title")}
subtitle={subtitle}
confirmText={t("components.removeButton.confirmText")}
>
{children}
</ConfirmModal>
);
};
type Props = {
mutation: { isPending: boolean };
onRemove: () => void;
children?: string;
subtitle?: string;
noConfirm?: boolean;
} & Omit<React.ComponentProps<typeof Button>, "onClick" | "color" | "children">;
export const RemoveButton: React.FC<Props> = ({
mutation,
onRemove,
children,
subtitle,
noConfirm,
...props
}) => (
<RemoveComponent onRemove={onRemove} mutation={mutation} subtitle={subtitle}>
{({ openModal }) => (
<Button
onPress={noConfirm ? onRemove : openModal}
color="danger"
testID="remove-button"
isIconOnly={!children}
{...props}
isDisabled={props.isDisabled || mutation.isPending}
isLoading={props.isLoading || mutation.isPending}
startContent={
mutation.isPending ? null : <Icon className="size-6" name="trash" />
}
>
{children}
</Button>
)}
</RemoveComponent>
);
export const RemoveButtonSkeleton: React.FC<
React.ComponentProps<typeof Button>
> = ({ children, ...props }) => (
<Button
color="danger"
{...props}
isDisabled
startContent={<Icon name="trash" className="size-6" />}
>
{children}
</Button>
);
|