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

perf(MobileTabsForMobileActionPage): improve style performance

Browse Source
This commit is contained in:
Zeke Zhang 2024-10-30 15:33:18 +08:00
parent 0e7a85748f
commit 69c0af7745
4 changed files with 60 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileTabsForMobileActionPage.style.ts
View File

@ -1,46 +0,0 @@
/**
* This file is part of the NocoBase (R) project.
* Copyright (c) 2020-2024 NocoBase Co., Ltd.
* Authors: NocoBase Team.
*
* This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { createStyles } from '@nocobase/client';
export const useMobileTabsForMobileActionPageStyle = createStyles(({ css, token }: any) => {
return {
container: css`
cursor: pointer;
text-align: right;
flex: 1;
padding-right: var(--nb-mobile-page-tabs-content-padding);
.ant-btn {
width: 32px;
height: 32px;
padding: 0;
}
.ant-btn > span {
display: none;
}
span.ant-btn-icon {
display: inline-block;
font-size: 16px;
margin: 0 !important;
}
`,
backButton: css`
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
height: 50px;
width: 50px;
`,
};
});

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

@ -28,7 +28,6 @@ import { MobilePageHeader } from '../../pages/dynamic-page';
import { MobilePageContentContainer } from '../../pages/dynamic-page/content/MobilePageContentContainer';
import { useStyles } from '../../pages/dynamic-page/header/tabs';
import { hideDivider } from '../hideDivider';
import { useMobileTabsForMobileActionPageStyle } from './MobileTabsForMobileActionPage.style';
export const MobileTabsForMobileActionPage: any = observer(
(props) => {
@ -36,8 +35,7 @@ export const MobileTabsForMobileActionPage: any = observer(
const { render } = useSchemaInitializerRender(fieldSchema['x-initializer'], fieldSchema['x-initializer-props']);
const { activeKey: _activeKey, onChange: _onChange } = useTabsContext() || {};
const [activeKey, setActiveKey] = useState(_activeKey);
const { styles } = useStyles();
const { styles: mobileTabsForMobileActionPageStyle } = useMobileTabsForMobileActionPageStyle();
const { componentCls, hashId } = useStyles();
const { goBack } = useBackButton();
const keyToTabRef = useRef({});
@ -81,16 +79,16 @@ export const MobileTabsForMobileActionPage: any = observer(
return (
<>
<MobilePageHeader>
<div className={styles.mobilePageTabs} data-testid="mobile-action-page-tabs">
<div className={mobileTabsForMobileActionPageStyle.backButton} onClick={goBack}>
<div className={`${componentCls} ${hashId}`} data-testid="mobile-action-page-tabs">
<div className="nb-mobile-page-tabs-back-button" onClick={goBack}>
<LeftOutline />
</div>
<DndContext>
<Tabs activeKey={activeKey} onChange={onChange} className={styles.mobilePageTabsList}>
<Tabs activeKey={activeKey} onChange={onChange} className="nb-mobile-page-tabs-list">
{items}
</Tabs>
</DndContext>
<div className={mobileTabsForMobileActionPageStyle.container}>{render()}</div>
<div className="nb-mobile-page-tabs-button">{render()}</div>
</div>
</MobilePageHeader>
<MobilePageContentContainer hideTabBar>{tabContent}</MobilePageContentContainer>

6
packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/header/tabs/MobilePageTabs.tsx
View File

@ -23,7 +23,7 @@ export const MobilePageTabs: FC = () => {
const { displayTabs = false } = useMobilePage();
const navigate = useNavigate();
const { styles } = useStyles();
const { componentCls, hashId } = useStyles();
const { tabSchemaUid } = useParams<{ tabSchemaUid: string }>();
const [activeKey, setActiveKey] = React.useState<string>(() => {
return tabSchemaUid || activeTabBarItem?.children?.[0]?.schemaUid;
@ -52,9 +52,9 @@ export const MobilePageTabs: FC = () => {
if (!displayTabs) return null;
return (
<div className={styles.mobilePageTabs} data-testid="mobile-page-tabs">
<div className={`${componentCls} ${hashId}`} data-testid="mobile-page-tabs">
<DndContext onDragEnd={handleDragEnd}>
<Tabs activeKey={activeKey} onChange={handleChange} className={styles.mobilePageTabsList}>
<Tabs activeKey={activeKey} onChange={handleChange} className="nb-mobile-page-tabs-list">
{activeTabBarItem.children?.map((item) => (
<Tabs.Tab
data-testid={`mobile-page-tabs-${item.title}`}

68
packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/header/tabs/styles.ts
View File

@ -7,22 +7,58 @@
* 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(() => ({
mobilePageTabs: {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
},
mobilePageTabsList: {
'.adm-tabs-header': {
borderBottomWidth: 0,
},
export const useStyles = genStyleHook('nb-mobile-tabs-for-mobile-action-page', (token) => {
const { componentCls } = token;
return {
[componentCls]: {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
'.adm-tabs-tab': {
height: 49,
padding: '10px 0 10px',
'.nb-mobile-page-tabs-list': {
'.adm-tabs-header': {
borderBottomWidth: 0,
},
'.adm-tabs-tab': {
height: 49,
padding: '10px 0 10px',
},
},
'.nb-mobile-page-tabs-button': {
cursor: 'pointer',
textAlign: 'right',
flex: 1,
paddingRight: 'var(--nb-mobile-page-tabs-content-padding)',
'.ant-btn': {
width: 32,
height: 32,
padding: 0,
},
'.ant-btn > span': {
display: 'none',
},
'span.ant-btn-icon': {
display: 'inline-block',
fontSize: 16,
margin: '0 !important',
},
},
'.nb-mobile-page-tabs-back-button': {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: 24,
height: 50,
width: 50,
},
},
},
}));
};
});