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 height glitch while rendered rows adjust to default height

Browse Source
This commit is contained in:
rahulramesha 2024-02-07 16:13:10 +05:30
parent f0f0efb7d4
commit 6755b2a1f3
5 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@ import { cn } from "helpers/common.helper";
import React, { useState, useRef, useEffect, ReactNode, MutableRefObject } from "react"; import React, { useState, useRef, useEffect, ReactNode, MutableRefObject } from "react";
type Props = { type Props = {
defaultHeight?: number; defaultHeight?: string;
verticalOffset?: number; verticalOffset?: number;
horizonatlOffset?: number; horizonatlOffset?: number;
root?: MutableRefObject<HTMLElement | null>; root?: MutableRefObject<HTMLElement | null>;
@ -19,7 +19,7 @@ type Props = {
const RenderIfVisible: React.FC<Props> = (props) => { const RenderIfVisible: React.FC<Props> = (props) => {
const { const {
defaultHeight = 300, defaultHeight = "300px",
root, root,
verticalOffset = 50, verticalOffset = 50,
horizonatlOffset = 0, horizonatlOffset = 0,
@ -35,7 +35,7 @@ const RenderIfVisible: React.FC<Props> = (props) => {
} = props; } = props;
const defaultVisible = !!getShouldRender && getShouldRender(index); const defaultVisible = !!getShouldRender && getShouldRender(index);
const [shouldVisible, setShouldVisible] = useState<boolean>(alwaysRender || defaultVisible); const [shouldVisible, setShouldVisible] = useState<boolean>(alwaysRender || defaultVisible);
const placeholderHeight = useRef<number>(defaultHeight); const placeholderHeight = useRef<string>(defaultHeight);
const intersectionRef = useRef<HTMLElement | null>(null); const intersectionRef = useRef<HTMLElement | null>(null);
const isVisible = alwaysRender || shouldVisible; const isVisible = alwaysRender || shouldVisible;
@ -78,7 +78,7 @@ const RenderIfVisible: React.FC<Props> = (props) => {
// Set height after render // Set height after render
useEffect(() => { useEffect(() => {
if (intersectionRef.current && isVisible) { if (intersectionRef.current && isVisible) {
placeholderHeight.current = intersectionRef.current.offsetHeight; placeholderHeight.current = `${intersectionRef.current.offsetHeight}px`;
} }
}, [isVisible, intersectionRef, alwaysRender, pauseHeightUpdateWhileRendering]); }, [isVisible, intersectionRef, alwaysRender, pauseHeightUpdateWhileRendering]);

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

@ -138,7 +138,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
<RenderIfVisible <RenderIfVisible
classNames="space-y-2" classNames="space-y-2"
root={scrollableContainerRef} root={scrollableContainerRef}
defaultHeight={100} defaultHeight="100px"
horizonatlOffset={50} horizonatlOffset={50}
alwaysRender={snapshot.isDragging} alwaysRender={snapshot.isDragging}
index={index} index={index}

2
web/components/issues/issue-layouts/list/block.tsx
View File

@ -49,7 +49,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
return ( return (
<div <div
className={cn("relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm", { className={cn("min-h-12 relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm", {
"border border-custom-primary-70 hover:border-custom-primary-70": peekIssue && peekIssue.issueId === issue.id, "border border-custom-primary-70 hover:border-custom-primary-70": peekIssue && peekIssue.issueId === issue.id,
})} })}
> >

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

@ -27,7 +27,7 @@ export const IssueBlocksList: FC<Props> = (props) => {
return ( return (
<RenderIfVisible <RenderIfVisible
key={`${issueId}`} key={`${issueId}`}
defaultHeight={45} defaultHeight="3rem"
root={containerRef} root={containerRef}
classNames={"relative border border-transparent border-b-custom-border-200 last:border-b-transparent"} classNames={"relative border border-transparent border-b-custom-border-200 last:border-b-transparent"}
index={index} index={index}

2
web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
View File

@ -88,7 +88,7 @@ export const SpreadsheetTable = observer((props: Props) => {
<RenderIfVisible <RenderIfVisible
key={id} key={id}
as="tr" as="tr"
defaultHeight={44.5} defaultHeight="2.75rem"
root={containerRef} root={containerRef}
placeholderChildren={<td colSpan={100} className="border-b-[0.5px]" />} placeholderChildren={<td colSpan={100} className="border-b-[0.5px]" />}
index={index} index={index}