Merge pull request #291 from sima-land/290-product-carousel-margin

#290 ProductCarousel: добавить возможность регулировать отступы зоны загрузки

src/desktop/components/product-carousel/product-carousel.tsx

@@ -22,6 +22,10 @@ const getSizeClasses = (size: ProductCarouselProps['itemSize']) =>
       ]
     : [];
 
+const defaultNeedRequestOptions: IntersectionObserverInit = {
+  rootMargin: '200px 0px 200px 0px',
+};
+
 /**
  * Карусель рекомендованных товаров.
  * @param props Свойства.
@@ -37,6 +41,7 @@ export function ProductCarousel({
   children,
   controlProps,
   itemImageRatio = 1,
+  needRequestOptions = defaultNeedRequestOptions,
 }: ProductCarouselProps) {
   const layer = useLayer();
   const needBigArrows = useMedia('(min-width: 1600px)');
@@ -54,7 +59,15 @@ export function ProductCarousel({
   const itemWidth = useClientWidth(firstItemRef, [items.length]);
 
   // инициируем загрузку данных, когда компонент почти попал в зону видимости
-  const options = useMemo(() => ({ rootMargin: '200px 0px 200px 0px' }), []);
+  const { root, rootMargin, threshold } = needRequestOptions;
+  const options = useMemo<IntersectionObserverInit>(
+    () => ({
+      root,
+      rootMargin,
+      threshold,
+    }),
+    [root, rootMargin, threshold],
+  );
   useIntersection(
     rootRef,
     entry => {

src/desktop/components/product-carousel/types.ts

@@ -25,6 +25,9 @@ export interface ProductCarouselProps {
   /** Сработает при попадании карусели в область достаточно близкую к viewport'у. */
   onNeedRequest?: () => void;
 
+  /** Опции области, которая вызовет onNeedRequest. */
+  needRequestOptions?: IntersectionObserverInit;
+
   /** Предоставит свойства для элемента карусели. */
   itemProps?: { style?: CSSProperties; className?: string };