refactor: drag handle component (#4663)

packages/ui/src/drag-handle.tsx

@@ -1,14 +1,15 @@
-import React from "react";
+import React, { forwardRef } from "react";
-import { forwardRef } from "react";
 import { MoreVertical } from "lucide-react";
+// helpers
+import { cn } from "../helpers";
 
 interface IDragHandle {
-  isDragging: boolean;
+  className?: string;
   disabled?: boolean;
 }
 
 export const DragHandle = forwardRef<HTMLButtonElement | null, IDragHandle>((props, ref) => {
-  const { isDragging, disabled = false } = props;
+  const { className, disabled = false } = props;
 
   if (disabled) {
     return <div className="w-[14px] h-[18px]" />;
@@ -17,9 +18,10 @@ export const DragHandle = forwardRef<HTMLButtonElement | null, IDragHandle>((pro
   return (
     <button
       type="button"
-      className={` p-[2px] flex flex-shrink-0 rounded bg-custom-background-90 text-custom-sidebar-text-200 group-hover:opacity-100 cursor-grab ${
+      className={cn(
-        isDragging ? "opacity-100" : "opacity-0"
+        "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();

web/components/issues/issue-layouts/list/block.tsx

@@ -67,8 +67,8 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
     !getIsIssuePeeked(issue.id) &&
     setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id, nestingLevel: nestingLevel });
 
-    const issue = issuesMap[issueId];
+  const issue = issuesMap[issueId];
-    const subIssuesCount = issue?.sub_issues_count ?? 0;
+  const subIssuesCount = issue?.sub_issues_count ?? 0;
 
   const { isMobile } = usePlatformOS();
 
@@ -131,8 +131,14 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
       <div className="flex w-full truncate" style={nestingLevel !== 0 ? { paddingLeft } : {}}>
         <div className="flex flex-grow items-center gap-3 truncate">
           <div className="flex items-center gap-0.5">
-            <div className="flex items-center group">
+            <div className="flex items-center">
-              <DragHandle isDragging={isCurrentBlockDragging} ref={dragHandleRef} disabled={!canDrag} />
+              <DragHandle
+                ref={dragHandleRef}
+                disabled={!canDrag}
+                className={cn("opacity-0 group-hover:opacity-100", {
+                  "opacity-100": isCurrentBlockDragging,
+                })}
+              />
               <div className="flex h-5 w-5 items-center justify-center">
                 {subIssuesCount > 0 && (
                   <button

web/components/labels/label-block/label-item-block.tsx

@@ -4,6 +4,7 @@ import { IIssueLabel } from "@plane/types";
 //ui
 import { CustomMenu, DragHandle } from "@plane/ui";
 //types
+import { cn } from "@/helpers/common.helper";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 //hooks
 //components
@@ -39,7 +40,12 @@ export const LabelItemBlock = (props: ILabelItemBlock) => {
   return (
     <div className="group flex items-center">
       <div className="flex items-center">
-        <DragHandle isDragging={isDragging} ref={dragHandleRef} />
+        <DragHandle
+          className={cn("opacity-0 group-hover:opacity-100", {
+            "opacity-100": isDragging,
+          })}
+          ref={dragHandleRef}
+        />
         <LabelName color={label.color} name={label.name} isGroup={isLabelGroup ?? false} />
       </div>