@rovula/ui 0.0.52 → 0.0.53

package/src/components/Tabs/Tabs.tsx

@@ -1,11 +1,17 @@
 import React, { useState, useRef, useEffect } from "react";
 import { cn } from "@/utils/cn";
+import "./Tabs.css";
+import ActionButton from "../ActionButton/ActionButton";
+import Icon from "../Icon/Icon";
+import { Loading } from "@/index";
 
 type Tab = {
   label: string;
   startTabContent?: React.ReactElement;
   endTabContent?: React.ReactElement;
   content: React.ReactNode;
+  disabled?: boolean;
+  isLoading?: boolean;
 };
 
 type TabsProps = {
@@ -14,12 +20,22 @@ type TabsProps = {
   tabBarSize?: number;
   tabMode?: "start" | "justify";
   enableBorderLine?: boolean;
+  enableAddTabButton?: boolean;
+  keepIconSpace?: boolean;
   className?: string;
   tabBarClassName?: string;
+  tabBarContainerClassName?: string;
+  tabBarWrapperClassName?: string;
   tabButtonClassName?: string;
   tabButtonActiveClassName?: string;
   tabContentClassName?: string;
-  borderSliderClassname?: string;
+  addTabButtonWrapperClassName?: string;
+  borderSliderClassName?: string;
+  leftAction?: React.ReactNode;
+  rightAction?: React.ReactNode;
+  disabled?: boolean;
+  onAddTab?: () => void;
+  onTabChange?: (tabIndex: number) => void;
 };
 
 const Tabs: React.FC<TabsProps> = ({
@@ -27,13 +43,23 @@ const Tabs: React.FC<TabsProps> = ({
   initialTab = 0,
   tabBarSize = 38,
   enableBorderLine = true,
+  enableAddTabButton = false,
+  keepIconSpace = true,
+  disabled = false,
   tabMode = "start",
   className,
   tabBarClassName,
+  tabBarContainerClassName,
+  tabBarWrapperClassName,
   tabButtonClassName,
   tabButtonActiveClassName,
   tabContentClassName,
-  borderSliderClassname,
+  addTabButtonWrapperClassName,
+  borderSliderClassName,
+  leftAction,
+  rightAction,
+  onAddTab,
+  onTabChange,
 }) => {
   const [activeTab, setActiveTab] = useState(initialTab);
   const [sliderStyle, setSliderStyle] = useState({
@@ -76,66 +102,124 @@ const Tabs: React.FC<TabsProps> = ({
       updateSliderStyle();
     }
 
-    // const handleResize = () => {
-    //   updateSliderStyle();
-    // };
+    const handleResize = () => {
+      updateSliderStyle();
+    };
 
-    // window.addEventListener("resize", handleResize);
-    // return () => window.removeEventListener("resize", handleResize);
-  }, [activeTab, tabs, tabMode]);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [activeTab, tabs, tabMode, keepIconSpace]);
 
   return (
     <div className={cn("w-full", className)}>
       <div
-        className={cn(
-          `relative flex gap-6 h-[${tabBarSize}px] box-border`,
-          {
-            [`border-b-[1px] border-base-stroke`]: enableBorderLine,
-            "gap-0": tabMode === "justify",
-          },
-          tabBarClassName
-        )}
-        style={{
-          justifyContent: tabMode === "justify" ? "stretch" : tabMode,
-        }}
-        role="tablist"
+        className={cn(" relative flex flex-row w-full", {
+          [`border-b-[1px] border-base-stroke`]: enableBorderLine,
+          "border-state-disable-outline": disabled,
+          "flex-1": tabMode === "justify",
+          tabBarContainerClassName,
+        })}
       >
-        {tabs.map((tab, index) => (
-          <button
-            key={index}
-            ref={(el) => (tabRefs.current[index] = el)}
-            role="tab"
-            aria-selected={index === activeTab}
-            aria-controls={`tab-content-${index}`}
-            id={`tab-${index}`}
+        {leftAction}
+        <div
+          className={cn(
+            "relative flex flex-row  overflow-x-auto",
+            {
+              "flex-1": tabMode === "justify",
+            },
+            tabBarWrapperClassName
+          )}
+        >
+          <div
             className={cn(
-              "flex justify-center flex-row items-center py-4 px-1 cursor-pointer transition-colors duration-300 box-border gap-3",
+              "tabs-scrollbar overflow-x-auto w-full",
+              `relative flex gap-3 h-[${tabBarSize}px] box-border`,
               {
-                "typography-small3 text-text-dark": index === activeTab,
-                "typography-small1 text-text-grey-light hover:text-text-grey-dark active:text-text-dark":
-                  index !== activeTab,
-                [tabButtonClassName ?? ""]: true,
-                [tabButtonActiveClassName ?? ""]: index === activeTab,
-                "flex-1": tabMode === "justify",
-              }
+                "gap-0": tabMode === "justify",
+              },
+              tabBarClassName
             )}
-            onClick={() => setActiveTab(index)}
+            style={{
+              justifyContent: tabMode === "justify" ? "stretch" : tabMode,
+            }}
+            role="tablist"
           >
-            {tab.startTabContent}
-            {tab.label}
-            {tab.endTabContent}
-          </button>
-        ))}
-        <div
-          className={cn(
-            `absolute -bottom-[1px] h-[1px] bg-primary transition-all duration-300 ease-in-out`,
-            borderSliderClassname
-          )}
-          style={sliderStyle}
-        />
+            {tabs.map((tab, index) => (
+              <button
+                key={index}
+                ref={(el) => (tabRefs.current[index] = el)}
+                role="tab"
+                aria-selected={index === activeTab}
+                aria-controls={`tab-content-${index}`}
+                disabled={disabled || tab.disabled}
+                id={`tab-${index}`}
+                className={cn(
+                  "flex justify-center flex-row items-center py-3 cursor-pointer transition-colors duration-300 box-border gap-1 flex-shrink-0  typography-subtitile6",
+                  {
+                    "text-foreground": index === activeTab,
+                    "text-text-grey-medium hover:text-text-grey-dark active:text-text-dark":
+                      index !== activeTab,
+                    "text-state-disable-solid pointer-events-none":
+                      disabled || tab.disabled,
+                    "text-state-disable-outline":
+                      (index === activeTab && disabled) || tab.disabled,
+                    [tabButtonClassName ?? ""]: true,
+                    [tabButtonActiveClassName ?? ""]: index === activeTab,
+                    "flex-1": tabMode === "justify",
+                  }
+                )}
+                onClick={() => {
+                  setActiveTab(index);
+                  onTabChange?.(index);
+                }}
+              >
+                {(keepIconSpace || tab.startTabContent) && (
+                  <div className="h-full w-3 flex items-center justify-center">
+                    {tab.isLoading ? <Loading /> : tab.startTabContent}
+                  </div>
+                )}
+                {tab.label}
+                {(keepIconSpace || tab.endTabContent) && (
+                  <div className="h-full w-3 flex items-center justify-center">
+                    {tab.endTabContent}
+                  </div>
+                )}
+              </button>
+            ))}
+            <div
+              className={cn(
+                `absolute left-0 bottom-0 h-[2px]  rounded-full bg-foreground transition-all duration-300 ease-in-out`,
+                {
+                  "bg-state-disable-solid": disabled,
+                },
+                borderSliderClassName
+              )}
+              style={sliderStyle}
+            />
+          </div>
+        </div>
+        {enableAddTabButton && (
+          <div
+            className={cn(
+              "sticky right-0 flex content-center items-center mx-4",
+              addTabButtonWrapperClassName
+            )}
+          >
+            <ActionButton
+              variant="outline"
+              size="sm"
+              onClick={() => onAddTab?.()}
+              disabled={disabled}
+            >
+              <Icon name="plus" />
+            </ActionButton>
+          </div>
+        )}
+        {rightAction}
       </div>
+
       <div
-        className={cn("mt-4", tabContentClassName)}
+        className={cn("mt-4 text-foreground", tabContentClassName)}
         role="tabpanel"
         id={`tab-content-${activeTab}`}
         aria-labelledby={`tab-${activeTab}`}