Merge branch 'next' into develop

This commit is contained in:
nocobase[bot] 2024-11-19 12:28:20 +00:00
commit 9756bad256
2 changed files with 47 additions and 27 deletions

View File

@ -13,6 +13,7 @@ import { Tabs as AntdTabs, TabPaneProps, TabsProps } from 'antd';
import classNames from 'classnames'; import classNames from 'classnames';
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import { useSchemaInitializerRender } from '../../../application'; import { useSchemaInitializerRender } from '../../../application';
import { withDynamicSchemaProps } from '../../../hoc/withDynamicSchemaProps';
import { Icon } from '../../../icon'; import { Icon } from '../../../icon';
import { DndContext, SortableItem } from '../../common'; import { DndContext, SortableItem } from '../../common';
import { SchemaComponent } from '../../core'; import { SchemaComponent } from '../../core';
@ -109,18 +110,27 @@ const designerCss = css`
} }
`; `;
Tabs.TabPane = observer( Tabs.TabPane = withDynamicSchemaProps(
(props: TabPaneProps & { icon?: any }) => { observer(
const Designer = useDesigner(); (props: TabPaneProps & { icon?: any; hidden?: boolean }) => {
const field = useField(); const Designer = useDesigner();
return ( const field = useField();
<SortableItem className={classNames('nb-action-link', designerCss, props.className)}>
{props.icon && <Icon style={{ marginRight: 2 }} type={props.icon} />} {props.tab || field.title} if (props.hidden) {
<Designer /> return null;
</SortableItem> }
);
}, return (
{ displayName: 'Tabs.TabPane' }, <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; Tabs.Designer = TabsDesigner;

View File

@ -16,14 +16,16 @@ import {
SortableItem, SortableItem,
Tabs as TabsOfPC, Tabs as TabsOfPC,
useBackButton, useBackButton,
useCompile,
useDesigner, useDesigner,
useSchemaInitializerRender, useSchemaInitializerRender,
useTabsContext, useTabsContext,
withDynamicSchemaProps,
} from '@nocobase/client'; } from '@nocobase/client';
import { Tabs } from 'antd-mobile'; import { Tabs } from 'antd-mobile';
import { LeftOutline } from 'antd-mobile-icons'; import { LeftOutline } from 'antd-mobile-icons';
import classNames from 'classnames'; 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 { MobilePageHeader } from '../../pages/dynamic-page';
import { MobilePageContentContainer } from '../../pages/dynamic-page/content/MobilePageContentContainer'; import { MobilePageContentContainer } from '../../pages/dynamic-page/content/MobilePageContentContainer';
import { useStyles } from '../../pages/dynamic-page/header/tabs'; import { useStyles } from '../../pages/dynamic-page/header/tabs';
@ -39,7 +41,6 @@ export const MobileTabsForMobileActionPage: any = observer(
const { styles } = useStyles(); const { styles } = useStyles();
const { styles: mobileTabsForMobileActionPageStyle } = useMobileTabsForMobileActionPageStyle(); const { styles: mobileTabsForMobileActionPageStyle } = useMobileTabsForMobileActionPageStyle();
const { goBack } = useBackButton(); const { goBack } = useBackButton();
const keyToTabRef = useRef({});
const onChange = useCallback( const onChange = useCallback(
(key) => { (key) => {
@ -55,7 +56,6 @@ export const MobileTabsForMobileActionPage: any = observer(
const items = useMemo(() => { const items = useMemo(() => {
const result = fieldSchema.mapProperties((schema, key) => { 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>; return <Tabs.Tab title={<RecursionField name={key} schema={schema} onlyRenderSelf />} key={key}></Tabs.Tab>;
}); });
@ -148,18 +148,28 @@ const designerCss = css`
} }
`; `;
MobileTabsForMobileActionPage.TabPane = observer( MobileTabsForMobileActionPage.TabPane = withDynamicSchemaProps(
(props: any) => { observer(
const Designer = useDesigner(); (props: any) => {
const field = useField(); const Designer = useDesigner();
return ( const field = useField();
<SortableItem className={classNames('nb-action-link', designerCss, props.className)}> const compile = useCompile();
{props.icon && <Icon style={{ marginRight: 2 }} type={props.icon} />} {props.tab || field.title}
<Designer /> if (props.hidden) {
</SortableItem> return null;
); }
},
{ displayName: 'MobileTabsForMobileActionPage.TabPane' }, 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; MobileTabsForMobileActionPage.Designer = TabsOfPC.Designer;