fix constant draggable height while dragging and rendering blocks in kanban

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

View File

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

View File

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

View File

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

View File

@ -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}
/> />
); );
})} })}

View File

@ -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}
/> />
); );
}); });

View File

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

View File

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