Skip to content

Commit

Permalink
some fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@VanyaMate
VanyaMate committed Aug 7, 2024
1 parent 9440b52 commit 7ff4e97
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 30 deletions.
1 change: 0 additions & 1 deletion src/shared/ui-kit/box/Virtual/hooks/useVirtualList/useVirtualList.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ export const useVirtualList = function (props: UseVirtualListProps) {
);

const setIndex = useCallback<VirtualIndexSetter>((index: number) => {
console.log('set index', index);
currentIndex.current = index;
setVirtualList(
getVirtualList({ index, list, showAmount }),
Expand Down
3 changes: 3 additions & 0 deletions src/shared/ui-kit/box/Virtual/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,6 @@

---

- No a18n yet
- No scroll interact yet

60 changes: 34 additions & 26 deletions src/shared/ui-kit/box/Virtual/ui/Virtual.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
/* eslint-disable */

import {
ComponentPropsWithoutRef,
FC,
Expand Down Expand Up @@ -150,7 +148,7 @@ export const Virtual: FC<VirtualProps> = memo(function Virtual (props) {
ref.scrollTop = target;
}
}
}, []);
}, [ scrollAnimation ]);

useLayoutEffect(() => {
const ref = containerRef.current;
Expand Down Expand Up @@ -178,7 +176,7 @@ export const Virtual: FC<VirtualProps> = memo(function Virtual (props) {
ref.removeEventListener('wheel', onWheelHandler);
};
}
}, []);
}, [ scrollDistance, scrollTo, type ]);


