fix(scrolltoitem): scrollToItem accepts IOItem as an argument

#157
asmyshlyaev177 · Sep 11, 2021 · a5f5011 · a5f5011
1 parent 780ce5d
commit a5f5011
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 20 deletions.
diff --git a/example-nextjs/pages/index.tsx b/example-nextjs/pages/index.tsx
@@ -97,12 +97,7 @@ function App() {
 
       if (!itemSelected) {
         // NOTE: center item on select
-        scrollToItem(
-          getItemById(itemId)?.entry?.target,
-          'smooth',
-          'center',
-          'nearest'
-        );
+        scrollToItem(getItemById(itemId), 'smooth', 'center', 'nearest');
       }
     };
 
@@ -113,7 +108,7 @@ function App() {
       scrollToItem,
     }: scrollVisibilityApiType) => {
       // NOTE: scroll to item, auto/smooth for animation
-      // scrollToItem(getItemById('test15')?.entry?.target, 'auto');
+      // scrollToItem(getItemById('test15'), 'auto');
       // NOTE: or restore exact position by pixels
       // scrollContainer.current.scrollLeft = position;
     },
@@ -168,9 +163,9 @@ function App() {
 function LeftArrow() {
   const { initComplete, isFirstItemVisible, scrollPrev } =
     React.useContext(VisibilityContext);
-
   // NOTE initComplete is a hack for  prevent blinking on init
   // Can get visibility of item only after it's rendered
+
   return (
     <Arrow
       disabled={!initComplete || (initComplete && isFirstItemVisible)}

diff --git a/src/createApi.test.ts b/src/createApi.test.ts
@@ -2,6 +2,7 @@ import createApi from './createApi';
 import ItemsMap from './ItemsMap';
 import { observerEntriesToItems } from './helpers';
 import { observerOptions } from './settings';
+import { IOItem } from './types';
 
 const setup = (ratio = [0.3, 1, 0.7]) => {
   const items = new ItemsMap();
@@ -195,9 +196,11 @@ describe('createApi', () => {
     test('item exists', async () => {
       const { items, visibleItems } = setup([1, 1, 0.3]);
 
-      const item = document.createElement('div');
+      const item = {
+        entry: { target: document.createElement('div') },
+      } as unknown as IOItem;
       const scrollIntoView = jest.fn();
-      item.scrollIntoView = scrollIntoView;
+      item.entry.target.scrollIntoView = scrollIntoView;
 
       createApi(items, visibleItems).scrollToItem(item);
 
@@ -229,7 +232,7 @@ describe('createApi', () => {
       const { items, visibleItems } = setup([1, 1, 0.3]);
 
       expect(() =>
-        createApi(items, visibleItems).scrollToItem(null as unknown as Element)
+        createApi(items, visibleItems).scrollToItem(undefined)
       ).not.toThrow();
     });
   });

diff --git a/src/createApi.ts b/src/createApi.ts
@@ -33,15 +33,13 @@ export default function createApi(
     behavior: ScrollBehavior = 'smooth',
     inline: ScrollLogicalPosition = 'end',
     block: ScrollLogicalPosition = 'nearest'
-  ): void =>
-    scrollToItem(getPrevItem()?.entry?.target, behavior, inline, block);
+  ): void => scrollToItem(getPrevItem(), behavior, inline, block);
 
   const scrollNext = (
     behavior: ScrollBehavior = 'smooth',
     inline: ScrollLogicalPosition = 'start',
     block: ScrollLogicalPosition = 'nearest'
-  ): void =>
-    scrollToItem(getNextItem()?.entry?.target, behavior, inline, block);
+  ): void => scrollToItem(getNextItem(), behavior, inline, block);
 
   return {
     // centerVisibleItem,

diff --git a/src/helpers.test.tsx b/src/helpers.test.tsx
@@ -6,6 +6,7 @@ import {
   scrollToItem,
 } from './helpers';
 import { observerOptions } from './settings';
+import { IOItem } from './types';
 
 describe('getNodesFromRefs', () => {
   test('should return empty array if refs are null', () => {
@@ -99,7 +100,9 @@ describe('scrollToItem', () => {
     window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
     window.requestAnimationFrame = requestAnimationFrameMock;
 
-    const item = document.createElement('div');
+    const item = {
+      entry: { target: document.createElement('div') },
+    } as unknown as IOItem;
 
     scrollToItem(item);
 
@@ -117,7 +120,10 @@ describe('scrollToItem', () => {
     const requestAnimationFrameMock = jest.fn((fn) => fn?.());
     window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
     window.requestAnimationFrame = requestAnimationFrameMock;
-    const item = document.createElement('div');
+
+    const item = {
+      entry: { target: document.createElement('div') },
+    } as unknown as IOItem;
 
     scrollToItem(item, 'auto', 'center', 'end');
 

diff --git a/src/helpers.tsx b/src/helpers.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Refs, Item } from './types';
+import type { Refs, Item, IOItem } from './types';
 import { observerOptions } from './settings';
 
 export const getNodesFromRefs = (refs: Refs): HTMLElement[] => {
@@ -31,15 +31,18 @@ export function observerEntriesToItems(
   });
 }
 export function scrollToItem(
-  item?: Element,
+  // TODO: remove Element
+  _item?: IOItem | Element,
   behavior: ScrollBehavior = 'smooth',
   inline: ScrollLogicalPosition = 'end',
   block: ScrollLogicalPosition = 'nearest'
 ) {
+  const item = (_item as IOItem)?.entry?.target || _item;
+
   if (item) {
     window &&
       window.requestAnimationFrame(() =>
-        item.scrollIntoView({
+        item!.scrollIntoView({
           block,
           behavior,
           inline,