scrolling fixed for buttons

libs/remix-ui/home-tab/src/lib/components/customButtonGroupAsArrows.tsx

@@ -1,14 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import React from 'react'
-
-function CustomButtonGroupAsArrows ({ next, previous }) {
-  return (
-    <div style={{ textAlign: "center" }}>
-      <h4>These buttons can be positioned anywhere you want on the screen</h4>
-      <button onClick={previous}>Prev</button>
-      <button onClick={next}>Next</button>
-    </div>
-  )
-}
-
-export default CustomButtonGroupAsArrows

libs/remix-ui/home-tab/src/lib/components/customNavButtons.tsx

@@ -1,8 +1,10 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React from 'react'
 
-const CustomNavButtons = ({ next, previous, goToSlide, ...rest }) => {
+const CustomNavButtons = ({ parent, next, previous, goToSlide, ...rest }) => {
-  const { carouselState: { currentSlide, totalItems, itemWidth, containerWidth } } = rest
+  const { carouselState: { currentSlide, totalItems, containerWidth, transform } } = rest
+  console.log("REST ", rest)
+  console.log("parent ", parent)
   return (
     <div className="mt-1 d-flex justify-content-end carousel-button-group">
       <button
@@ -14,11 +16,11 @@ const CustomNavButtons = ({ next, previous, goToSlide, ...rest }) => {
       </button>
       <button
         className={ 
-          ((totalItems - currentSlide) * itemWidth + 5) < containerWidth ? 'disable py-1 border btn' : 'py-1 border btn'}
+          (Math.abs(transform) >= parent?.current?.containerRef?.current?.scrollWidth - containerWidth) ? 'disable py-1 border btn' : 'py-1 border btn'}
         onClick={() => {
           if (currentSlide + 1 < totalItems) goToSlide(currentSlide + 1)
         }}
-        disabled ={((totalItems - currentSlide) * itemWidth + 5) < containerWidth}
+        disabled ={Math.abs(transform) >= parent?.current?.containerRef?.current?.scrollWidth - containerWidth}
       >
         <i className="fas fa-angle-right"></i>
       </button>

libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState, useRef, useContext } from 'react'
 import { ThemeContext, themes } from '../themeContext'
 import Carousel from 'react-multi-carousel'
 import 'react-multi-carousel/lib/styles.css'
-import CustomNavButtons from './customNavButtons'
+import CustomButtonGroupDots from './customButtonGroupDots'
 const _paq = window._paq = window._paq || [] // eslint-disable-line
 
 function HomeTabFeatured() {
@@ -14,6 +14,16 @@ function HomeTabFeatured() {
     }
   }, [])
 
+  const ButtonGroup = () => {
+    return (
+      <>
+        <button>One</button>
+        <button>Two</button>
+        <button>Three</button>
+      </>
+    );
+  };
+
   return (
     <div className="pt-3 pl-2" id="hTFeaturedeSection">
       <label style={{ fontSize: "1.2rem" }}>Featured</label>
@@ -21,7 +31,7 @@ function HomeTabFeatured() {
         <div className="w-100 d-flex flex-column" style={{ height: "200px" }}>
           <ThemeContext.Provider value={themeFilter}>
             <Carousel
-              customButtonGroup={<CustomNavButtons next={undefined} previous={undefined} goToSlide={undefined} />}
+              customButtonGroup={<CustomButtonGroupDots next={undefined} previous={undefined} goToSlide={undefined} />}
               arrows={false}
               swipeable={false}
               draggable={true}
@@ -31,6 +41,7 @@ function HomeTabFeatured() {
               ssr={true} // means to render carousel on server-side.
               infinite={true}
               centerMode={false}
+              partialVisible={false}
               autoPlay={true}
               keyBoardControl={true}
               containerClass="border carousel-container"

libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx

@@ -20,7 +20,7 @@ interface  HomeTabFeaturedPluginsProps {
 function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
 
   const themeFilter = useContext(ThemeContext)
-  const carouselRef = useRef(null)
+  const carouselRef = useRef<any>({})
   const carouselRefDiv = useRef(null)
 
   useEffect(() => {
@@ -46,8 +46,9 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
       e.stopPropagation()
       let nextSlide = 0
       if (e.wheelDelta < 0) {
+        console.log("scroll")
         nextSlide = carouselRef.current.state.currentSlide + 1;
-        if ((carouselRef.current.state.totalItems - carouselRef.current.state.currentSlide) * carouselRef.current.state.itemWidth + 5 < carouselRef.current.state.containerWidth) return // 5 is approx margins
+        if (Math.abs(carouselRef.current.state.transform) >= carouselRef.current.containerRef.current.scrollWidth - carouselRef.current.state.containerWidth) return
         carouselRef.current.goToSlide(nextSlide)
       } else {
         nextSlide = carouselRef.current.state.currentSlide - 1;
@@ -92,7 +93,7 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
             ref={carouselRef}
             focusOnSelect={true}
             customButtonGroup={
-              <CustomNavButtons next={undefined} previous={undefined} goToSlide={undefined} />
+              <CustomNavButtons next={undefined} previous={undefined} goToSlide={undefined} parent={carouselRef} />
             }
             arrows={false}
             swipeable={false}

libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx

@@ -17,7 +17,7 @@ interface  HomeTabGetStartedProps {
 
 function HomeTabGetStarted ({plugin}: HomeTabGetStartedProps) {
   const themeFilter = useContext(ThemeContext)
-  const carouselRef = useRef(null)
+  const carouselRef = useRef<any>({})
   const carouselRefDiv = useRef(null)
 
   useEffect(() => {
@@ -44,7 +44,7 @@ function HomeTabGetStarted ({plugin}: HomeTabGetStartedProps) {
       let nextSlide = 0
       if (e.wheelDelta < 0) {
         nextSlide = carouselRef.current.state.currentSlide + 1;
-        if ((carouselRef.current.state.totalItems - carouselRef.current.state.currentSlide) * carouselRef.current.state.itemWidth + 5 < carouselRef.current.state.containerWidth) return // 5 is approx margins
+        if (Math.abs(carouselRef.current.state.transform) >= carouselRef.current.containerRef.current.scrollWidth - carouselRef.current.state.containerWidth) return
         carouselRef.current.goToSlide(nextSlide)
       } else {
         nextSlide = carouselRef.current.state.currentSlide - 1;
@@ -77,7 +77,7 @@ function HomeTabGetStarted ({plugin}: HomeTabGetStartedProps) {
             ref={carouselRef}
             focusOnSelect={true}
             customButtonGroup={
-              <CustomNavButtons next={undefined} previous={undefined} goToSlide={undefined} />
+              <CustomNavButtons next={undefined} previous={undefined} goToSlide={undefined} parent={carouselRef} />
             }
             arrows={false}
             swipeable={false}

libs/remix-ui/home-tab/src/lib/components/homeTabTitle.tsx

@@ -157,7 +157,7 @@ function HomeTabTitle() {
           ref={searchInputRef}
           type="text"
           className="border form-control border-right-0"
-          id="searchInput"
+          id="homeTabSearchInput"
           placeholder="Search Documentation"
           data-id="terminalInputSearch"
         />