test/nocobase2
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2024-12-02 04:07:50 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

chore(Tabs.TabPane): support hidden property (#5687)

Browse Source
This commit is contained in:
Zeke Zhang 2024-11-19 20:25:12 +08:00 committed by GitHub
parent 96380f020a
commit 294f04ab54
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 47 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
packages/core/client/src/schema-component/antd/tabs/Tabs.tsx
View File

@ -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;

40
packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileTabsForMobileActionPage.tsx
View File

@ -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;