/*******************************************************************
Expand Down Expand Up @@ -220,7 +218,7 @@ export const Virtual: FC<VirtualProps> = memo(function Virtual (props) {
saveCurrentLastElement(content);
setIndex(Math.min(Math.max(0, list.length - showAmount), currentIndex.current + toggleDistance));
}
}, [ type, setIndex, toggleDistance, saveCurrentFirstElement, saveCurrentLastElement ]);
}, [ type, saveCurrentFirstElement, setIndex, currentIndex, toggleDistance, saveCurrentLastElement, list.length, showAmount ]);

const togglePrevious = useCallback((content: HTMLDivElement) => {
previousScrollAction.current = VirtualAction.TOGGLE_PREVIOUS;
Expand All @@ -233,7 +231,7 @@ export const Virtual: FC<VirtualProps> = memo(function Virtual (props) {
saveCurrentFirstElement(content);
setIndex(Math.max(0, currentIndex.current - toggleDistance));
}
}, [ type, setIndex, toggleDistance, saveCurrentFirstElement, saveCurrentLastElement ]);
}, [ type, saveCurrentLastElement, setIndex, list.length, showAmount, currentIndex, toggleDistance, saveCurrentFirstElement ]);

useLayoutEffect(() => {
const ref = containerRef.current;
Expand All @@ -253,12 +251,13 @@ export const Virtual: FC<VirtualProps> = memo(function Virtual (props) {
distanceToTrigger,
type,
})) {
let isNotStartList: boolean;

switch (previousScrollAction.current) {
case VirtualAction.AUTOSCROLL_NEXT:
case VirtualAction.TOGGLE_NEXT:
break;
default:
let isNotStartList: boolean;

if (isTop(type)) {
isNotStartList = currentIndex.current !== 0;
Expand All @@ -271,8 +270,7 @@ export const Virtual: FC<VirtualProps> = memo(function Virtual (props) {
break;
}

const needUploadNext = hasMoreNext && uploadNext;
if (needUploadNext) {
if (hasMoreNext && uploadNext) {
previousContentHeight.current = content.scrollHeight;
previousScrollAction.current = VirtualAction.TOGGLE_NEXT;

Expand All @@ -293,12 +291,13 @@ export const Virtual: FC<VirtualProps> = memo(function Virtual (props) {
distanceToTrigger,
type,
})) {
let isNotEndList: boolean;

switch (previousScrollAction.current) {
case VirtualAction.AUTOSCROLL_PREVIOUS:
case VirtualAction.TOGGLE_PREVIOUS:
break;
default:
let isNotEndList: boolean;

if (isTop(type)) {
isNotEndList = currentIndex.current < list.length - showAmount;
Expand All @@ -311,8 +310,7 @@ export const Virtual: FC<VirtualProps> = memo(function Virtual (props) {
break;
}

const needUploadPrevious = hasMorePrevious && uploadPrevious;
if (needUploadPrevious) {
if (hasMorePrevious && uploadPrevious) {
previousContentHeight.current = content.scrollHeight;
previousScrollAction.current = VirtualAction.TOGGLE_PREVIOUS;

Expand All @@ -339,7 +337,7 @@ export const Virtual: FC<VirtualProps> = memo(function Virtual (props) {
ref.removeEventListener('scroll', onScrollHandler);
};
}
}, [ setIndex, list ]);
}, [ setIndex, list, distanceToTrigger, type, hasMoreNext, uploadNext, currentIndex, showAmount, toggleNext, loadingNext, hasMorePrevious, uploadPrevious, togglePrevious, loadingPrevious ]);


/*******************************************************************
Expand Down Expand Up @@ -368,7 +366,7 @@ export const Virtual: FC<VirtualProps> = memo(function Virtual (props) {
const positionDelta = currentPosition - previousFirstElementPosition.current;
applyOffsetToCurrentScrollPosition(ref, positionDelta);
}
}, []);
}, [ applyOffsetToCurrentScrollPosition ]);

const scrollByLastElement = useCallback((content: HTMLDivElement, ref: HTMLDivElement) => {
const lastElement = content.lastElementChild as HTMLElement;
Expand All @@ -379,7 +377,7 @@ export const Virtual: FC<VirtualProps> = memo(function Virtual (props) {
const positionDelta = currentPosition - previousLastElementPosition.current;
applyOffsetToCurrentScrollPosition(ref, positionDelta);
}
}, []);
}, [ applyOffsetToCurrentScrollPosition ]);

const updatePreviousFirstElement = useCallback(() => {
const content = contentRef.current;
Expand Down Expand Up @@ -426,6 +424,10 @@ export const Virtual: FC<VirtualProps> = memo(function Virtual (props) {
disableScrollHandler.current = false;
break;
case VirtualAction.AUTOSCROLL_NEXT:
if (!autoscrollNext) {
break;
}

if (isTop(type)) {
scrollByFirstElement(content, ref);
setTimeout(() => {
Expand All @@ -441,6 +443,10 @@ export const Virtual: FC<VirtualProps> = memo(function Virtual (props) {
}
break;
case VirtualAction.AUTOSCROLL_PREVIOUS:
if (!autoscrollPrevious) {
break;
}

if (isTop(type)) {
scrollByLastElement(content, ref);
setTimeout(() => {
Expand All @@ -463,7 +469,7 @@ export const Virtual: FC<VirtualProps> = memo(function Virtual (props) {
updatePreviousFirstElement();
updatePreviousLastElement();
}
}, [ virtualList ]);
}, [ autoscrollNext, autoscrollPrevious, scrollByFirstElement, scrollByLastElement, scrollTo, smoothAutoscroll, type, updatePreviousFirstElement, updatePreviousLastElement, virtualList ]);


/*******************************************************************
Expand All @@ -480,12 +486,6 @@ export const Virtual: FC<VirtualProps> = memo(function Virtual (props) {
const marker = scrollMarkerRef.current;

if (ref && bar && marker) {
if (ref.scrollHeight === ref.offsetHeight && scrollable === true) {
setScrollable(false);
} else if (ref.scrollHeight !== ref.offsetHeight && scrollable === false) {
setScrollable(true);
}

const onScrollHandler = function () {
const { scrollTop, scrollHeight, offsetHeight } = ref;
const barHeight = bar.offsetHeight;
Expand All @@ -502,7 +502,7 @@ export const Virtual: FC<VirtualProps> = memo(function Virtual (props) {
ref.removeEventListener('scroll', onScrollHandler);
};
}
}, []);
}, [ scrollable ]);

useLayoutEffect(() => {
const ref = containerRef.current;
Expand All @@ -514,7 +514,7 @@ export const Virtual: FC<VirtualProps> = memo(function Virtual (props) {
setScrollable(true);
}
}
}, [ list ]);
}, [ list, scrollable ]);


/*******************************************************************
Expand Down Expand Up @@ -585,7 +585,7 @@ export const Virtual: FC<VirtualProps> = memo(function Virtual (props) {
previousLastListItem.current = lastItem;
previousFirstListItem.current = firstItem;
}
}, [ list, toggleDistance ]);
}, [ currentIndex, list, setIndex, showAmount, toggleDistance, type ]);

return (
<div
Expand All @@ -598,13 +598,21 @@ export const Virtual: FC<VirtualProps> = memo(function Virtual (props) {
className={ css.scrollContainer }
ref={ containerRef }
>
<div
className={ classNames(css.loader, { [css.loading]: loadingNext }) }>
{ loaderNextElement }
</div>
{ !hasMoreNext ? noMoreNextElement : null }
<div
ref={ contentRef }
className={ classNames(css.content, {}, [ contentClassName ]) }
ref={ contentRef }
>
{ virtualList.map(render) }
</div>
<div
className={ classNames(css.loader, { [css.loading]: loadingPrevious }) }>
{ loaderPreviousElement }
</div>
{ !hasMorePrevious ? noMorePreviousElement : null }
</div>
<div className={ css.scrollBar } ref={ scrollBarRef }>
Expand Down
10 changes: 7 additions & 3 deletions ...ge/PrivateMessagesInfinityVirtualContainer/ui/PrivateMessagesInfinityVirtualContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@ import {
} from '@/shared/ui-kit/box/Virtual/types/types.ts';
import { Virtual } from '@/shared/ui-kit/box/Virtual/ui/Virtual.tsx';
import { Loader } from '@/shared/ui-kit/loaders/Loader/ui/Loader.tsx';
import {
NoMoreMessageDialogue,
} from '@/entities/dialogue/NoMoreMessageDialogue/ui/NoMoreMessageDialogue.tsx';


export type PrivateMessagesInfinityVirtualContainerProps =
Expand Down Expand Up @@ -81,18 +84,19 @@ export const PrivateMessagesInfinityVirtualContainer: FC<PrivateMessagesInfinity
className={ classNames(css.container, {}, [ className ]) }
contentClassName={ css.content }
distanceToTrigger={ 200 }
hasMoreNext={ false }
hasMorePrevious={ hasMoreMessages[dialogueId] }
key={ dialogueId }
list={ [ ...messages[dialogueId] ] }
loaderNextElement={ <Loader/> }
loaderPreviousElement={ <Loader/> }
loadingNext={ false }
loadingPrevious={ messagesPending[dialogueId] }
noMoreNextElement="[Пользователь] набирает сообщение..."
noMorePreviousElement="Сообщений больше нет :("
noMoreNextElement="..."
noMorePreviousElement={ <NoMoreMessageDialogue/> }
render={ render }
showAmount={ 40 }
smoothAutoscroll
smoothAutoscroll={ true }
type={ VirtualType.BOTTOM }
uploadPrevious={ loadPreviousMessages }
/>
Expand Down

0 comments on commit 7ff4e97

Please sign in to comment.