mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-16 02:25:14 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf(MobilePageNavigationBar): improve style performance

Browse Source
This commit is contained in:
Zeke Zhang 2024-10-30 15:57:05 +08:00
parent d94fdb65c0
commit d77e3f6798
2 changed files with 27 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/header/navigation-bar/MobilePageNavigationBar.tsx
View File

@ -7,27 +7,25 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import React, { FC } from 'react';
import { NavBar } from 'antd-mobile';
import { RecursionField, useFieldSchema } from '@formily/react';
import { cx, SchemaToolbarProvider } from '@nocobase/client';
import { NavBar } from 'antd-mobile';
import React, { FC } from 'react';
import { useMobilePage } from '../../context';
import { useMobileTitle } from '../../../../mobile-providers';
import { useMobilePage } from '../../context';
import { useStyles } from './styles';
export const MobilePageNavigationBar: FC = () => {
const { title } = useMobileTitle();
const { displayNavigationBar = true, displayPageTitle = true } = useMobilePage();
const fieldSchema = useFieldSchema();
const { styles } = useStyles();
const { componentCls, hashId } = useStyles();
if (!displayNavigationBar) return null;
return (
<div
className={cx('mobile-page-navigation-bar', styles.mobilePageNavigationBar)}
data-testid="mobile-page-navigation-bar"
>
<div className={cx('mobile-page-navigation-bar', componentCls, hashId)} data-testid="mobile-page-navigation-bar">
<NavBar
backArrow={false}
back={null}

39
packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/header/navigation-bar/styles.ts
View File

@ -7,25 +7,28 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { createStyles } from 'antd-style';
import { genStyleHook } from '@nocobase/client';
export const useStyles = createStyles(() => ({
mobilePageNavigationBar: {
'.adm-nav-bar': {
maxWidth: '100%',
height: 49,
overflow: 'hidden',
export const useStyles = genStyleHook('nb-mobile-page-navigation-bar', (token) => {
const { componentCls } = token;
return {
[componentCls]: {
'.adm-nav-bar': {
maxWidth: '100%',
height: 49,
overflow: 'hidden',
'.adm-nav-bar-left': {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
},
'.adm-nav-bar-right': {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
'.adm-nav-bar-left': {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
},
'.adm-nav-bar-right': {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
},
},
},
},
}));
};
});