dissalow closing pinned tabs

Author: layerok

src/components/Tabs/Tab.tsx

@@ -4,11 +4,18 @@ import { MouseEventHandler } from "react";
 
 export function Tab(props: {
   tab: TabModel;
+  isPinned: boolean;
   isActive: boolean;
   onClose?: (tab: TabModel) => void;
   onActiveTabIdChange?: (id: string | undefined) => void;
 }) {
-  const { tab, isActive, onClose = noop, onActiveTabIdChange = noop } = props;
+  const {
+    tab,
+    isActive,
+    onClose = noop,
+    onActiveTabIdChange = noop,
+    isPinned,
+  } = props;
 
   const className = ["tab", isActive && "active"].filter(Boolean).join(" ");
 
@@ -24,9 +31,12 @@ export function Tab(props: {
       className={className}
     >
       {tab.title}
-      <span className={"close-trigger"} onClick={handleClose}>
-        x
-      </span>
+
+      {!isPinned && (
+        <span className={"close-trigger"} onClick={handleClose}>
+          x
+        </span>
+      )}
     </div>
   );
 }

src/components/Tabs/Tabs.tsx

@@ -46,7 +46,7 @@ export function Tabs(props: TabsProps) {
     onActiveTabIdChange = noop,
     apiRef,
     activeTabId: activeTabIdProp,
-    startPinnedTabs,
+    startPinnedTabs: startPinnedTabsProp,
     hasControlledActiveTabId,
     tabs: tabsProp,
     onTabsChange,
@@ -108,7 +108,7 @@ export function Tabs(props: TabsProps) {
 
   const closeTab = useCallback(
     (tab: TabModel) => {
-      const { tabs, activeTabId: prevActiveId } = getState();
+      const { tabs, activeTabId: prevActiveId, startPinnedTabs } = getState();
 
       const prevActiveTab = tabs.find((tab) => tab.id === prevActiveId);
       const activeTab =
@@ -119,6 +119,7 @@ export function Tabs(props: TabsProps) {
       setState({
         tabs: updatedTabs,
         activeTabId: activeTab?.id,
+        startPinnedTabs: startPinnedTabs.filter((id) => id !== tab.id),
       });
 
       forceRerender();
@@ -171,7 +172,7 @@ export function Tabs(props: TabsProps) {
     getState,
   }));
 
-  const { tabs, activeTabId } = getState();
+  const { tabs, activeTabId, startPinnedTabs } = getState();
 
   const activeTab = tabs.find((tab) => tab.id === activeTabId);
 
@@ -188,17 +189,18 @@ export function Tabs(props: TabsProps) {
   }, [tabsProp, setTabs]);
 
   useEffect(() => {
-    if (startPinnedTabs) {
-      setStartPinnedTabs(startPinnedTabs, false);
+    if (startPinnedTabsProp) {
+      setStartPinnedTabs(startPinnedTabsProp, false);
     }
-  }, [startPinnedTabs, setStartPinnedTabs]);
+  }, [startPinnedTabsProp, setStartPinnedTabs]);
 
   return (
     <div className="tabs">
       {tabs.map((tab) => (
         <Tab
           onActiveTabIdChange={onActiveTabIdChange}
           onClose={closeTab}
+          isPinned={startPinnedTabs.includes(tab.id)}
           isActive={activeTab?.id === tab.id}
           tab={tab}
           key={tab.id}

src/routes/CategoriesRoute.tsx

@@ -87,6 +87,7 @@ export function CategoriesRoute() {
         activeTabId={activeTabId}
         onActiveTabIdChange={setActiveTabId}
         tabs={tabs}
+        startPinnedTabs={startPinnedTabs}
         onTabsChange={setTabs}
         hasControlledActiveTabId
         onStartPinnedTabsChange={setStartPinnedTabsChange}