103 lines
3.3 KiB
TypeScript
103 lines
3.3 KiB
TypeScript
import { useState, type DragEvent } from "react";
|
|
import { type PromptVariant } from "./types";
|
|
import { api } from "~/utils/api";
|
|
import { useHandledAsyncCallback } from "~/utils/hooks";
|
|
import { Button, HStack, Icon, Tooltip } from "@chakra-ui/react"; // Changed here
|
|
import { BsX } from "react-icons/bs";
|
|
import { RiDraggable } from "react-icons/ri";
|
|
import { cellPadding, headerMinHeight } from "../constants";
|
|
import AutoResizeTextArea from "../AutoResizeTextArea";
|
|
|
|
export default function VariantHeader(props: { variant: PromptVariant }) {
|
|
const utils = api.useContext();
|
|
const [isDragTarget, setIsDragTarget] = useState(false);
|
|
const [label, setLabel] = useState(props.variant.label);
|
|
|
|
const updateMutation = api.promptVariants.update.useMutation();
|
|
const [onSaveLabel] = useHandledAsyncCallback(async () => {
|
|
if (label && label !== props.variant.label) {
|
|
await updateMutation.mutateAsync({
|
|
id: props.variant.id,
|
|
updates: { label: label },
|
|
});
|
|
}
|
|
}, [updateMutation, props.variant.id, props.variant.label, label]);
|
|
|
|
const hideMutation = api.promptVariants.hide.useMutation();
|
|
const [onHide] = useHandledAsyncCallback(async () => {
|
|
await hideMutation.mutateAsync({
|
|
id: props.variant.id,
|
|
});
|
|
await utils.promptVariants.list.invalidate();
|
|
}, [hideMutation, props.variant.id]);
|
|
|
|
const reorderMutation = api.promptVariants.reorder.useMutation();
|
|
const [onReorder] = useHandledAsyncCallback(
|
|
async (e: DragEvent<HTMLDivElement>) => {
|
|
e.preventDefault();
|
|
setIsDragTarget(false);
|
|
const draggedId = e.dataTransfer.getData("text/plain");
|
|
const droppedId = props.variant.id;
|
|
if (!draggedId || !droppedId || draggedId === droppedId) return;
|
|
await reorderMutation.mutateAsync({
|
|
draggedId,
|
|
droppedId,
|
|
});
|
|
await utils.promptVariants.list.invalidate();
|
|
},
|
|
[reorderMutation, props.variant.id]
|
|
);
|
|
|
|
return (
|
|
<HStack
|
|
spacing={4}
|
|
alignItems="center"
|
|
minH={headerMinHeight}
|
|
draggable
|
|
onDragStart={(e) => {
|
|
e.dataTransfer.setData("text/plain", props.variant.id);
|
|
e.currentTarget.style.opacity = "0.4";
|
|
}}
|
|
onDragEnd={(e) => {
|
|
e.currentTarget.style.opacity = "1";
|
|
}}
|
|
onDragOver={(e) => {
|
|
e.preventDefault();
|
|
setIsDragTarget(true);
|
|
}}
|
|
onDragLeave={() => {
|
|
setIsDragTarget(false);
|
|
}}
|
|
onDrop={onReorder}
|
|
backgroundColor={isDragTarget ? "gray.100" : "transparent"}
|
|
>
|
|
<Icon
|
|
as={RiDraggable}
|
|
boxSize={6}
|
|
color="gray.400"
|
|
_hover={{ color: "gray.800", cursor: "pointer" }}
|
|
/>
|
|
<AutoResizeTextArea // Changed to Input
|
|
size="sm"
|
|
value={label}
|
|
onChange={(e) => setLabel(e.target.value)}
|
|
onBlur={onSaveLabel}
|
|
placeholder="Variant Name"
|
|
borderWidth={1}
|
|
borderColor="transparent"
|
|
fontWeight="bold"
|
|
fontSize={16}
|
|
_hover={{ borderColor: "gray.300" }}
|
|
_focus={{ borderColor: "blue.500", outline: "none" }}
|
|
flex={1}
|
|
px={cellPadding.x}
|
|
/>
|
|
<Tooltip label="Hide Variant" hasArrow>
|
|
<Button variant="ghost" colorScheme="gray" size="sm" onClick={onHide}>
|
|
<Icon as={BsX} boxSize={6} />
|
|
</Button>
|
|
</Tooltip>
|
|
</HStack>
|
|
);
|
|
}
|