79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
import { Button } from './ui/button';
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
|
|
import { blockDefinitions, UIBlock } from './block';
|
|
import { Dispatch, memo, SetStateAction } from 'react';
|
|
import { BlockActionContext } from './create-block';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface BlockActionsProps {
|
|
block: UIBlock;
|
|
handleVersionChange: (type: 'next' | 'prev' | 'toggle' | 'latest') => void;
|
|
currentVersionIndex: number;
|
|
isCurrentVersion: boolean;
|
|
mode: 'edit' | 'diff';
|
|
metadata: any;
|
|
setMetadata: Dispatch<SetStateAction<any>>;
|
|
}
|
|
|
|
function PureBlockActions({
|
|
block,
|
|
handleVersionChange,
|
|
currentVersionIndex,
|
|
isCurrentVersion,
|
|
mode,
|
|
metadata,
|
|
setMetadata,
|
|
}: BlockActionsProps) {
|
|
const blockDefinition = blockDefinitions.find(
|
|
(definition) => definition.kind === block.kind,
|
|
);
|
|
|
|
if (!blockDefinition) {
|
|
throw new Error('Block definition not found!');
|
|
}
|
|
|
|
const actionContext: BlockActionContext = {
|
|
content: block.content,
|
|
handleVersionChange,
|
|
currentVersionIndex,
|
|
isCurrentVersion,
|
|
mode,
|
|
metadata,
|
|
setMetadata,
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-row gap-1">
|
|
{blockDefinition.actions.map((action) => (
|
|
<Tooltip key={action.description}>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
className={cn('h-fit dark:hover:bg-zinc-700', {
|
|
'p-2': !action.label,
|
|
'py-1.5 px-2': action.label,
|
|
})}
|
|
onClick={() => action.onClick(actionContext)}
|
|
disabled={
|
|
action.isDisabled ? action.isDisabled(actionContext) : false
|
|
}
|
|
>
|
|
{action.icon}
|
|
{action.label}
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>{action.description}</TooltipContent>
|
|
</Tooltip>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const BlockActions = memo(PureBlockActions, (prevProps, nextProps) => {
|
|
if (prevProps.block.status !== nextProps.block.status) return false;
|
|
if (prevProps.currentVersionIndex !== nextProps.currentVersionIndex)
|
|
return false;
|
|
if (prevProps.isCurrentVersion !== nextProps.isCurrentVersion) return false;
|
|
|
|
return true;
|
|
});
|