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

perf(MobilePageContentContainer): improve style performance

Browse Source
This commit is contained in:
Zeke Zhang 2024-10-30 15:49:44 +08:00
parent 58ed5229c1
commit f3d7795a1e
2 changed files with 3 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/content/MobilePageContentContainer.tsx
View File

@ -9,10 +9,8 @@
import _ from 'lodash'; import _ from 'lodash';
import React, { FC, useEffect } from 'react'; import React, { FC, useEffect } from 'react';
import { useStyles } from './styles';
export const MobilePageContentContainer: FC<{ hideTabBar?: boolean }> = ({ children, hideTabBar }) => { export const MobilePageContentContainer: FC<{ hideTabBar?: boolean }> = ({ children, hideTabBar }) => {
const { styles } = useStyles();
const [mobileTabBarHeight, setMobileTabBarHeight] = React.useState(0); const [mobileTabBarHeight, setMobileTabBarHeight] = React.useState(0);
const [mobilePageHeader, setMobilePageHeader] = React.useState(0); const [mobilePageHeader, setMobilePageHeader] = React.useState(0);
useEffect(() => { useEffect(() => {
@ -29,11 +27,13 @@ export const MobilePageContentContainer: FC<{ hideTabBar?: boolean }> = ({ child
<> <>
{mobilePageHeader ? <div style={{ height: mobilePageHeader }}></div> : null} {mobilePageHeader ? <div style={{ height: mobilePageHeader }}></div> : null}
<div <div
className={`${styles.mobilePageContent} mobile-page-content`} className="mobile-page-content"
data-testid="mobile-page-content" data-testid="mobile-page-content"
style={{ style={{
height: `calc(100% - ${(mobileTabBarHeight || 0) + (mobilePageHeader || 0)}px)`, height: `calc(100% - ${(mobileTabBarHeight || 0) + (mobilePageHeader || 0)}px)`,
boxSizing: 'border-box', boxSizing: 'border-box',
maxWidth: '100%',
overflowX: 'hidden',
}} }}
> >
{children} {children}

17
packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/content/styles.ts
View File

@ -1,17 +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 'antd-style';
export const useStyles = createStyles(() => ({
mobilePageContent: {
maxWidth: '100%',
overflowX: 'hidden',
},
}));