Files
frontend/src/core/components/DataTable/buttons/CopyButton.js
Amirhossein Mahmoodi 5c5aa33741 update
2024-04-23 10:19:40 +03:30

75 lines
2.1 KiB
JavaScript

import { getCommonTooltipProps, parseFromValuesOrFunc } from "@/core/utils/utils";
import { Button, Tooltip } from "@mui/material";
import { useState } from "react";
const DataTable_CopyButton = ({
cell,
table,
...rest
}) => {
const {
options: { localization, muiCopyButtonProps },
} = table;
const { column, row } = cell;
const { columnDef } = column;
const [copied, setCopied] = useState(false);
const handleCopy = (event, text) => {
event.stopPropagation();
navigator.clipboard.writeText(text);
setCopied(true);
setTimeout(() => setCopied(false), 4000);
};
const buttonProps = {
...parseFromValuesOrFunc(muiCopyButtonProps, {
cell,
column,
row,
table,
}),
...parseFromValuesOrFunc(columnDef.muiCopyButtonProps, {
cell,
column,
row,
table,
}),
...rest,
};
return (
<Tooltip
{...getCommonTooltipProps('top')}
title={
buttonProps?.title ??
(copied ? localization.copiedToClipboard : localization.clickToCopy)
}
>
<Button
onClick={(e) => handleCopy(e, cell.getValue())}
size="small"
type="button"
variant="text"
{...buttonProps}
sx={(theme) => ({
backgroundColor: 'transparent',
border: 'none',
color: 'inherit',
cursor: 'copy',
fontFamily: 'inherit',
fontSize: 'inherit',
letterSpacing: 'inherit',
m: '-0.25rem',
minWidth: 'unset',
py: 0,
textAlign: 'inherit',
textTransform: 'inherit',
...(parseFromValuesOrFunc(buttonProps?.sx, theme)),
})}
title={undefined}
/>
</Tooltip>
);
}
export default DataTable_CopyButton