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 constant draggable height while dragging and rendering blocks in kanban

Browse Source
This commit is contained in:
rahulramesha 2024-02-07 15:44:22 +05:30
parent a51e21873e
commit f0f0efb7d4
7 changed files with 23 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/components/core/render-if-visible-HOC.tsx
View File

@ -13,6 +13,7 @@ type Props = {
getShouldRender?: (index: number) => boolean;
updateRenderTracker?: (index: number, isVisble: boolean) => void;
placeholderChildren?: ReactNode;
pauseHeightUpdateWhileRendering?: boolean;
index: number;
};
@ -29,6 +30,7 @@ const RenderIfVisible: React.FC<Props> = (props) => {
getShouldRender,
updateRenderTracker,
placeholderChildren = null,
pauseHeightUpdateWhileRendering = false,
index,
} = props;
const defaultVisible = !!getShouldRender && getShouldRender(index);
@ -78,10 +80,11 @@ const RenderIfVisible: React.FC<Props> = (props) => {
if (intersectionRef.current && isVisible) {
placeholderHeight.current = intersectionRef.current.offsetHeight;
}
}, [isVisible, intersectionRef, alwaysRender]);
}, [isVisible, intersectionRef, alwaysRender, pauseHeightUpdateWhileRendering]);
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");
return React.createElement(as, { ref: intersectionRef, style, className }, child);

1
web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
View File

@ -286,6 +286,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
storeType={storeType}
addIssuesToView={addIssuesToView}
scrollableContainerRef={scrollableContainerRef}
isDragStarted={isDragStarted}
/>
</DragDropContext>
</div>

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

@ -27,6 +27,7 @@ interface IssueBlockProps {
quickActions: (issue: TIssue) => React.ReactNode;
canEditProperties: (projectId: string | undefined) => boolean;
scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
isDragStarted?: boolean;
}
interface IssueDetailsBlockProps {
@ -103,6 +104,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
quickActions,
canEditProperties,
scrollableContainerRef,
isDragStarted,
} = props;
const issue = issuesMap[issueId];
@ -140,6 +142,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
horizonatlOffset={50}
alwaysRender={snapshot.isDragging}
index={index}
pauseHeightUpdateWhileRendering={isDragStarted}
>
<KanbanIssueDetailsBlock
issue={issue}

3
web/components/issues/issue-layouts/kanban/blocks-list.tsx
View File

@ -17,6 +17,7 @@ interface IssueBlocksListProps {
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
canEditProperties: (projectId: string | undefined) => boolean;
scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
isDragStarted?: boolean;
}
const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
@ -32,6 +33,7 @@ const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
quickActions,
canEditProperties,
scrollableContainerRef,
isDragStarted,
} = props;
return (
@ -59,6 +61,7 @@ const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
isDragDisabled={isDragDisabled}
canEditProperties={canEditProperties}
scrollableContainerRef={scrollableContainerRef}
isDragStarted={isDragStarted}
/>
);
})}

6
web/components/issues/issue-layouts/kanban/default.tsx
View File

@ -47,6 +47,7 @@ export interface IGroupByKanBan {
addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
canEditProperties: (projectId: string | undefined) => boolean;
scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
isDragStarted?: boolean;
}
const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
@ -70,6 +71,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
addIssuesToView,
canEditProperties,
scrollableContainerRef,
isDragStarted,
} = props;
const member = useMember();
@ -139,6 +141,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
canEditProperties={canEditProperties}
groupByVisibilityToggle={groupByVisibilityToggle}
scrollableContainerRef={scrollableContainerRef}
isDragStarted={isDragStarted}
/>
)}
</div>
@ -173,6 +176,7 @@ export interface IKanBan {
addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
canEditProperties: (projectId: string | undefined) => boolean;
scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
isDragStarted?: boolean;
}
export const KanBan: React.FC<IKanBan> = observer((props) => {
@ -195,6 +199,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
addIssuesToView,
canEditProperties,
scrollableContainerRef,
isDragStarted,
} = props;
const issueKanBanView = useKanbanView();
@ -220,6 +225,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
addIssuesToView={addIssuesToView}
canEditProperties={canEditProperties}
scrollableContainerRef={scrollableContainerRef}
isDragStarted={isDragStarted}
/>
);
});

3
web/components/issues/issue-layouts/kanban/kanban-group.tsx
View File

@ -39,6 +39,7 @@ interface IKanbanGroup {
canEditProperties: (projectId: string | undefined) => boolean;
groupByVisibilityToggle: boolean;
scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
isDragStarted?: boolean;
}
export const KanbanGroup = (props: IKanbanGroup) => {
@ -60,6 +61,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
quickAddCallback,
viewId,
scrollableContainerRef,
isDragStarted,
} = props;
// hooks
const projectState = useProjectState();
@ -131,6 +133,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
quickActions={quickActions}
canEditProperties={canEditProperties}
scrollableContainerRef={scrollableContainerRef}
isDragStarted={isDragStarted}
/>
{provided.placeholder}

2
web/components/issues/issue-layouts/kanban/swimlanes.tsx
View File

@ -102,6 +102,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
quickAddCallback,
viewId,
scrollableContainerRef,
isDragStarted,
} = props;
const calculateIssueCount = (column_id: string) => {
@ -154,6 +155,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
quickAddCallback={quickAddCallback}
viewId={viewId}
scrollableContainerRef={scrollableContainerRef}
isDragStarted={isDragStarted}
/>
</div>
)}