chore: amend form tab extra props

opencrvs · Dec 10, 2024 · 2db4f53 · 2db4f53
1 parent f0d3696
commit 2db4f53
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 27 deletions.
diff --git a/packages/client/src/views/SearchResult/AdvancedSearch.tsx b/packages/client/src/views/SearchResult/AdvancedSearch.tsx
@@ -18,7 +18,7 @@ import { IStoreState } from '@client/store'
 import { SysAdminContentWrapper } from '@client/views/SysAdmin/SysAdminContentWrapper'
 import { messages } from '@client/i18n/messages/views/config'
 
-import { Content, ContentSize, FormTabs, IFormTabs } from '@opencrvs/components'
+import { Content, ContentSize, FormTabs } from '@opencrvs/components'
 import { FormFieldGenerator } from '@client/components/form/FormFieldGenerator'
 import { Button } from '@opencrvs/components/lib/Button'
 import { Icon } from '@opencrvs/components/lib/Icon'
@@ -488,7 +488,7 @@ const AdvancedSearch = () => {
     hasBirthSearchScopes() ? TabId.BIRTH : TabId.DEATH
   )
   const dispatch = useDispatch()
-  const tabSections: IFormTabs<TabId>[] = [
+  const tabSections = [
     {
       id: TabId.BIRTH,
       title: intl.formatMessage(messages.birthTabTitle),
@@ -500,6 +500,11 @@ const AdvancedSearch = () => {
       showTab: hasDeathSearchScopes()
     }
   ]
+
+  const filteredTabSections = tabSections
+    .filter((section) => section.showTab)
+    .map((sec) => ({ id: sec.id, title: sec.title }))
+
   return (
     <>
       <SysAdminContentWrapper
@@ -512,7 +517,7 @@ const AdvancedSearch = () => {
           size={ContentSize.SMALL}
           tabBarContent={
             <FormTabs
-              sections={tabSections}
+              sections={filteredTabSections}
               activeTabId={activeTabId}
               onTabClick={(id: TabId) => {
                 setActiveTabId(id)

diff --git a/packages/components/src/FormTabs/FormTabs.tsx b/packages/components/src/FormTabs/FormTabs.tsx
@@ -21,7 +21,6 @@ export interface IFormTabs<T extends string | number = string> {
   disabled?: boolean
   icon?: React.ReactNode
   color?: ITabColor
-  showTab?: boolean
 }
 export interface IFormTabProps<T extends string | number = string> {
   sections: Array<IFormTabs<T>>
@@ -36,30 +35,24 @@ function FormTabsComponent<T extends string | number = string>({
 }: IFormTabProps<T>) {
   return (
     <Tabs>
-      {sections.map(({ title, id, disabled, icon, color, showTab = true }) => {
+      {sections.map(({ title, id, disabled, icon, color }) => {
         return (
-          showTab && (
-            <Tab
-              id={`tab_${id}`}
-              color={color}
-              onClick={() => onTabClick(id)}
-              key={id}
-              active={activeTabId === id}
-              disabled={disabled}
-              activeColor={color}
-            >
-              <Stack>
-                {icon}
-                <Text
-                  variant="bold14"
-                  element="span"
-                  color={color ?? 'primary'}
-                >
-                  {title}
-                </Text>
-              </Stack>
-            </Tab>
-          )
+          <Tab
+            id={`tab_${id}`}
+            color={color}
+            onClick={() => onTabClick(id)}
+            key={id}
+            active={activeTabId === id}
+            disabled={disabled}
+            activeColor={color}
+          >
+            <Stack>
+              {icon}
+              <Text variant="bold14" element="span" color={color ?? 'primary'}>
+                {title}
+              </Text>
+            </Stack>
+          </Tab>
         )
       })}
     </Tabs>