From b80aaacb38a245206e3ef27da7eb44ce7341867a Mon Sep 17 00:00:00 2001 From: Dunqing Date: Wed, 21 Jun 2023 22:26:15 +0800 Subject: [PATCH] fix(mobile-client): fix multiple bugs and do some improvement (#2072) --- .../src/schema-component/antd/index.less | 4 +- .../src/schema-component/antd/tabs/Tabs.tsx | 27 ++-- .../schema-component/antd/tabs/context.tsx | 2 +- .../src/client/core/bridge/injects.ts | 11 +- .../core/schema/components/menu/Menu.Item.tsx | 20 +-- .../core/schema/components/menu/schema.ts | 6 +- .../core/schema/components/page/Page.tsx | 133 ++++++++++-------- .../src/client/router/Application.tsx | 1 + .../src/client/router/RouteSwitchProvider.tsx | 2 +- 9 files changed, 103 insertions(+), 103 deletions(-) diff --git a/packages/core/client/src/schema-component/antd/index.less b/packages/core/client/src/schema-component/antd/index.less index 33c59fee3..4e13ff4b9 100644 --- a/packages/core/client/src/schema-component/antd/index.less +++ b/packages/core/client/src/schema-component/antd/index.less @@ -42,7 +42,5 @@ } html body { - --adm-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, - Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, - Segoe UI Symbol; + --adm-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; } 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 7d08eabe9..64e0e7aec 100644 --- a/packages/core/client/src/schema-component/antd/tabs/Tabs.tsx +++ b/packages/core/client/src/schema-component/antd/tabs/Tabs.tsx @@ -2,45 +2,36 @@ import { css } from '@emotion/css'; import { observer, RecursionField, useField, useFieldSchema } from '@formily/react'; import { TabPaneProps, Tabs as AntdTabs, TabsProps } from 'antd'; import classNames from 'classnames'; -import React, { useMemo } from 'react'; +import React from 'react'; import { Icon } from '../../../icon'; import { useSchemaInitializer } from '../../../schema-initializer'; import { DndContext, SortableItem } from '../../common'; import { useDesigner } from '../../hooks/useDesigner'; -import { TabsContextProvider, useTabsContext } from './context'; +import { useTabsContext } from './context'; import { TabsDesigner } from './Tabs.Designer'; +import { useDesignable } from '../../hooks'; export const Tabs: any = observer( (props: TabsProps) => { const fieldSchema = useFieldSchema(); const { render } = useSchemaInitializer(fieldSchema['x-initializer']); + const { designable } = useDesignable(); const contextProps = useTabsContext(); - - const PaneProvider = useMemo(() => { - if (contextProps.deep === false) { - return TabsContextProvider; - } - return React.Fragment; - }, [contextProps.deep]); + const { PaneRoot = React.Fragment as React.FC } = contextProps; return ( - + {fieldSchema.mapProperties((schema, key) => { return ( } key={key}> - + - + ); })} + {designable && } ); diff --git a/packages/core/client/src/schema-component/antd/tabs/context.tsx b/packages/core/client/src/schema-component/antd/tabs/context.tsx index 24d05eddc..e11dddba7 100644 --- a/packages/core/client/src/schema-component/antd/tabs/context.tsx +++ b/packages/core/client/src/schema-component/antd/tabs/context.tsx @@ -2,7 +2,7 @@ import { TabsProps } from 'antd'; import React from 'react'; interface TabsContextProps extends TabsProps { - deep?: boolean; + PaneRoot?: React.FC; } const TabsContext = React.createContext({}); diff --git a/packages/plugins/mobile-client/src/client/core/bridge/injects.ts b/packages/plugins/mobile-client/src/client/core/bridge/injects.ts index e4024da6e..6b7a7d93c 100644 --- a/packages/plugins/mobile-client/src/client/core/bridge/injects.ts +++ b/packages/plugins/mobile-client/src/client/core/bridge/injects.ts @@ -3,12 +3,13 @@ interface InvokeFunction { (params: { action: 'moveTaskToBack' }, cb?: () => void): void; } -const JsBridge = (window as any).JsBridge as { - invoke: InvokeFunction; -}; +const getJsBridge = () => + (window as any).JsBridge as { + invoke: InvokeFunction; + }; export const invoke: InvokeFunction = (params, cb) => { - JsBridge.invoke(params, cb); + return getJsBridge().invoke(params, cb); }; -export const isJSBridge = !!JsBridge; +export const isJSBridge = () => !!getJsBridge(); diff --git a/packages/plugins/mobile-client/src/client/core/schema/components/menu/Menu.Item.tsx b/packages/plugins/mobile-client/src/client/core/schema/components/menu/Menu.Item.tsx index 87798d079..3b81173c4 100644 --- a/packages/plugins/mobile-client/src/client/core/schema/components/menu/Menu.Item.tsx +++ b/packages/plugins/mobile-client/src/client/core/schema/components/menu/Menu.Item.tsx @@ -6,6 +6,7 @@ import React from 'react'; import { useLocation, useNavigate, useParams } from 'react-router-dom'; import { useTranslation } from '../../../../locale'; import { useSchemaPatch } from '../../hooks'; +import { menuItemSchema } from './schema'; interface MMenuItemProps extends ListItemProps { name: string; @@ -56,24 +57,7 @@ const MenuItemDesigner: React.FC = () => { { // Only support globalActions in page const onlyInPage = fieldSchema.root === fieldSchema.parent; let hasGlobalActions = false; - if (!tabsSchema) { + if (!tabsSchema && fieldSchema.properties) { hasGlobalActions = countGridCol(fieldSchema.properties['grid'], 2) === 1; - } else if (searchParams.has('tab') && tabsSchema.properties?.[searchParams.get('tab')]) { + } else if (searchParams.has('tab') && tabsSchema?.properties?.[searchParams.get('tab')]) { hasGlobalActions = countGridCol(tabsSchema.properties[searchParams.get('tab')]?.properties?.['grid'], 2) === 1; - } else if (tabsSchema.properties) { + } else if (tabsSchema?.properties) { const schema = Object.values(tabsSchema.properties).sort((t1, t2) => t1['x-index'] - t2['x-index'])[0]; if (schema) { setTimeout(() => { - setSearchParams([['tab', schema.name.toString()]]); + setSearchParams([['tab', schema.name.toString()]], { + replace: true, + }); }); } } const onTabsChange = useCallback( (key) => { - setSearchParams([['tab', key]]); + setSearchParams([['tab', key]], { + replace: true, + }); }, [setSearchParams], ); - const GlobalActionProvider = useMemo(() => { - if (hasGlobalActions) { - return ActionBarProvider; - } - return (props) => <>{props.children}; - }, [hasGlobalActions]); + const GlobalActionProvider = useCallback( + (props) => { + if (hasGlobalActions) { + return ( + + + {props.children} + + + ); + } + return <>{props.children}; + }, + [hasGlobalActions, onlyInPage], + ); return ( - - +
.ant-tabs > .ant-tabs-nav { + .ant-tabs-tab { + margin: 0 !important; + padding: 0 16px !important; + } + background: #fff; + } display: flex; flex-direction: column; - width: 100%; - height: 100%; - overflow-x: hidden; - overflow-y: auto; - padding-bottom: var(--nb-spacing); `, )} > - -
{ + return 'MHeader' === s['x-component']; }} - className={cx( - 'nb-mobile-page-header', - css` - & > .ant-tabs > .ant-tabs-nav { - background: #fff; - padding: 0 var(--nb-spacing); - } - display: flex; - flex-direction: column; - `, - )} + > + { - return 'MHeader' === s['x-component']; + return 'Tabs' === s['x-component']; }} > - - { - return 'Tabs' === s['x-component']; - }} - > - -
- + +
+ {!tabsSchema && ( { }} > )} - - + + ); }; diff --git a/packages/plugins/mobile-client/src/client/router/Application.tsx b/packages/plugins/mobile-client/src/client/router/Application.tsx index 8af646b32..6f74f7710 100644 --- a/packages/plugins/mobile-client/src/client/router/Application.tsx +++ b/packages/plugins/mobile-client/src/client/router/Application.tsx @@ -115,6 +115,7 @@ const MApplication: React.FC = (props) => { {props.children} )} + {/* Global action will insert here */}
diff --git a/packages/plugins/mobile-client/src/client/router/RouteSwitchProvider.tsx b/packages/plugins/mobile-client/src/client/router/RouteSwitchProvider.tsx index 19bfcc2c0..12e432dc1 100644 --- a/packages/plugins/mobile-client/src/client/router/RouteSwitchProvider.tsx +++ b/packages/plugins/mobile-client/src/client/router/RouteSwitchProvider.tsx @@ -10,7 +10,7 @@ export const RouterSwitchProvider = (props) => { const location = useLocation(); const navigate = useNavigate(); useEffect(() => { - if (isJSBridge) { + if (isJSBridge()) { if (location.pathname.includes('/admin')) { navigate('/mobile'); }