From 9e5355cbed7880e84b04eee4c8c4361c84183d3b Mon Sep 17 00:00:00 2001 From: Zeke Zhang <958414905@qq.com> Date: Wed, 30 Oct 2024 11:06:29 +0800 Subject: [PATCH] fix(mobile): fix the issue of preview images being covered by page (#5535) * refactor(mobile): replace mobile BasicZIndexProvider with zIndexContext from core library * fix(mobile): fix the issue of preview images being covered by page --- .../schema-component/antd/action/index.tsx | 3 +- .../src/client/__e2e__/templates.ts | 1065 +++++++++++++++++ .../src/client/__e2e__/zIndex.test.ts | 72 ++ .../adaptor-of-desktop/ActionDrawer.tsx | 12 +- .../BasicZIndexProvider.tsx | 33 - .../adaptor-of-desktop/FilterAction.tsx | 12 +- .../InternalPopoverNester.tsx | 11 +- .../mobile-action-page/MobileActionPage.tsx | 12 +- .../src/client/adaptor-of-desktop/zIndex.ts | 11 + .../src/client/mobile/Mobile.tsx | 6 +- 10 files changed, 1178 insertions(+), 59 deletions(-) create mode 100644 packages/plugins/@nocobase/plugin-mobile/src/client/__e2e__/templates.ts create mode 100644 packages/plugins/@nocobase/plugin-mobile/src/client/__e2e__/zIndex.test.ts delete mode 100644 packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/BasicZIndexProvider.tsx create mode 100644 packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/zIndex.ts diff --git a/packages/core/client/src/schema-component/antd/action/index.tsx b/packages/core/client/src/schema-component/antd/action/index.tsx index 22db0e3b3..80766dbb6 100644 --- a/packages/core/client/src/schema-component/antd/action/index.tsx +++ b/packages/core/client/src/schema-component/antd/action/index.tsx @@ -8,6 +8,7 @@ */ export * from './Action'; +export * from './Action.Designer'; export * from './ActionBar'; export * from './context'; export * from './hooks'; @@ -15,5 +16,5 @@ export * from './hooks/useGetAriaLabelOfAction'; export * from './hooks/useGetAriaLabelOfDrawer'; export * from './hooks/useGetAriaLabelOfModal'; export * from './hooks/useGetAriaLabelOfPopover'; -export * from './Action.Designer'; export * from './types'; +export * from './zIndexContext'; diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/__e2e__/templates.ts b/packages/plugins/@nocobase/plugin-mobile/src/client/__e2e__/templates.ts new file mode 100644 index 000000000..33a52b9c3 --- /dev/null +++ b/packages/plugins/@nocobase/plugin-mobile/src/client/__e2e__/templates.ts @@ -0,0 +1,1065 @@ +/** + * 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. + */ + +export const shouldDisplayImageNormally = { + collections: [ + { + name: 'image', + fields: [ + { + name: 'attachment', + interface: 'attachment', + }, + ], + }, + ], + pageSchema: { + type: 'void', + 'x-component': 'Grid', + 'x-component-props': { + showDivider: false, + }, + 'x-initializer': 'mobile:addBlock', + properties: { + '2qkpsi1o454': { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Row', + 'x-app-version': '1.3.42-beta', + properties: { + n7plq4w7u4j: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Col', + 'x-app-version': '1.3.42-beta', + properties: { + vi2vd17p09w: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-decorator': 'TableBlockProvider', + 'x-acl-action': 'image:list', + 'x-use-decorator-props': 'useTableBlockDecoratorProps', + 'x-decorator-props': { + collection: 'image', + dataSource: 'main', + action: 'list', + params: { + pageSize: 20, + }, + rowKey: 'id', + showIndex: true, + dragSort: false, + }, + 'x-toolbar': 'BlockSchemaToolbar', + 'x-settings': 'blockSettings:table', + 'x-component': 'CardItem', + 'x-filter-targets': [], + 'x-app-version': '1.3.42-beta', + properties: { + actions: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-initializer': 'table:configureActions', + 'x-component': 'ActionBar', + 'x-component-props': { + style: { + marginBottom: 'var(--nb-spacing)', + }, + }, + 'x-app-version': '1.3.42-beta', + 'x-uid': 'xdkvvipejgd', + 'x-async': false, + 'x-index': 1, + }, + '61g0b1ddb4a': { + _isJSONSchemaObject: true, + version: '2.0', + type: 'array', + 'x-initializer': 'table:configureColumns', + 'x-component': 'TableV2', + 'x-use-component-props': 'useTableBlockProps', + 'x-component-props': { + rowKey: 'id', + rowSelection: { + type: 'checkbox', + }, + }, + 'x-app-version': '1.3.42-beta', + properties: { + actions: { + 'x-uid': 'rjpymlq1jzw', + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + title: '{{ t("Actions") }}', + 'x-action-column': 'actions', + 'x-decorator': 'TableV2.Column.ActionBar', + 'x-component': 'TableV2.Column', + 'x-toolbar': 'TableColumnSchemaToolbar', + 'x-initializer': 'table:configureItemActions', + 'x-settings': 'fieldSettings:TableColumn', + 'x-toolbar-props': { + initializer: 'table:configureItemActions', + }, + 'x-app-version': '1.3.42-beta', + 'x-component-props': { + width: 50, + }, + properties: { + nj2c3kinca5: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-decorator': 'DndContext', + 'x-component': 'Space', + 'x-component-props': { + split: '|', + }, + 'x-app-version': '1.3.42-beta', + properties: { + dzdmqaizn2s: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + title: '{{ t("View") }}', + 'x-action': 'view', + 'x-toolbar': 'ActionSchemaToolbar', + 'x-settings': 'actionSettings:view', + 'x-component': 'Action.Link', + 'x-component-props': { + openMode: 'page', + }, + 'x-action-context': { + dataSource: 'main', + collection: 'image', + }, + 'x-decorator': 'ACLActionProvider', + 'x-designer-props': { + linkageAction: true, + }, + properties: { + drawer: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + title: '{{ t("View record") }}', + 'x-component': 'Action.Container', + 'x-component-props': { + className: 'nb-action-popup', + }, + properties: { + tabs: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Tabs', + 'x-component-props': {}, + 'x-initializer': 'popup:addTab', + properties: { + tab1: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + title: '{{t("Details")}}', + 'x-component': 'Tabs.TabPane', + 'x-designer': 'Tabs.Designer', + 'x-component-props': {}, + properties: { + grid: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid', + 'x-initializer': 'popup:common:addBlock', + properties: { + v3lu0q5qb2s: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Row', + 'x-app-version': '1.3.42-beta', + properties: { + '8v6rb76xzcl': { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Col', + 'x-app-version': '1.3.42-beta', + properties: { + j5mq2jtfqbu: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-acl-action': 'image:get', + 'x-decorator': 'DetailsBlockProvider', + 'x-use-decorator-props': 'useDetailsDecoratorProps', + 'x-decorator-props': { + dataSource: 'main', + collection: 'image', + readPretty: true, + action: 'get', + }, + 'x-toolbar': 'BlockSchemaToolbar', + 'x-settings': 'blockSettings:details', + 'x-component': 'CardItem', + 'x-app-version': '1.3.42-beta', + properties: { + l2d5m4sojzb: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Details', + 'x-read-pretty': true, + 'x-use-component-props': 'useDetailsProps', + 'x-app-version': '1.3.42-beta', + properties: { + ilctz1mj532: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-initializer': 'details:configureActions', + 'x-component': 'ActionBar', + 'x-component-props': { + style: { + marginBottom: 24, + }, + }, + 'x-app-version': '1.3.42-beta', + properties: { + lhm4dx0xm3r: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + title: '{{ t("Edit") }}', + 'x-action': 'update', + 'x-toolbar': 'ActionSchemaToolbar', + 'x-settings': 'actionSettings:edit', + 'x-component': 'Action', + 'x-component-props': { + openMode: 'page', + icon: 'EditOutlined', + type: 'primary', + }, + 'x-action-context': { + dataSource: 'main', + collection: 'image', + }, + 'x-decorator': 'ACLActionProvider', + 'x-app-version': '1.3.42-beta', + properties: { + drawer: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + title: '{{ t("Edit record") }}', + 'x-component': 'Action.Container', + 'x-component-props': { + className: 'nb-action-popup', + }, + 'x-app-version': '1.3.42-beta', + properties: { + tabs: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Tabs', + 'x-component-props': {}, + 'x-initializer': 'popup:addTab', + 'x-app-version': '1.3.42-beta', + properties: { + tab1: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + title: '{{t("Edit")}}', + 'x-component': 'Tabs.TabPane', + 'x-designer': 'Tabs.Designer', + 'x-component-props': {}, + 'x-app-version': '1.3.42-beta', + properties: { + grid: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid', + 'x-initializer': + 'popup:common:addBlock', + 'x-app-version': '1.3.42-beta', + properties: { + '5pwp67hvgii': { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Row', + 'x-app-version': + '1.3.42-beta', + properties: { + b02yo5jzqu1: { + _isJSONSchemaObject: + true, + version: '2.0', + type: 'void', + 'x-component': + 'Grid.Col', + 'x-app-version': + '1.3.42-beta', + properties: { + '6bsqjxlo2l0': { + _isJSONSchemaObject: + true, + version: '2.0', + type: 'void', + 'x-acl-action': + 'image:get', + 'x-decorator': + 'DetailsBlockProvider', + 'x-use-decorator-props': + 'useDetailsDecoratorProps', + 'x-decorator-props': + { + dataSource: + 'main', + collection: + 'image', + readPretty: + true, + action: 'get', + }, + 'x-toolbar': + 'BlockSchemaToolbar', + 'x-settings': + 'blockSettings:details', + 'x-component': + 'CardItem', + 'x-app-version': + '1.3.42-beta', + properties: { + juho6f9cld0: { + _isJSONSchemaObject: + true, + version: '2.0', + type: 'void', + 'x-component': + 'Details', + 'x-read-pretty': + true, + 'x-use-component-props': + 'useDetailsProps', + 'x-app-version': + '1.3.42-beta', + properties: { + '6xrgjg0w2j0': + { + _isJSONSchemaObject: + true, + version: + '2.0', + type: 'void', + 'x-initializer': + 'details:configureActions', + 'x-component': + 'ActionBar', + 'x-component-props': + { + style: + { + marginBottom: 24, + }, + }, + 'x-app-version': + '1.3.42-beta', + properties: + { + tqtunfb7c5a: + { + _isJSONSchemaObject: + true, + version: + '2.0', + type: 'void', + title: + '{{ t("Edit") }}', + 'x-action': + 'update', + 'x-toolbar': + 'ActionSchemaToolbar', + 'x-settings': + 'actionSettings:edit', + 'x-component': + 'Action', + 'x-component-props': + { + openMode: + 'page', + icon: 'EditOutlined', + type: 'primary', + }, + 'x-action-context': + { + dataSource: + 'main', + collection: + 'image', + }, + 'x-decorator': + 'ACLActionProvider', + 'x-app-version': + '1.3.42-beta', + properties: + { + drawer: + { + _isJSONSchemaObject: + true, + version: + '2.0', + type: 'void', + title: + '{{ t("Edit record") }}', + 'x-component': + 'Action.Container', + 'x-component-props': + { + className: + 'nb-action-popup', + }, + 'x-app-version': + '1.3.42-beta', + properties: + { + tabs: { + _isJSONSchemaObject: + true, + version: + '2.0', + type: 'void', + 'x-component': + 'Tabs', + 'x-component-props': + {}, + 'x-initializer': + 'popup:addTab', + 'x-app-version': + '1.3.42-beta', + properties: + { + tab1: { + _isJSONSchemaObject: + true, + version: + '2.0', + type: 'void', + title: + '{{t("Edit")}}', + 'x-component': + 'Tabs.TabPane', + 'x-designer': + 'Tabs.Designer', + 'x-component-props': + {}, + 'x-app-version': + '1.3.42-beta', + properties: + { + grid: { + _isJSONSchemaObject: + true, + version: + '2.0', + type: 'void', + 'x-component': + 'Grid', + 'x-initializer': + 'popup:common:addBlock', + 'x-app-version': + '1.3.42-beta', + properties: + { + xswkkgymq30: + { + _isJSONSchemaObject: + true, + version: + '2.0', + type: 'void', + 'x-component': + 'Grid.Row', + 'x-app-version': + '1.3.42-beta', + properties: + { + pq2gdv03h0f: + { + _isJSONSchemaObject: + true, + version: + '2.0', + type: 'void', + 'x-component': + 'Grid.Col', + 'x-app-version': + '1.3.42-beta', + properties: + { + pmoy87u1q83: + { + _isJSONSchemaObject: + true, + version: + '2.0', + type: 'void', + 'x-acl-action': + 'image:get', + 'x-decorator': + 'DetailsBlockProvider', + 'x-use-decorator-props': + 'useDetailsDecoratorProps', + 'x-decorator-props': + { + dataSource: + 'main', + collection: + 'image', + readPretty: + true, + action: + 'get', + }, + 'x-toolbar': + 'BlockSchemaToolbar', + 'x-settings': + 'blockSettings:details', + 'x-component': + 'CardItem', + 'x-app-version': + '1.3.42-beta', + properties: + { + krrpne6bx2e: + { + _isJSONSchemaObject: + true, + version: + '2.0', + type: 'void', + 'x-component': + 'Details', + 'x-read-pretty': + true, + 'x-use-component-props': + 'useDetailsProps', + 'x-app-version': + '1.3.42-beta', + properties: + { + '4eixb6olg5s': + { + _isJSONSchemaObject: + true, + version: + '2.0', + type: 'void', + 'x-initializer': + 'details:configureActions', + 'x-component': + 'ActionBar', + 'x-component-props': + { + style: + { + marginBottom: 24, + }, + }, + 'x-app-version': + '1.3.42-beta', + 'x-uid': + 'mtk4qib0pmb', + 'x-async': + false, + 'x-index': 1, + }, + grid: { + _isJSONSchemaObject: + true, + version: + '2.0', + type: 'void', + 'x-component': + 'Grid', + 'x-initializer': + 'details:configureFields', + 'x-app-version': + '1.3.42-beta', + properties: + { + '5qv0bbqybgm': + { + _isJSONSchemaObject: + true, + version: + '2.0', + type: 'void', + 'x-component': + 'Grid.Row', + 'x-app-version': + '1.3.42-beta', + properties: + { + x1e4gnfeupv: + { + _isJSONSchemaObject: + true, + version: + '2.0', + type: 'void', + 'x-component': + 'Grid.Col', + 'x-app-version': + '1.3.42-beta', + properties: + { + attachment: + { + _isJSONSchemaObject: + true, + version: + '2.0', + type: 'string', + 'x-toolbar': + 'FormItemSchemaToolbar', + 'x-settings': + 'fieldSettings:FormItem', + 'x-component': + 'CollectionField', + 'x-decorator': + 'FormItem', + 'x-collection-field': + 'image.attachment', + 'x-component-props': + {}, + 'x-use-component-props': + 'useAttachmentFieldProps', + 'x-app-version': + '1.3.42-beta', + 'x-uid': + 'dhcu2vf5fxm', + 'x-async': + false, + 'x-index': 1, + }, + }, + 'x-uid': + 'yl57to4ttjy', + 'x-async': + false, + 'x-index': 1, + }, + }, + 'x-uid': + 'eyqz6iaciv5', + 'x-async': + false, + 'x-index': 1, + }, + }, + 'x-uid': + '0sx8rthcy15', + 'x-async': + false, + 'x-index': 2, + }, + }, + 'x-uid': + 'uh0vhvhnltl', + 'x-async': + false, + 'x-index': 1, + }, + }, + 'x-uid': + 'ogkh4von4yu', + 'x-async': + false, + 'x-index': 1, + }, + }, + 'x-uid': + 'lhgnxv5urvf', + 'x-async': + false, + 'x-index': 1, + }, + }, + 'x-uid': + '3rdklcguzy1', + 'x-async': + false, + 'x-index': 1, + }, + }, + 'x-uid': + 'kbzczrd39z3', + 'x-async': + false, + 'x-index': 1, + }, + }, + 'x-uid': + 'saexcyuo5ao', + 'x-async': + false, + 'x-index': 1, + }, + }, + 'x-uid': + 'l6gxsphiv7p', + 'x-async': + false, + 'x-index': 1, + }, + }, + 'x-uid': + '5j05xhjnvhu', + 'x-async': + false, + 'x-index': 1, + }, + }, + 'x-uid': + '9qid8vlu438', + 'x-async': + false, + 'x-index': 1, + }, + }, + 'x-uid': + 'hnt0v2iaf1q', + 'x-async': + false, + 'x-index': 1, + }, + grid: { + _isJSONSchemaObject: + true, + version: + '2.0', + type: 'void', + 'x-component': + 'Grid', + 'x-initializer': + 'details:configureFields', + 'x-app-version': + '1.3.42-beta', + properties: + { + '4ljipl6fcex': + { + _isJSONSchemaObject: + true, + version: + '2.0', + type: 'void', + 'x-component': + 'Grid.Row', + 'x-app-version': + '1.3.42-beta', + properties: + { + o28cy7so1co: + { + _isJSONSchemaObject: + true, + version: + '2.0', + type: 'void', + 'x-component': + 'Grid.Col', + 'x-app-version': + '1.3.42-beta', + properties: + { + attachment: + { + _isJSONSchemaObject: + true, + version: + '2.0', + type: 'string', + 'x-toolbar': + 'FormItemSchemaToolbar', + 'x-settings': + 'fieldSettings:FormItem', + 'x-component': + 'CollectionField', + 'x-decorator': + 'FormItem', + 'x-collection-field': + 'image.attachment', + 'x-component-props': + {}, + 'x-use-component-props': + 'useAttachmentFieldProps', + 'x-app-version': + '1.3.42-beta', + 'x-uid': + 'u19h5djk1af', + 'x-async': + false, + 'x-index': 1, + }, + }, + 'x-uid': + 't1m1yr1sddj', + 'x-async': + false, + 'x-index': 1, + }, + }, + 'x-uid': + 'h3ok06z8mnt', + 'x-async': + false, + 'x-index': 1, + }, + }, + 'x-uid': + 'gfw19ntb1ig', + 'x-async': + false, + 'x-index': 2, + }, + }, + 'x-uid': + '5lreqos5pcm', + 'x-async': + false, + 'x-index': 1, + }, + }, + 'x-uid': + '28dc9dbzmnd', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': '0nwx7uvpdrw', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'vh98qnnifff', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'nklyrutj2hw', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'jzi0d8nhv9t', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'wiru51cp3bj', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'kcy9s6f3kll', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'k52k7dy2jyh', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'e9xf3xhivpu', + 'x-async': false, + 'x-index': 1, + }, + grid: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid', + 'x-initializer': 'details:configureFields', + 'x-app-version': '1.3.42-beta', + properties: { + pmh5rz8nxf0: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Row', + 'x-app-version': '1.3.42-beta', + properties: { + wdi21i7x7th: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Col', + 'x-app-version': '1.3.42-beta', + properties: { + attachment: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'string', + 'x-toolbar': 'FormItemSchemaToolbar', + 'x-settings': 'fieldSettings:FormItem', + 'x-component': 'CollectionField', + 'x-decorator': 'FormItem', + 'x-collection-field': + 'image.attachment', + 'x-component-props': {}, + 'x-use-component-props': + 'useAttachmentFieldProps', + 'x-app-version': '1.3.42-beta', + 'x-uid': 'nsxtdx4v0on', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': '7jwrrijskjo', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'ioxlkouqs1s', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'c7v6g526r3o', + 'x-async': false, + 'x-index': 2, + }, + }, + 'x-uid': 'xvnohfnt59r', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': '2w9fddhi7ig', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': '2wm58u6r3pu', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': '1gl08rddg53', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'ljevsl3tauf', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'ldqvb7su74d', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'a6vwhe6f4di', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'ufel6b95xab', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'ynfe2e3advc', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'muv6sn88u21', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-async': false, + 'x-index': 1, + }, + aeie2yj3330: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-decorator': 'TableV2.Column.Decorator', + 'x-toolbar': 'TableColumnSchemaToolbar', + 'x-settings': 'fieldSettings:TableColumn', + 'x-component': 'TableV2.Column', + 'x-app-version': '1.3.42-beta', + properties: { + attachment: { + _isJSONSchemaObject: true, + version: '2.0', + 'x-collection-field': 'image.attachment', + 'x-component': 'CollectionField', + 'x-component-props': { + size: 'small', + }, + 'x-read-pretty': true, + 'x-decorator': null, + 'x-decorator-props': { + labelStyle: { + display: 'none', + }, + }, + 'x-use-component-props': 'useAttachmentFieldProps', + 'x-app-version': '1.3.42-beta', + 'x-uid': 'v8ob310s6rw', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'nl49qq20w9u', + 'x-async': false, + 'x-index': 2, + }, + }, + 'x-uid': 'mmmy06sb66h', + 'x-async': false, + 'x-index': 2, + }, + }, + 'x-uid': '544lfyanyxa', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': '8o70uof3o2h', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'hi06e74rl8e', + 'x-async': false, + 'x-index': 1, + }, + }, + name: 'q8vu8vaasre', + 'x-uid': 'q8vu8vaasre', + 'x-async': true, + 'x-index': 1, + }, +}; diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/__e2e__/zIndex.test.ts b/packages/plugins/@nocobase/plugin-mobile/src/client/__e2e__/zIndex.test.ts new file mode 100644 index 000000000..625bdc8cc --- /dev/null +++ b/packages/plugins/@nocobase/plugin-mobile/src/client/__e2e__/zIndex.test.ts @@ -0,0 +1,72 @@ +/** + * 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 { expect, test } from '@nocobase/test/e2e'; +import { shouldDisplayImageNormally } from './templates'; + +test.describe('zIndex', () => { + test('should display image normally', async ({ page, mockMobilePage, mockRecord }) => { + const nocoPage = await mockMobilePage(shouldDisplayImageNormally).waitForInit(); + const record = await mockRecord('image'); + await nocoPage.goto(); + + const title = record.attachment[0].title; + + // 通过鼠标 hover 到 Add block 按钮来检查是否符合预期 + const check = async (level: number) => { + try { + switch (level) { + case 0: + await page.getByLabel('schema-initializer-Grid-').hover({ timeout: 300 }); + break; + case 1: + await page.getByLabel('schema-initializer-Grid-popup').hover({ timeout: 300 }); + break; + case 2: + await page.getByLabel('schema-initializer-Grid-popup').nth(1).hover({ timeout: 300 }); + break; + case 3: + await page.getByLabel('schema-initializer-Grid-popup').nth(2).hover({ timeout: 300 }); + break; + } + } catch (e) { + return; + } + await page.waitForTimeout(300); + await expect(page.getByText('Desktop data blocks')).not.toBeVisible(); + }; + + // 1. 在主页面，点击图片预览，图片不能被主页面盖住 + await page.getByRole('link', { name: title }).click(); + await page.waitForTimeout(300); + await check(0); + await page.getByLabel('Close lightbox').click(); + + // 2. 进入第一层子页面，然后点击图片预览， 图片不能被子页面盖住 + await page.getByLabel('action-Action.Link-View-view-').click(); + await page.getByRole('link', { name: title }).nth(1).click(); + await page.waitForTimeout(300); + await check(1); + await page.getByLabel('Close lightbox').click(); + + // 3. 进入第二层子页面，然后点击图片预览， 图片不能被子页面盖住 + await page.getByLabel('action-Action-Edit-update-').click(); + await page.getByRole('link', { name: title }).nth(2).click(); + await page.waitForTimeout(300); + await check(2); + await page.getByLabel('Close lightbox').click(); + + // 4. 进入第三层子页面，然后点击图片预览， 图片不能被子页面盖住 + await page.getByLabel('action-Action-Edit-update-').nth(2).click(); + await page.getByRole('link', { name: title }).nth(3).click(); + await page.waitForTimeout(300); + await check(3); + await page.getByLabel('Close lightbox').click(); + }); +}); diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/ActionDrawer.tsx b/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/ActionDrawer.tsx index 6e0e7baea..39a2ebd34 100644 --- a/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/ActionDrawer.tsx +++ b/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/ActionDrawer.tsx @@ -8,14 +8,14 @@ */ import { ISchema, observer, RecursionField, useField, useFieldSchema } from '@formily/react'; -import { Action, SchemaComponent, useActionContext } from '@nocobase/client'; +import { Action, SchemaComponent, useActionContext, useZIndexContext, zIndexContext } from '@nocobase/client'; import { ConfigProvider } from 'antd'; import { Popup } from 'antd-mobile'; import { CloseOutline } from 'antd-mobile-icons'; import React, { useCallback, useEffect, useMemo } from 'react'; import { useMobileActionDrawerStyle } from './ActionDrawer.style'; -import { BasicZIndexProvider, MIN_Z_INDEX_INCREMENT, useBasicZIndex } from './BasicZIndexProvider'; import { usePopupContainer } from './FilterAction'; +import { MIN_Z_INDEX_INCREMENT } from './zIndex'; export const ActionDrawerUsedInMobile: any = observer((props: { footerNodeName?: string }) => { const fieldSchema = useFieldSchema(); @@ -23,7 +23,7 @@ export const ActionDrawerUsedInMobile: any = observer((props: { footerNodeName?: const { visible, setVisible } = useActionContext(); const { popupContainerRef, visiblePopup } = usePopupContainer(visible); const { styles } = useMobileActionDrawerStyle(); - const { basicZIndex } = useBasicZIndex(); + const parentZIndex = useZIndexContext(); // this schema need to add padding in the content area of the popup const isSpecialSchema = isChangePasswordSchema(fieldSchema) || isEditProfileSchema(fieldSchema); @@ -32,7 +32,7 @@ export const ActionDrawerUsedInMobile: any = observer((props: { footerNodeName?: const specialStyle = isSpecialSchema ? { backgroundColor: 'white' } : {}; - const newZIndex = basicZIndex + MIN_Z_INDEX_INCREMENT; + const newZIndex = parentZIndex + MIN_Z_INDEX_INCREMENT; const zIndexStyle = useMemo(() => { return { @@ -66,7 +66,7 @@ export const ActionDrawerUsedInMobile: any = observer((props: { footerNodeName?: }, [newZIndex]); return ( - + - + ); }); diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/BasicZIndexProvider.tsx b/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/BasicZIndexProvider.tsx deleted file mode 100644 index c802e0d3d..000000000 --- a/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/BasicZIndexProvider.tsx +++ /dev/null @@ -1,33 +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 React, { useMemo } from 'react'; - -const BasicZIndexContext = React.createContext<{ - basicZIndex: number; -}>({ - basicZIndex: 0, -}); - -/** - * used to accumulate z-index in nested popups - * @param props - * @returns - */ -export const BasicZIndexProvider: React.FC<{ basicZIndex: number }> = (props) => { - const value = useMemo(() => ({ basicZIndex: props.basicZIndex }), [props.basicZIndex]); - return {props.children}; -}; - -export const useBasicZIndex = () => { - return React.useContext(BasicZIndexContext); -}; - -// minimum z-index increment -export const MIN_Z_INDEX_INCREMENT = 10; diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/FilterAction.tsx b/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/FilterAction.tsx index 4370e8449..0a21e37e9 100644 --- a/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/FilterAction.tsx +++ b/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/FilterAction.tsx @@ -7,14 +7,14 @@ * For more information, please refer to: https://www.nocobase.com/agreement. */ -import { Filter, withDynamicSchemaProps } from '@nocobase/client'; +import { Filter, useZIndexContext, withDynamicSchemaProps } from '@nocobase/client'; import { ConfigProvider } from 'antd'; import { Popup } from 'antd-mobile'; import { CloseOutline } from 'antd-mobile-icons'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useMobileActionDrawerStyle } from './ActionDrawer.style'; -import { MIN_Z_INDEX_INCREMENT, useBasicZIndex } from './BasicZIndexProvider'; +import { MIN_Z_INDEX_INCREMENT } from './zIndex'; const OriginFilterAction = Filter.Action; @@ -24,11 +24,11 @@ export const FilterAction = withDynamicSchemaProps((props) => { {...props} Container={(props) => { const { visiblePopup, popupContainerRef } = usePopupContainer(props.open); - const { basicZIndex } = useBasicZIndex(); + const parentZIndex = useZIndexContext(); const { styles } = useMobileActionDrawerStyle(); const { t } = useTranslation(); - const newZIndex = basicZIndex + MIN_Z_INDEX_INCREMENT; + const newZIndex = parentZIndex + MIN_Z_INDEX_INCREMENT; // eslint-disable-next-line react-hooks/rules-of-hooks const closePopup = useCallback(() => { @@ -116,9 +116,9 @@ export const usePopupContainer = (visible: boolean) => { const [mobileContainer] = useState(() => document.querySelector('.mobile-container')); const [visiblePopup, setVisiblePopup] = useState(false); const popupContainerRef = React.useRef(null); - const { basicZIndex } = useBasicZIndex(); + const parentZIndex = useZIndexContext(); - const newZIndex = basicZIndex + MIN_Z_INDEX_INCREMENT; + const newZIndex = parentZIndex + MIN_Z_INDEX_INCREMENT; useEffect(() => { if (!visible) { diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/InternalPopoverNester.tsx b/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/InternalPopoverNester.tsx index 3ce77d41d..03207a8a7 100644 --- a/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/InternalPopoverNester.tsx +++ b/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/InternalPopoverNester.tsx @@ -8,22 +8,23 @@ */ import { useField } from '@formily/react'; +import { useZIndexContext, zIndexContext } from '@nocobase/client'; import { ConfigProvider } from 'antd'; import { Popup } from 'antd-mobile'; import { CloseOutline } from 'antd-mobile-icons'; import React, { useCallback, useMemo } from 'react'; -import { BasicZIndexProvider, MIN_Z_INDEX_INCREMENT, useBasicZIndex } from './BasicZIndexProvider'; import { usePopupContainer } from './FilterAction'; import { useInternalPopoverNesterUsedInMobileStyle } from './InternalPopoverNester.style'; +import { MIN_Z_INDEX_INCREMENT } from './zIndex'; const Container = (props) => { const { onOpenChange } = props; const { visiblePopup, popupContainerRef } = usePopupContainer(props.open); const { styles } = useInternalPopoverNesterUsedInMobileStyle(); const field = useField(); - const { basicZIndex } = useBasicZIndex(); + const parentZIndex = useZIndexContext(); - const newZIndex = basicZIndex + MIN_Z_INDEX_INCREMENT; + const newZIndex = parentZIndex + MIN_Z_INDEX_INCREMENT; const title = field.title || ''; const zIndexStyle = useMemo(() => { @@ -49,7 +50,7 @@ const Container = (props) => { }, [newZIndex]); return ( - +
{props.children}
{
- + ); }; diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileActionPage.tsx b/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileActionPage.tsx index 3c3d47464..166111056 100644 --- a/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileActionPage.tsx +++ b/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileActionPage.tsx @@ -16,12 +16,14 @@ import { useActionContext, useApp, useTabsContext, + useZIndexContext, + zIndexContext, } from '@nocobase/client'; import _ from 'lodash'; import React, { useEffect, useMemo, useState } from 'react'; import { createPortal } from 'react-dom'; import { usePluginTranslation } from '../../locale'; -import { BasicZIndexProvider, MIN_Z_INDEX_INCREMENT, useBasicZIndex } from '../BasicZIndexProvider'; +import { MIN_Z_INDEX_INCREMENT } from '../zIndex'; import { useMobileActionPageStyle } from './MobileActionPage.style'; import { MobileTabsForMobileActionPage } from './MobileTabsForMobileActionPage'; @@ -94,11 +96,11 @@ export const MobileActionPage = ({ level, footerNodeName }) => { const { styles } = useMobileActionPageStyle(); const tabContext = useTabsContext(); const containerDOM = useMemo(() => document.querySelector('.nb-mobile-subpages-slot'), []); - const { basicZIndex } = useBasicZIndex(); + const parentZIndex = useZIndexContext(); // in nested popups, basicZIndex is an accumulated value to ensure that // the z-index of the current level is always higher than the previous level - const newZIndex = basicZIndex + MIN_Z_INDEX_INCREMENT + (level || 1); + const newZIndex = parentZIndex + MIN_Z_INDEX_INCREMENT + (level || 1); const footerSchema = fieldSchema.reduceProperties((buf, s) => { if (s['x-component'] === footerNodeName) { @@ -118,7 +120,7 @@ export const MobileActionPage = ({ level, footerNodeName }) => { } const actionPageNode = ( - +
} tabBarGutter={48}> @@ -136,7 +138,7 @@ export const MobileActionPage = ({ level, footerNodeName }) => {
)} - + ); if (containerDOM) { diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/zIndex.ts b/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/zIndex.ts new file mode 100644 index 000000000..f59af7ae7 --- /dev/null +++ b/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/zIndex.ts @@ -0,0 +1,11 @@ +/** + * 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. + */ + +// minimum z-index increment +export const MIN_Z_INDEX_INCREMENT = 10; diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/mobile/Mobile.tsx b/packages/plugins/@nocobase/plugin-mobile/src/client/mobile/Mobile.tsx index 45506f07d..d0f1f404a 100644 --- a/packages/plugins/@nocobase/plugin-mobile/src/client/mobile/Mobile.tsx +++ b/packages/plugins/@nocobase/plugin-mobile/src/client/mobile/Mobile.tsx @@ -18,12 +18,12 @@ import { OpenModeProvider, useAssociationFieldModeContext, usePlugin, + zIndexContext, } from '@nocobase/client'; import React from 'react'; import { isDesktop } from 'react-device-detect'; import { ActionDrawerUsedInMobile, useToAdaptActionDrawerToMobile } from '../adaptor-of-desktop/ActionDrawer'; -import { BasicZIndexProvider } from '../adaptor-of-desktop/BasicZIndexProvider'; import { useToAdaptFilterActionToMobile } from '../adaptor-of-desktop/FilterAction'; import { InternalPopoverNesterUsedInMobile } from '../adaptor-of-desktop/InternalPopoverNester'; import { MobileActionPage } from '../adaptor-of-desktop/mobile-action-page/MobileActionPage'; @@ -102,9 +102,9 @@ export const Mobile = () => { {/* the z-index of all popups and subpages will be based on this value */} - + - +