Merge pull request #1152 from myfka/14621-fix-tabs-gradient

fix(tabs): fixed gradient on swiper edges
MegafonWebLab · Apr 17, 2023 · 91d36b7 · 91d36b7
2 parents f51175c + 650e9be
commit 91d36b7
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 51 deletions.
diff --git a/packages/ui-core/src/components/Tabs/Tabs.less b/packages/ui-core/src/components/Tabs/Tabs.less
@@ -20,22 +20,10 @@
     }
 
     &__swiper-wrapper {
-        display: flex;
-        width: 100%;
-    }
-
-    &__swiper {
-        .fontFamily();
-        .h5();
         position: relative;
 
-        display: inline-block;
+        display: flex;
         width: 100%;
-        padding: 4px;
-        border-radius: 12px;
-        overflow: hidden;
-
-        background-color: var(--spbSky0);
 
         &:before,
         &:after {
@@ -46,6 +34,7 @@
             z-index: 1;
 
             width: 64px;
+            border-radius: 0 12px 12px 0;
 
             background: linear-gradient(270deg, var(--stcBlack5) 0%, transparent 64%);
 
@@ -63,18 +52,32 @@
         }
     }
 
-    &__swiper_beginning {
+    &__swiper-wrapper_beginning {
         &:before {
             display: none;
         }
     }
 
-    &__swiper_end {
+    &__swiper-wrapper_end {
         &:after {
             display: none;
         }
     }
 
+    &__swiper {
+        .fontFamily();
+        .h5();
+        position: relative;
+
+        display: inline-block;
+        width: 100%;
+        padding: 4px;
+        border-radius: 12px;
+        overflow: hidden;
+
+        background-color: var(--spbSky0);
+    }
+
     &__slide {
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 

diff --git a/packages/ui-core/src/components/Tabs/Tabs.tsx b/packages/ui-core/src/components/Tabs/Tabs.tsx
@@ -238,35 +238,18 @@ const Tabs: React.FC<ITabsProps> = ({
         swiperInstance?.slideNext();
     }, [swiperInstance]);
 
-    const handleReachBeginning = React.useCallback(
-        (swiper: SwiperCore) => {
-            if (isBeginning === swiper.isBeginning) {
-                return;
-            }
-
-            setBeginning(swiper.isBeginning);
-        },
-        [isBeginning],
-    );
-
-    const handleReachEnd = React.useCallback(
-        (swiper: SwiperCore) => {
-            if (isEnd === swiper.isEnd) {
-                return;
-            }
+    const handleReachBeginning = React.useCallback(() => {
+        setBeginning(true);
+    }, []);
 
-            setEnd(swiper.isEnd);
-        },
-        [isEnd],
-    );
+    const handleReachEnd = React.useCallback(() => {
+        setEnd(true);
+    }, []);
 
-    const handleFromEdge = React.useCallback(
-        (swiper: SwiperCore) => {
-            isBeginning !== swiper.isBeginning && setBeginning(swiper.isBeginning);
-            isEnd !== swiper.isEnd && setEnd(swiper.isEnd);
-        },
-        [isBeginning, isEnd],
-    );
+    const handleFromEdge = React.useCallback((swiper: SwiperCore) => {
+        setBeginning(swiper.isBeginning);
+        setEnd(swiper.isEnd);
+    }, []);
 
     const addObserveEvent = React.useCallback(() => {
         const rootRefNode = rootRef.current;
@@ -449,7 +432,14 @@ const Tabs: React.FC<ITabsProps> = ({
                 className={cn('wrapper', [classes?.wrapper])}
             >
                 <div
-                    className={cn('swiper-wrapper', [classes?.swiperWrapper])}
+                    className={cn(
+                        'swiper-wrapper',
+                        {
+                            beginning: isBeginning,
+                            end: isEnd,
+                        },
+                        [classes?.swiperWrapper],
+                    )}
                     style={{
                         paddingLeft: stickyOffset.left,
                         paddingRight: stickyOffset.right,
@@ -459,14 +449,7 @@ const Tabs: React.FC<ITabsProps> = ({
                     <Swiper
                         {...filterDataAttrs(dataAttrs?.slider)}
                         simulateTouch={false}
-                        className={cn(
-                            'swiper',
-                            {
-                                beginning: isBeginning,
-                                end: isEnd,
-                            },
-                            [classes?.innerIndents],
-                        )}
+                        className={cn('swiper', [classes?.innerIndents])}
                         watchOverflow
                         slidesPerView="auto"
                         initialSlide={currentIndex}