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

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

Browse Source
This commit is contained in:
rahulramesha 2024-04-26 19:32:45 +05:30
parent 15c7deb2db
commit f5b7964c6b
2 changed files with 29 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,10 +6,11 @@ export type TControlLink = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
children: React.ReactNode;
target?: string;
disabled?: boolean;
className?: string;
};
export const ControlLink: React.FC<TControlLink> = (props) => {
const { href, onClick, children, target = "_self", disabled = false, ...rest } = props;
export const ControlLink = React.forwardRef<HTMLAnchorElement, TControlLink>((props, ref) => {
const { href, onClick, children, target = "_self", disabled = false, className, ...rest } = props;
const LEFT_CLICK_EVENT_CODE = 0;
const handleOnClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
@ -23,8 +24,8 @@ export const ControlLink: React.FC<TControlLink> = (props) => {
if (disabled) return <>{children}</>;
return (
<a href={href} target={target} onClick={handleOnClick} {...rest}>
<a href={href} target={target} onClick={handleOnClick} {...rest} ref={ref} className={className}>
{children}
</a>
);
};
});

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

@ -60,7 +60,7 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
className="absolute -top-1 right-0 hidden group-hover/kanban-block:block"
onClick={handleEventPropagation}
>
{quickActions(issue)}
{!isReadOnly && quickActions(issue)}
</div>
</div>
</WithDisplayPropertiesHOC>
@ -103,7 +103,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
issueIds,
} = props;
const cardRef = useRef<HTMLDivElement | null>(null);
const cardRef = useRef<HTMLAnchorElement | null>(null);
const {
router: { workspaceSlug },
} = useApplication();
@ -138,6 +138,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
return combine(
draggable({
element,
dragHandle: element,
canDrag: () => isDragAllowed,
getInitialData: () => ({ id: issue?.id, type: "ISSUE" }),
onDragStart: () => {
@ -151,7 +152,6 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
}),
dropTargetForElements({
element,
canDrop: (payload) => payload.source?.data?.id !== issue?.id,
getData: () => ({ id: issue?.id, type: "ISSUE" }),
onDragEnter: () => {
setIsDraggingOverBlock(true);
@ -184,32 +184,29 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
target="_blank"
onClick={() => handleIssuePeekOverview(issue)}
disabled={!!issue?.tempId}
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 }
)}
>
<div
className={cn(
"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 }
)}
ref={cardRef}
<RenderIfVisible
classNames="space-y-2 px-3 py-2"
root={scrollableContainerRef}
defaultHeight="100px"
horizontalOffset={50}
changingReference={issueIds}
>
<RenderIfVisible
classNames="space-y-2 px-3 py-2"
root={scrollableContainerRef}
defaultHeight="100px"
horizontalOffset={50}
changingReference={issueIds}
>
<KanbanIssueDetailsBlock
issue={issue}
displayProperties={displayProperties}
updateIssue={updateIssue}
quickActions={quickActions}
isReadOnly={!canEditIssueProperties}
/>
</RenderIfVisible>
</div>
<KanbanIssueDetailsBlock
issue={issue}
displayProperties={displayProperties}
updateIssue={updateIssue}
quickActions={quickActions}
isReadOnly={!canEditIssueProperties}
/>
</RenderIfVisible>
</ControlLink>
</div>
</>