refactor: drag handle component (#4663)

This commit is contained in:
Aaryan Khandelwal 2024-05-31 14:59:49 +05:30 committed by GitHub
parent 092e65b43d
commit a9d9cbcb72
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 26 additions and 12 deletions

View File

@ -1,14 +1,15 @@
import React from "react";
import { forwardRef } from "react";
import React, { 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 ${
isDragging ? "opacity-100" : "opacity-0"
}`}
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();

View File

@ -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 subIssuesCount = issue?.sub_issues_count ?? 0;
const issue = issuesMap[issueId];
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">
<DragHandle isDragging={isCurrentBlockDragging} ref={dragHandleRef} disabled={!canDrag} />
<div className="flex items-center">
<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

View File

@ -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>