TabView: add end element to tab item

swan-io · Jan 27, 2025 · 3d2bf5b · 3d2bf5b
1 parent cf3376b
commit 3d2bf5b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/packages/lake/__stories__/TabView.stories.tsx b/packages/lake/__stories__/TabView.stories.tsx
@@ -1,5 +1,6 @@
 import { Meta } from "@storybook/react";
 import { TabView } from "../src/components/TabView";
+import { Tag } from "../src/components/Tag";
 import { StoryBlock } from "./_StoriesComponents";
 
 export default {
@@ -20,6 +21,15 @@ export const Default = () => {
             url: "/simulator/sct",
             count: 2,
           },
+          {
+            label: "Physical card",
+            url: "/simulator/endElement",
+            endElement: (
+              <Tag size="small" color="shakespear">
+                Expiring soon
+              </Tag>
+            ),
+          },
           {
             label: "SEPA Direct Debits",
             url: "/simulator/sdd",

diff --git a/packages/lake/src/components/TabView.tsx b/packages/lake/src/components/TabView.tsx
@@ -52,6 +52,7 @@ export const tabsViewHeight = TABS_HEIGHT + 1;
 type Tab = ({ id: string } | { url: string }) & {
   count?: number;
   icon?: IconName;
+  endElement?: ReactNode;
   label: string;
   withSeparator?: boolean;
 };
@@ -691,7 +692,7 @@ export const TabView = ({
     >
       <View style={styles.placeholder} aria-hidden={true} ref={placeholderRef} onLayout={onLayout}>
         {tabs.map(tab => {
-          const { label, icon, count } = tab;
+          const { label, icon, count, endElement } = tab;
           const tabId = getTabId(tab);
 
           return (
@@ -719,6 +720,13 @@ export const TabView = ({
 
                 <Text>{label}</Text>
 
+                {isNotNullish(endElement) && (
+                  <>
+                    <Space width={8} />
+                    {endElement}
+                  </>
+                )}
+
                 {count != null ? (
                   <>
                     <Space width={8} />
@@ -742,7 +750,7 @@ export const TabView = ({
       </View>
 
       {kept.map(tab => {
-        const { label, icon, withSeparator, count } = tab;
+        const { label, icon, withSeparator, count, endElement } = tab;
         const tabId = getTabId(tab);
 
         return (
@@ -773,6 +781,13 @@ export const TabView = ({
 
               <Text>{label}</Text>
 
+              {isNotNullish(endElement) && (
+                <>
+                  <Space width={8} />
+                  {endElement}
+                </>
+              )}
+
               {count != null ? (
                 <>
                   <Space width={8} />