From 294f04ab546458bc79749b59e4510eaf3db9f056 Mon Sep 17 00:00:00 2001
From: Zeke Zhang <958414905@qq.com>
Date: Tue, 19 Nov 2024 20:25:12 +0800
Subject: [PATCH] chore(Tabs.TabPane): support hidden property (#5687)

---
 .../src/schema-component/antd/tabs/Tabs.tsx   | 34 ++++++++++------
 .../MobileTabsForMobileActionPage.tsx         | 40 ++++++++++++-------
 2 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/packages/core/client/src/schema-component/antd/tabs/Tabs.tsx b/packages/core/client/src/schema-component/antd/tabs/Tabs.tsx
index f7bd25ffc4..9784f55d2f 100644
--- a/packages/core/client/src/schema-component/antd/tabs/Tabs.tsx
+++ b/packages/core/client/src/schema-component/antd/tabs/Tabs.tsx
@@ -13,6 +13,7 @@ import { Tabs as AntdTabs, TabPaneProps, TabsProps } from 'antd';
 import classNames from 'classnames';
 import React, { useMemo } from 'react';
 import { useSchemaInitializerRender } from '../../../application';
+import { withDynamicSchemaProps } from '../../../hoc/withDynamicSchemaProps';
 import { Icon } from '../../../icon';
 import { DndContext, SortableItem } from '../../common';
 import { SchemaComponent } from '../../core';
@@ -109,18 +110,27 @@ const designerCss = css`
   }
 `;
 
-Tabs.TabPane = observer(
-  (props: TabPaneProps & { icon?: any }) => {
-    const Designer = useDesigner();
-    const field = useField();
-    return (
-      <SortableItem className={classNames('nb-action-link', designerCss, props.className)}>
-        {props.icon && <Icon style={{ marginRight: 2 }} type={props.icon} />} {props.tab || field.title}
-        <Designer />
-      </SortableItem>
-    );
-  },
-  { displayName: 'Tabs.TabPane' },
+Tabs.TabPane = withDynamicSchemaProps(
+  observer(
+    (props: TabPaneProps & { icon?: any; hidden?: boolean }) => {
+      const Designer = useDesigner();
+      const field = useField();
+
+      if (props.hidden) {
+        return null;
+      }
+
+      return (
+        <SortableItem className={classNames('nb-action-link', designerCss, props.className)}>
+          {props.icon && <Icon style={{ marginRight: 2 }} type={props.icon} />} {props.tab || field.title}
+          <Designer />
+        </SortableItem>
+      );
+    },
+    { displayName: 'Tabs.TabPane' },
+  ),
 );
 
+Tabs.TabPane.displayName = 'Tabs.TabPane';
+
 Tabs.Designer = TabsDesigner;
diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileTabsForMobileActionPage.tsx b/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileTabsForMobileActionPage.tsx
index ce6b10cbde..16f6e47760 100644
--- a/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileTabsForMobileActionPage.tsx
+++ b/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileTabsForMobileActionPage.tsx
@@ -16,14 +16,16 @@ import {
   SortableItem,
   Tabs as TabsOfPC,
   useBackButton,
+  useCompile,
   useDesigner,
   useSchemaInitializerRender,
   useTabsContext,
+  withDynamicSchemaProps,
 } from '@nocobase/client';
 import { Tabs } from 'antd-mobile';
 import { LeftOutline } from 'antd-mobile-icons';
 import classNames from 'classnames';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { MobilePageHeader } from '../../pages/dynamic-page';
 import { MobilePageContentContainer } from '../../pages/dynamic-page/content/MobilePageContentContainer';
 import { useStyles } from '../../pages/dynamic-page/header/tabs';
@@ -39,7 +41,6 @@ export const MobileTabsForMobileActionPage: any = observer(
     const { styles } = useStyles();
     const { styles: mobileTabsForMobileActionPageStyle } = useMobileTabsForMobileActionPageStyle();
     const { goBack } = useBackButton();
-    const keyToTabRef = useRef({});
 
     const onChange = useCallback(
       (key) => {
@@ -55,7 +56,6 @@ export const MobileTabsForMobileActionPage: any = observer(
 
     const items = useMemo(() => {
       const result = fieldSchema.mapProperties((schema, key) => {
-        keyToTabRef.current[key] = <SchemaComponent name={key} schema={schema} onlyRenderProperties distributed />;
         return <Tabs.Tab title={<RecursionField name={key} schema={schema} onlyRenderSelf />} key={key}></Tabs.Tab>;
       });
 
@@ -148,18 +148,28 @@ const designerCss = css`
   }
 `;
 
-MobileTabsForMobileActionPage.TabPane = observer(
-  (props: any) => {
-    const Designer = useDesigner();
-    const field = useField();
-    return (
-      <SortableItem className={classNames('nb-action-link', designerCss, props.className)}>
-        {props.icon && <Icon style={{ marginRight: 2 }} type={props.icon} />} {props.tab || field.title}
-        <Designer />
-      </SortableItem>
-    );
-  },
-  { displayName: 'MobileTabsForMobileActionPage.TabPane' },
+MobileTabsForMobileActionPage.TabPane = withDynamicSchemaProps(
+  observer(
+    (props: any) => {
+      const Designer = useDesigner();
+      const field = useField();
+      const compile = useCompile();
+
+      if (props.hidden) {
+        return null;
+      }
+
+      return (
+        <SortableItem className={classNames('nb-action-link', designerCss, props.className)}>
+          {props.icon && <Icon style={{ marginRight: 2 }} type={props.icon} />} {props.tab || compile(field.title)}
+          <Designer />
+        </SortableItem>
+      );
+    },
+    { displayName: 'MobileTabsForMobileActionPage.TabPane' },
+  ),
 );
 
+MobileTabsForMobileActionPage.displayName = 'MobileTabsForMobileActionPage';
+
 MobileTabsForMobileActionPage.Designer = TabsOfPC.Designer;