57 lines
2.1 KiB
TypeScript
57 lines
2.1 KiB
TypeScript
import React from "react";
|
|
import { OneOrMany } from "@/helpers";
|
|
import useTheme from "@material-ui/core/styles/useTheme";
|
|
import { Trans, useTranslation } from "react-i18next";
|
|
import { Confirm } from "@/components/confirm";
|
|
import { Button, IconButton, Tooltip } from "@material-ui/core";
|
|
import { Delete } from "mdi-material-ui";
|
|
import { createBoundComponent } from "@/management/common/helpers";
|
|
|
|
export type DeleteResourceActionProps<T> = {
|
|
onDelete: (resource: OneOrMany<T>) => void;
|
|
resource: OneOrMany<T>;
|
|
label: (resource: T) => string;
|
|
children?: (action: any) => React.ReactNode;
|
|
};
|
|
|
|
export function DeleteResourceAction<T>({ onDelete, resource, children, label }: DeleteResourceActionProps<T>) {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation("management");
|
|
|
|
const confirmation = <>
|
|
{ !Array.isArray(resource)
|
|
? <Trans i18nKey="confirm.delete">
|
|
Czy na pewno chcesz usunąć <strong>{ label(resource) }</strong>?
|
|
</Trans>
|
|
: <>
|
|
{ t("confirm.bulk-delete") }
|
|
<ul>
|
|
{ resource.map(current => <li key={ label(current) }>{ label(current) }</li>) }
|
|
</ul>
|
|
</>
|
|
}
|
|
</>;
|
|
|
|
return <Confirm
|
|
onConfirm={ () => onDelete(resource) }
|
|
content={ confirmation }
|
|
confirm={ props =>
|
|
<Button variant="contained" startIcon={ <Delete /> }
|
|
style={{
|
|
backgroundColor: theme.palette.error.dark,
|
|
color: theme.palette.error.contrastText,
|
|
}}
|
|
{ ...props }>
|
|
{ t("actions.delete") }
|
|
</Button>
|
|
}
|
|
>
|
|
{ action => children ? children(action) : <Tooltip title={ t("actions.delete") as string }><IconButton onClick={ action }><Delete /></IconButton></Tooltip> }
|
|
</Confirm>;
|
|
}
|
|
|
|
export function createDeleteAction<T>(props: Pick<DeleteResourceActionProps<T>, 'label' | 'onDelete'>) {
|
|
return createBoundComponent(DeleteResourceAction, props);
|
|
}
|
|
|