rename hook

Author: camiloHimura

web_ui/src/shared/components/media-items-list/media-items-list.component.tsx

@@ -16,7 +16,7 @@ import {
 } from 'react-aria-components';
 
 import { VIEW_MODE_SETTINGS, ViewModes } from '../media-view-modes/utils';
-import { useScrollToTargetItem } from './use-scroll-to-target-item.hook';
+import { useGetTargetPosition } from './use-get-target-position.hook';
 
 import classes from './media-items-list.module.scss';
 
@@ -69,7 +69,7 @@ export const MediaItemsList = <T extends object>({
 
     const container = ref?.current?.firstElementChild;
 
-    useScrollToTargetItem({
+    useGetTargetPosition({
         gap: config.gap,
         container,
         targetIndex: scrollToIndex,

web_ui/src/shared/components/media-items-list/use-scroll-to-target-item.hook.test.tsx renamed to web_ui/src/shared/components/media-items-list/use-get-target-position.hook.test.tsx

@@ -3,9 +3,9 @@
 
 import { renderHook } from '@testing-library/react';
 
-import { useScrollToTargetItem } from './use-scroll-to-target-item.hook';
+import { useGetTargetPosition } from './use-get-target-position.hook';
 
-describe('useScrollToTargetItem', () => {
+describe('useGetTargetPosition', () => {
     const mockCallback = jest.fn();
 
     beforeEach(() => {
@@ -20,7 +20,7 @@ describe('useScrollToTargetItem', () => {
 
     it('should not call callback when container is not provided', () => {
         renderHook(() =>
-            useScrollToTargetItem({
+            useGetTargetPosition({
                 gap: 10,
                 container: null,
                 targetIndex: 5,
@@ -54,7 +54,7 @@ describe('useScrollToTargetItem', () => {
         const expectedScrollPos = (childHeight + gap) * targetRow; // 600
 
         renderHook(() =>
-            useScrollToTargetItem({
+            useGetTargetPosition({
                 gap,
                 container,
                 targetIndex,
@@ -72,7 +72,7 @@ describe('useScrollToTargetItem', () => {
         Object.defineProperty(container, 'clientWidth', { value: 1000 });
 
         renderHook(() =>
-            useScrollToTargetItem({
+            useGetTargetPosition({
                 gap: 10,
                 container,
                 targetIndex: 5,
@@ -88,7 +88,7 @@ describe('useScrollToTargetItem', () => {
     describe('should not call callback with invalid index', () => {
         it.each([undefined, null, -1, 1.5, NaN])('targetIndex: %p', (invalidIndex) => {
             renderHook(() =>
-                useScrollToTargetItem({
+                useGetTargetPosition({
                     gap: 10,
                     container: document.createElement('div'),
                     targetIndex: invalidIndex as number,

web_ui/src/shared/components/media-items-list/use-scroll-to-target-item.hook.tsx renamed to web_ui/src/shared/components/media-items-list/use-get-target-position.hook.tsx

@@ -5,23 +5,25 @@ import { DependencyList, useEffect } from 'react';
 
 import { isNil } from 'lodash-es';
 
-interface useScrollToTargetItemProps {
+interface useGetTargetPositionProps {
     gap: number;
-    dependencies?: DependencyList;
+    delay?: number;
     container?: Element | null;
     targetIndex?: number;
+    dependencies?: DependencyList;
     callback: (scrollTo: number) => void;
 }
 
 const isValidIndex = (index?: number): index is number => !isNil(index) && Number.isInteger(index) && index >= 0;
 
-export const useScrollToTargetItem = ({
+export const useGetTargetPosition = ({
     gap,
+    delay = 500,
     container,
     targetIndex,
     dependencies = [],
     callback,
-}: useScrollToTargetItemProps) => {
+}: useGetTargetPositionProps) => {
     useEffect(() => {
         const timeoutId = setTimeout(() => {
             if (!container || !isValidIndex(targetIndex)) {
@@ -31,14 +33,14 @@ export const useScrollToTargetItem = ({
             const containerWidth = container.clientWidth;
             const childrenWidth = container.firstElementChild?.clientWidth ?? 1;
             const childrenHeight = container.firstElementChild?.clientHeight ?? 1;
-            const childrenPreRow = Math.floor(containerWidth / childrenWidth);
-            const targetRow = Math.floor(targetIndex / childrenPreRow);
+            const childrenPerRow = Math.floor(containerWidth / childrenWidth);
+            const targetRow = Math.floor(targetIndex / childrenPerRow);
             const scrollTo = (childrenHeight + gap) * targetRow;
 
             callback(scrollTo);
             // we don't want to scroll immediately
             // in case of changed view mode we have to scroll once view is rendered
-        }, 500);
+        }, delay);
 
         return () => {
             timeoutId && clearTimeout(timeoutId);