github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-1073] fix: Kanban dnd to work as tested on Chrome, Safari and Firefox (#4301)

Browse Source 
* fix Kanban dnd to work as tested on Chrome Safari and Firefox

* fix edge cases

* revert back unintentional change
This commit is contained in:
rahulramesha 2024-04-29 00:48:50 +05:30 committed by GitHub
parent e75947a5f4
commit 6ac3cb9b31
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 37 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/ui/src/control-link/control-link.tsx
View File

@ -6,10 +6,11 @@ export type TControlLink = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
children: React.ReactNode; children: React.ReactNode;
target?: string; target?: string;
disabled?: boolean; disabled?: boolean;
className?: string;
}; };
export const ControlLink: React.FC<TControlLink> = (props) => { export const ControlLink = React.forwardRef<HTMLAnchorElement, TControlLink>((props, ref) => {
const { href, onClick, children, target = "_self", disabled = false, ...rest } = props; const { href, onClick, children, target = "_self", disabled = false, className, ...rest } = props;
const LEFT_CLICK_EVENT_CODE = 0; const LEFT_CLICK_EVENT_CODE = 0;
const handleOnClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => { const handleOnClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
@ -20,11 +21,20 @@ export const ControlLink: React.FC<TControlLink> = (props) => {
} }
}; };
// if disabled but still has a ref or a className then it has to be rendered without a href
if (disabled && (ref || className))
return (
<a ref={ref} className={className}>
{children}
</a>
);
// else if just disabled return without the parent wrapper
if (disabled) return <>{children}</>; if (disabled) return <>{children}</>;
return ( return (
<a href={href} target={target} onClick={handleOnClick} {...rest}> <a href={href} target={target} onClick={handleOnClick} {...rest} ref={ref} className={className}>
{children} {children}
</a> </a>
); );
}; });

49
web/components/issues/issue-layouts/kanban/block.tsx
View File

@ -103,7 +103,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
issueIds, issueIds,
} = props; } = props;
const cardRef = useRef<HTMLDivElement | null>(null); const cardRef = useRef<HTMLAnchorElement | null>(null);
const { const {
router: { workspaceSlug }, router: { workspaceSlug },
} = useApplication(); } = useApplication();
@ -138,6 +138,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
return combine( return combine(
draggable({ draggable({
element, element,
dragHandle: element,
canDrag: () => isDragAllowed, canDrag: () => isDragAllowed,
getInitialData: () => ({ id: issue?.id, type: "ISSUE" }), getInitialData: () => ({ id: issue?.id, type: "ISSUE" }),
onDragStart: () => { onDragStart: () => {
@ -151,7 +152,6 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
}), }),
dropTargetForElements({ dropTargetForElements({
element, element,
canDrop: (payload) => payload.source?.data?.id !== issue?.id,
getData: () => ({ id: issue?.id, type: "ISSUE" }), getData: () => ({ id: issue?.id, type: "ISSUE" }),
onDragEnter: () => { onDragEnter: () => {
setIsDraggingOverBlock(true); setIsDraggingOverBlock(true);
@ -181,35 +181,32 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
href={`/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}issues/${ href={`/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}issues/${
issue.id issue.id
}`} }`}
ref={cardRef}
className={cn(
"block rounded border-[0.5px] outline-[0.5px] outline-transparent w-full border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400",
{ "hover:cursor-pointer": isDragAllowed },
{ "border border-custom-primary-70 hover:border-custom-primary-70": peekIssueId === issue.id },
{ "bg-custom-background-80 z-[100]": isCurrentBlockDragging }
)}
target="_blank" target="_blank"
onClick={() => handleIssuePeekOverview(issue)} onClick={() => handleIssuePeekOverview(issue)}
disabled={!!issue?.tempId} disabled={!!issue?.tempId}
> >
<div <RenderIfVisible
className={cn( classNames="space-y-2 px-3 py-2"
"rounded border-[0.5px] outline-[0.5px] outline-transparent w-full border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400", root={scrollableContainerRef}
{ "hover:cursor-pointer": isDragAllowed }, defaultHeight="100px"
{ "border border-custom-primary-70 hover:border-custom-primary-70": peekIssueId === issue.id }, horizontalOffset={50}
{ "bg-custom-background-80 z-[100]": isCurrentBlockDragging } changingReference={issueIds}
)}
ref={cardRef}
> >
<RenderIfVisible <KanbanIssueDetailsBlock
classNames="space-y-2 px-3 py-2" issue={issue}
root={scrollableContainerRef} displayProperties={displayProperties}
defaultHeight="100px" updateIssue={updateIssue}
horizontalOffset={50} quickActions={quickActions}
changingReference={issueIds} isReadOnly={!canEditIssueProperties}
> />
<KanbanIssueDetailsBlock </RenderIfVisible>
issue={issue}
displayProperties={displayProperties}
updateIssue={updateIssue}
quickActions={quickActions}
isReadOnly={!canEditIssueProperties}
/>
</RenderIfVisible>
</div>
</ControlLink> </ControlLink>
</div> </div>
</> </>