mirror of
https://github.com/inventree/InvenTree.git
synced 2026-04-15 07:48:51 +00:00
[plugin] Render tables (#11733)
* Move useFilterSet state to the @lib * Refactor useTable hook into @lib * Refactor string helper functions * Refactor constructFormUrl func * Refactor Boundary component * Refactor StoredTableState * More refactoring * Refactor CopyButton and CopyableCell * Pass table render func to plugins * Provide internal wrapper function, while allowing the "api" and "navigate" functions to be provided by the caller * Adds <InvenTreeTable /> component which is exposed to plugins * Update frontend versioning * Update docs * Handle condition where UI does not provide table rendering function * Move queryFilters out of custom state * Fix exported type * Extract searchParams - Cannot be used outside of router component - Only provide when the table is generated internally * Bump UI version * Fix for right-click context menu - Function needs to be defined with the context menu provider
This commit is contained in:
76
src/frontend/lib/components/CopyButton.tsx
Normal file
76
src/frontend/lib/components/CopyButton.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import { t } from '@lingui/core/macro';
|
||||
import {
|
||||
ActionIcon,
|
||||
type ActionIconVariant,
|
||||
Button,
|
||||
type DefaultMantineColor,
|
||||
type FloatingPosition,
|
||||
CopyButton as MantineCopyButton,
|
||||
type MantineSize,
|
||||
Text,
|
||||
Tooltip
|
||||
} from '@mantine/core';
|
||||
import { IconCheck, IconCopy } from '@tabler/icons-react';
|
||||
|
||||
import type { JSX } from 'react';
|
||||
|
||||
export function CopyButton({
|
||||
value,
|
||||
label,
|
||||
tooltip,
|
||||
disabled,
|
||||
tooltipPosition,
|
||||
content,
|
||||
size,
|
||||
color = 'gray',
|
||||
variant = 'transparent'
|
||||
}: Readonly<{
|
||||
value: any;
|
||||
label?: string;
|
||||
tooltip?: string;
|
||||
disabled?: boolean;
|
||||
tooltipPosition?: FloatingPosition;
|
||||
content?: JSX.Element;
|
||||
size?: MantineSize;
|
||||
color?: DefaultMantineColor;
|
||||
variant?: ActionIconVariant;
|
||||
}>) {
|
||||
const ButtonComponent = label ? Button : ActionIcon;
|
||||
|
||||
// Disable the copy button if we are not in a secure context, as the Clipboard API is not available
|
||||
if (!window.isSecureContext) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<MantineCopyButton value={value}>
|
||||
{({ copied, copy }) => (
|
||||
<Tooltip
|
||||
label={copied ? t`Copied` : (tooltip ?? t`Copy`)}
|
||||
withArrow
|
||||
position={tooltipPosition}
|
||||
>
|
||||
<ButtonComponent
|
||||
disabled={disabled}
|
||||
color={copied ? 'teal' : color}
|
||||
onClick={(e: any) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
copy();
|
||||
}}
|
||||
variant={copied ? 'transparent' : (variant ?? 'transparent')}
|
||||
size={size ?? 'sm'}
|
||||
>
|
||||
{copied ? <IconCheck /> : <IconCopy />}
|
||||
{content}
|
||||
{label && (
|
||||
<Text p={size ?? 'sm'} size={size ?? 'sm'}>
|
||||
{label}
|
||||
</Text>
|
||||
)}
|
||||
</ButtonComponent>
|
||||
</Tooltip>
|
||||
)}
|
||||
</MantineCopyButton>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user