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

fix(GridCard): ensure single column display in mobile

Browse Source
This commit is contained in:
Zeke Zhang 2024-07-28 17:42:21 +08:00
parent 03bd88f919
commit 5828439050
3 changed files with 56 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/ResetSchemaOptionsProvider.tsx Normal file
View File

@ -0,0 +1,25 @@
/**
* 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 { SchemaComponentOptions, useSchemaOptionsContext } from '@nocobase/client';
import React, { FC, useMemo } from 'react';
import { useGridCardBlockDecoratorProps } from './useGridCardBlockDecoratorProps';
/* 使用移动端专属的 scope 覆盖桌面端的 scope，用于在移动端适配桌面端区块 */
export const ResetSchemaOptionsProvider: FC = (props) => {
const { scope: desktopScopes } = useSchemaOptionsContext();
const scopes = useMemo(
() => ({
useGridCardBlockDecoratorProps: (props) =>
useGridCardBlockDecoratorProps(props, desktopScopes?.useGridCardBlockDecoratorProps),
}),
[desktopScopes?.useGridCardBlockDecoratorProps],
);
return <SchemaComponentOptions scope={scopes}>{props.children}</SchemaComponentOptions>;
};

27
packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/useGridCardBlockDecoratorProps.tsx Normal file
View File

@ -0,0 +1,27 @@
/**
* 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.
*/
/**
* 用于设置 Grid Card 区块的 props，使其样式适配移动端；
* @param oldUseGridCardBlockDecoratorProps
*/
export const useGridCardBlockDecoratorProps = (props, useGridCardBlockDecoratorPropsOfDesktop: any) => {
const oldProps = useGridCardBlockDecoratorPropsOfDesktop(props);
return {
...oldProps,
// 在移动端中，无论是什么屏幕尺寸，都只显示一列
columnCount: {
lg: 1,
md: 1,
xs: 1,
xxl: 1,
},
};
};

5
packages/plugins/@nocobase/plugin-mobile/src/client/mobile/Mobile.tsx
View File

@ -19,6 +19,7 @@ import React from 'react';
import { isDesktop } from 'react-device-detect';
import { usedToResetFilterActionForMobile } from '../adaptor-of-desktop/FilterAction';
import { ResetSchemaOptionsProvider } from '../adaptor-of-desktop/ResetSchemaOptionsProvider';
import { PageBackgroundColor } from '../constants';
import { DesktopMode } from '../desktop-mode/DesktopMode';
import { PluginMobileClient } from '../index';
@ -78,7 +79,9 @@ export const Mobile = () => {
>
<BlockTemplateProvider componentNamePrefix="mobile-">
<MobileAppProvider>
<MobileRouter />
<ResetSchemaOptionsProvider>
<MobileRouter />
</ResetSchemaOptionsProvider>
</MobileAppProvider>
</BlockTemplateProvider>
</OpenModeProvider>