plane/packages/ui/src/drag-handle.tsx
2024-05-31 14:59:49 +05:30

38 lines
948 B
TypeScript

import React, { forwardRef } from "react";
import { MoreVertical } from "lucide-react";
// helpers
import { cn } from "../helpers";
interface IDragHandle {
className?: string;
disabled?: boolean;
}
export const DragHandle = forwardRef<HTMLButtonElement | null, IDragHandle>((props, ref) => {
const { className, disabled = false } = props;
if (disabled) {
return <div className="w-[14px] h-[18px]" />;
}
return (
<button
type="button"
className={cn(
"p-0.5 flex flex-shrink-0 rounded bg-custom-background-90 text-custom-sidebar-text-200 cursor-grab",
className
)}
onContextMenu={(e) => {
e.preventDefault();
e.stopPropagation();
}}
ref={ref}
>
<MoreVertical className="h-3.5 w-3.5 stroke-custom-text-400" />
<MoreVertical className="-ml-5 h-3.5 w-3.5 stroke-custom-text-400" />
</button>
);
});
DragHandle.displayName = "DragHandle";