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";
type Props = {
defaultHeight?: number;
defaultHeight?: string;
verticalOffset?: number;
horizonatlOffset?: number;
root?: MutableRefObject<HTMLElement | null>;
@ -19,7 +19,7 @@ type Props = {
const RenderIfVisible: React.FC<Props> = (props) => {
const {
defaultHeight = 300,
defaultHeight = "300px",
root,
verticalOffset = 50,
horizonatlOffset = 0,
@ -35,7 +35,7 @@ const RenderIfVisible: React.FC<Props> = (props) => {
} = props;
const defaultVisible = !!getShouldRender && getShouldRender(index);
const [shouldVisible, setShouldVisible] = useState<boolean>(alwaysRender || defaultVisible);
const placeholderHeight = useRef<number>(defaultHeight);
const placeholderHeight = useRef<string>(defaultHeight);
const intersectionRef = useRef<HTMLElement | null>(null);
const isVisible = alwaysRender || shouldVisible;
@ -78,7 +78,7 @@ const RenderIfVisible: React.FC<Props> = (props) => {
// Set height after render
useEffect(() => {
if (intersectionRef.current && isVisible) {
placeholderHeight.current = intersectionRef.current.offsetHeight;
placeholderHeight.current = `${intersectionRef.current.offsetHeight}px`;
}
}, [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
classNames="space-y-2"
root={scrollableContainerRef}
defaultHeight={100}
defaultHeight="100px"
horizonatlOffset={50}
alwaysRender={snapshot.isDragging}
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 (
<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,
})}
>

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

@ -27,7 +27,7 @@ export const IssueBlocksList: FC<Props> = (props) => {
return (
<RenderIfVisible
key={`${issueId}`}
defaultHeight={45}
defaultHeight="3rem"
root={containerRef}
classNames={"relative border border-transparent border-b-custom-border-200 last:border-b-transparent"}
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
key={id}
as="tr"
defaultHeight={44.5}
defaultHeight="2.75rem"
root={containerRef}
placeholderChildren={<td colSpan={100} className="border-b-[0.5px]" />}
index={index}