Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: update scrollbar style #8661

Closed
wants to merge 4 commits into from
Closed

fix: update scrollbar style #8661

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6e39e83
update scrollbars globally
akash-codemonk Oct 20, 2021
b5ba7f8
Merge branch 'release' of github.com:appsmithorg/appsmith into fix/gl…
akash-codemonk Oct 21, 2021
907f6d6
Merge branch 'release' of github.com:appsmithorg/appsmith into fix/gl…
akash-codemonk Oct 26, 2021
657885c
Hide the scroll of react-virtuoso
akash-codemonk Oct 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Hide the scroll of react-virtuoso
  • Loading branch information
@akash-codemonk
akash-codemonk committed Oct 26, 2021
commit 657885c65753f88aa67d0b86aac3e55b1c6c9e3d
23 changes: 18 additions & 5 deletions app/client/src/comments/AppComments/AppCommentThreads.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,10 @@ const Container = styled.div`
display: flex;
flex-direction: column;
flex: 1;
overflow: auto;
${hideScrollbar};
// Hiding the scroll of react-virtuoso
& > div:first-child {
${hideScrollbar};
}
`;

export const useSortedCommentThreadIds = (
Expand Down Expand Up @@ -77,7 +79,7 @@ function AppCommentThreads() {
applicationCommentsSelector(applicationId),
);
const appCommentThreadIds = getAppCommentThreads(appCommentThreadsByRefMap);
const containerRef = useRef<HTMLDivElement>(null);
const containerRef = useRef<HTMLElement | Window | null>(null);

const commentThreadIds = useSortedCommentThreadIds(
applicationId,
Expand All @@ -89,6 +91,16 @@ function AppCommentThreads() {
// TODO (rishabh s) Update this when adding pagination to comments
const appCommentThreadsFetched = useSelector(getCommentThreadsFetched);

// Getting the ref of the inner div used of react-virtuoso which is responsible
// for the scroll
const scrollerRef = React.useCallback(
(element: HTMLElement | Window | null) => {
if (element) {
containerRef.current = element as HTMLElement;
}
},
[],
);
useEffect(() => {
// if user is visiting a comment thread link which is already resolved,
// we'll activate the resolved comments filter
Expand All @@ -109,7 +121,7 @@ function AppCommentThreads() {
}, [commentThreadIdFromUrl, appCommentThreadsFetched]);

return (
<Container ref={containerRef}>
<Container>
{commentThreadIds.length > 0 && (
<Virtuoso
data={commentThreadIds}
Expand All @@ -127,10 +139,11 @@ function AppCommentThreads() {
/>
</div>
)}
scrollerRef={scrollerRef}
/>
)}
{commentThreadIds.length === 0 && <AppCommentsPlaceholder />}
<ScrollIndicator containerRef={containerRef} />
<ScrollIndicator containerRef={containerRef as any} top={"50px"} />
</Container>
);
}
Expand Down