mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
fix constant draggable height while dragging and rendering blocks in kanban
This commit is contained in:
parent
a51e21873e
commit
f0f0efb7d4
@ -13,6 +13,7 @@ type Props = {
|
|||||||
getShouldRender?: (index: number) => boolean;
|
getShouldRender?: (index: number) => boolean;
|
||||||
updateRenderTracker?: (index: number, isVisble: boolean) => void;
|
updateRenderTracker?: (index: number, isVisble: boolean) => void;
|
||||||
placeholderChildren?: ReactNode;
|
placeholderChildren?: ReactNode;
|
||||||
|
pauseHeightUpdateWhileRendering?: boolean;
|
||||||
index: number;
|
index: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -29,6 +30,7 @@ const RenderIfVisible: React.FC<Props> = (props) => {
|
|||||||
getShouldRender,
|
getShouldRender,
|
||||||
updateRenderTracker,
|
updateRenderTracker,
|
||||||
placeholderChildren = null,
|
placeholderChildren = null,
|
||||||
|
pauseHeightUpdateWhileRendering = false,
|
||||||
index,
|
index,
|
||||||
} = props;
|
} = props;
|
||||||
const defaultVisible = !!getShouldRender && getShouldRender(index);
|
const defaultVisible = !!getShouldRender && getShouldRender(index);
|
||||||
@ -78,10 +80,11 @@ const RenderIfVisible: React.FC<Props> = (props) => {
|
|||||||
if (intersectionRef.current && isVisible) {
|
if (intersectionRef.current && isVisible) {
|
||||||
placeholderHeight.current = intersectionRef.current.offsetHeight;
|
placeholderHeight.current = intersectionRef.current.offsetHeight;
|
||||||
}
|
}
|
||||||
}, [isVisible, intersectionRef, alwaysRender]);
|
}, [isVisible, intersectionRef, alwaysRender, pauseHeightUpdateWhileRendering]);
|
||||||
|
|
||||||
const child = isVisible ? <>{children}</> : placeholderChildren;
|
const child = isVisible ? <>{children}</> : placeholderChildren;
|
||||||
const style = isVisible ? {} : { height: placeholderHeight.current, width: "100%" };
|
const style =
|
||||||
|
isVisible && !pauseHeightUpdateWhileRendering ? {} : { height: placeholderHeight.current, width: "100%" };
|
||||||
const className = isVisible ? classNames : cn(classNames, "animate-pulse bg-custom-background-80");
|
const className = isVisible ? classNames : cn(classNames, "animate-pulse bg-custom-background-80");
|
||||||
|
|
||||||
return React.createElement(as, { ref: intersectionRef, style, className }, child);
|
return React.createElement(as, { ref: intersectionRef, style, className }, child);
|
||||||
|
@ -286,6 +286,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
|
|||||||
storeType={storeType}
|
storeType={storeType}
|
||||||
addIssuesToView={addIssuesToView}
|
addIssuesToView={addIssuesToView}
|
||||||
scrollableContainerRef={scrollableContainerRef}
|
scrollableContainerRef={scrollableContainerRef}
|
||||||
|
isDragStarted={isDragStarted}
|
||||||
/>
|
/>
|
||||||
</DragDropContext>
|
</DragDropContext>
|
||||||
</div>
|
</div>
|
||||||
|
@ -27,6 +27,7 @@ interface IssueBlockProps {
|
|||||||
quickActions: (issue: TIssue) => React.ReactNode;
|
quickActions: (issue: TIssue) => React.ReactNode;
|
||||||
canEditProperties: (projectId: string | undefined) => boolean;
|
canEditProperties: (projectId: string | undefined) => boolean;
|
||||||
scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
|
scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
|
||||||
|
isDragStarted?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface IssueDetailsBlockProps {
|
interface IssueDetailsBlockProps {
|
||||||
@ -103,6 +104,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
|
|||||||
quickActions,
|
quickActions,
|
||||||
canEditProperties,
|
canEditProperties,
|
||||||
scrollableContainerRef,
|
scrollableContainerRef,
|
||||||
|
isDragStarted,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const issue = issuesMap[issueId];
|
const issue = issuesMap[issueId];
|
||||||
@ -140,6 +142,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
|
|||||||
horizonatlOffset={50}
|
horizonatlOffset={50}
|
||||||
alwaysRender={snapshot.isDragging}
|
alwaysRender={snapshot.isDragging}
|
||||||
index={index}
|
index={index}
|
||||||
|
pauseHeightUpdateWhileRendering={isDragStarted}
|
||||||
>
|
>
|
||||||
<KanbanIssueDetailsBlock
|
<KanbanIssueDetailsBlock
|
||||||
issue={issue}
|
issue={issue}
|
||||||
|
@ -17,6 +17,7 @@ interface IssueBlocksListProps {
|
|||||||
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
|
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
|
||||||
canEditProperties: (projectId: string | undefined) => boolean;
|
canEditProperties: (projectId: string | undefined) => boolean;
|
||||||
scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
|
scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
|
||||||
|
isDragStarted?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
|
const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
|
||||||
@ -32,6 +33,7 @@ const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
|
|||||||
quickActions,
|
quickActions,
|
||||||
canEditProperties,
|
canEditProperties,
|
||||||
scrollableContainerRef,
|
scrollableContainerRef,
|
||||||
|
isDragStarted,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -59,6 +61,7 @@ const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
|
|||||||
isDragDisabled={isDragDisabled}
|
isDragDisabled={isDragDisabled}
|
||||||
canEditProperties={canEditProperties}
|
canEditProperties={canEditProperties}
|
||||||
scrollableContainerRef={scrollableContainerRef}
|
scrollableContainerRef={scrollableContainerRef}
|
||||||
|
isDragStarted={isDragStarted}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
@ -47,6 +47,7 @@ export interface IGroupByKanBan {
|
|||||||
addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
|
addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
|
||||||
canEditProperties: (projectId: string | undefined) => boolean;
|
canEditProperties: (projectId: string | undefined) => boolean;
|
||||||
scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
|
scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
|
||||||
|
isDragStarted?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
|
const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
|
||||||
@ -70,6 +71,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
|
|||||||
addIssuesToView,
|
addIssuesToView,
|
||||||
canEditProperties,
|
canEditProperties,
|
||||||
scrollableContainerRef,
|
scrollableContainerRef,
|
||||||
|
isDragStarted,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const member = useMember();
|
const member = useMember();
|
||||||
@ -139,6 +141,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
|
|||||||
canEditProperties={canEditProperties}
|
canEditProperties={canEditProperties}
|
||||||
groupByVisibilityToggle={groupByVisibilityToggle}
|
groupByVisibilityToggle={groupByVisibilityToggle}
|
||||||
scrollableContainerRef={scrollableContainerRef}
|
scrollableContainerRef={scrollableContainerRef}
|
||||||
|
isDragStarted={isDragStarted}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@ -173,6 +176,7 @@ export interface IKanBan {
|
|||||||
addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
|
addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
|
||||||
canEditProperties: (projectId: string | undefined) => boolean;
|
canEditProperties: (projectId: string | undefined) => boolean;
|
||||||
scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
|
scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
|
||||||
|
isDragStarted?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const KanBan: React.FC<IKanBan> = observer((props) => {
|
export const KanBan: React.FC<IKanBan> = observer((props) => {
|
||||||
@ -195,6 +199,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
|
|||||||
addIssuesToView,
|
addIssuesToView,
|
||||||
canEditProperties,
|
canEditProperties,
|
||||||
scrollableContainerRef,
|
scrollableContainerRef,
|
||||||
|
isDragStarted,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const issueKanBanView = useKanbanView();
|
const issueKanBanView = useKanbanView();
|
||||||
@ -220,6 +225,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
|
|||||||
addIssuesToView={addIssuesToView}
|
addIssuesToView={addIssuesToView}
|
||||||
canEditProperties={canEditProperties}
|
canEditProperties={canEditProperties}
|
||||||
scrollableContainerRef={scrollableContainerRef}
|
scrollableContainerRef={scrollableContainerRef}
|
||||||
|
isDragStarted={isDragStarted}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -39,6 +39,7 @@ interface IKanbanGroup {
|
|||||||
canEditProperties: (projectId: string | undefined) => boolean;
|
canEditProperties: (projectId: string | undefined) => boolean;
|
||||||
groupByVisibilityToggle: boolean;
|
groupByVisibilityToggle: boolean;
|
||||||
scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
|
scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
|
||||||
|
isDragStarted?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const KanbanGroup = (props: IKanbanGroup) => {
|
export const KanbanGroup = (props: IKanbanGroup) => {
|
||||||
@ -60,6 +61,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
|
|||||||
quickAddCallback,
|
quickAddCallback,
|
||||||
viewId,
|
viewId,
|
||||||
scrollableContainerRef,
|
scrollableContainerRef,
|
||||||
|
isDragStarted,
|
||||||
} = props;
|
} = props;
|
||||||
// hooks
|
// hooks
|
||||||
const projectState = useProjectState();
|
const projectState = useProjectState();
|
||||||
@ -131,6 +133,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
|
|||||||
quickActions={quickActions}
|
quickActions={quickActions}
|
||||||
canEditProperties={canEditProperties}
|
canEditProperties={canEditProperties}
|
||||||
scrollableContainerRef={scrollableContainerRef}
|
scrollableContainerRef={scrollableContainerRef}
|
||||||
|
isDragStarted={isDragStarted}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{provided.placeholder}
|
{provided.placeholder}
|
||||||
|
@ -102,6 +102,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
|
|||||||
quickAddCallback,
|
quickAddCallback,
|
||||||
viewId,
|
viewId,
|
||||||
scrollableContainerRef,
|
scrollableContainerRef,
|
||||||
|
isDragStarted,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const calculateIssueCount = (column_id: string) => {
|
const calculateIssueCount = (column_id: string) => {
|
||||||
@ -154,6 +155,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
|
|||||||
quickAddCallback={quickAddCallback}
|
quickAddCallback={quickAddCallback}
|
||||||
viewId={viewId}
|
viewId={viewId}
|
||||||
scrollableContainerRef={scrollableContainerRef}
|
scrollableContainerRef={scrollableContainerRef}
|
||||||
|
isDragStarted={isDragStarted}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
Loading…
Reference in New Issue
Block a user