добработал компонентус. можно адыхать... .......................

VanyaMate · Aug 7, 2024 · 0fd47c4 · 0fd47c4
1 parent ff4970b
commit 0fd47c4
Show file tree

Hide file tree

Showing 6 changed files with 278 additions and 105 deletions.
diff --git a/src/entities/message/item/MessageBody/ui/MessageBody.module.scss b/src/entities/message/item/MessageBody/ui/MessageBody.module.scss
@@ -1,4 +1,4 @@
 .image {
-    height     : 300px;
     max-height : 300px;
+    max-width  : 100%;
 }
diff --git a/src/shared/ui-kit/box/Virtual/hooks/useVirtualList/useVirtualList.ts b/src/shared/ui-kit/box/Virtual/hooks/useVirtualList/useVirtualList.ts
@@ -27,12 +27,12 @@ export const useVirtualList = function (props: UseVirtualListProps) {
         getVirtualList({ index: currentIndex.current, list, showAmount }),
     );
 
-    const setIndex = useCallback<VirtualIndexSetter>((index: number) => {
+    const setIndex = useCallback<VirtualIndexSetter>((index: number, list: VirtualList, showAmount: number) => {
         currentIndex.current = index;
         setVirtualList(
             getVirtualList({ index, list, showAmount }),
         );
-    }, [ list, showAmount ]);
+    }, []);
 
     return { currentIndex, virtualList, setIndex };
 };
diff --git a/src/shared/ui-kit/box/Virtual/types/types.ts b/src/shared/ui-kit/box/Virtual/types/types.ts
@@ -25,7 +25,7 @@ export enum VirtualScrollDirection {
 }
 
 
-export type VirtualIndexSetter = (index: number) => void;
+export type VirtualIndexSetter = (index: number, list: VirtualList, showAmount: number) => void;
 
 export enum VirtualType {
     TOP,
@@ -35,3 +35,10 @@ export enum VirtualType {
 export type VirtualList = Array<unknown>;
 export type VirtualUploadMethod = () => Promise<unknown>;
 export type VirtualRenderMethod = (item: unknown, index: number) => ReactNode;
+export type VirtualScrollTo = (target: number, smooth: boolean, animationMs: number) => void;
+
+export type VirtualElementProps = {
+    currentIndex: MutableRefObject<number>;
+    toFirstItem: () => void;
+}
+export type VirtualElement = (props: VirtualElementProps) => ReactNode;
diff --git a/src/shared/ui-kit/box/Virtual/ui/Virtual.module.scss b/src/shared/ui-kit/box/Virtual/ui/Virtual.module.scss
@@ -1,13 +1,15 @@
 .container {
-    overflow : hidden;
-    width    : 100%;
-    height   : 100%;
-    position : relative;
+    overflow       : hidden;
+    width          : 100%;
+    height         : 100%;
+    position       : relative;
+    display        : flex;
+    flex-direction : column-reverse;
 
     .scrollContainer {
         overflow       : hidden;
         width          : 100%;
-        height         : 100%;
+        flex           : 1;
         display        : flex;
         flex-direction : column-reverse;
         transition     : var(--transition-fast);
@@ -41,27 +43,47 @@
     }
 
     .loader {
+        position   : absolute;
         visibility : hidden;
         opacity    : 0;
-        height     : 0;
+        transition : var(--transition-fast);
+        left       : 50%;
+        top        : 0;
+        transform  : translate(-50%, -100%);
 
         &.loading {
-            opacity    : 1;
             visibility : visible;
-            height     : fit-content;
-            width      : fit-content;
+            opacity    : 1;
+            transform  : translate(-50%, 0);
+        }
+
+        &.bottom {
+            top       : 100%;
+            transform : translate(-50%, 0);
+
+            &.loading {
+                transform : translate(-50%, -100%);
+            }
         }
     }
 
+    .permanent {
+        width : 100%;
+    }
+
     &.top {
+        flex-direction : column;
+
         .scrollContainer,
         .scrollBar {
             flex-direction : column;
         }
     }
 
     &.scrollable {
-        .scrollContainer {
+        .scrollContainer,
+        .permanent,
+        .loader {
             padding-right : 12px;
         }