feat: map support block height

nocobase · May 23, 2024 · 597fa3f · 597fa3f
1 parent b34c48e
commit 597fa3f
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 12 deletions.
diff --git a/packages/plugins/@nocobase/plugin-map/src/client/block/MapBlock.Settings.tsx b/packages/plugins/@nocobase/plugin-map/src/client/block/MapBlock.Settings.tsx
@@ -25,6 +25,7 @@ import {
   useCollectionManager_deprecated,
   useDesignable,
   useFormBlockContext,
+  SchemaSettingsBlockHeightItem,
 } from '@nocobase/client';
 import lodash from 'lodash';
 import { useMapTranslation } from '../locale';
@@ -39,9 +40,13 @@ export const mapBlockSettings = new SchemaSettings({
       Component: SchemaSettingsBlockTitleItem,
     },
     {
-      name: 'fixBlock',
-      Component: FixedBlockDesignerItem,
+      name: 'setTheBlockHeight',
+      Component: SchemaSettingsBlockHeightItem,
     },
+    // {
+    //   name: 'fixBlock',
+    //   Component: FixedBlockDesignerItem,
+    // },
     {
       name: 'mapField',
       Component: SchemaSettingsCascaderItem,

diff --git a/packages/plugins/@nocobase/plugin-map/src/client/block/MapBlockProvider.tsx b/packages/plugins/@nocobase/plugin-map/src/client/block/MapBlockProvider.tsx
@@ -10,6 +10,8 @@
 import { useField, useFieldSchema } from '@formily/react';
 import { BlockProvider, FixedBlockWrapper, SchemaComponentOptions, useBlockRequestContext } from '@nocobase/client';
 import React, { createContext, useContext, useState } from 'react';
+import { css } from '@emotion/css';
+import { theme } from 'antd';
 
 export const MapBlockContext = createContext<any>({});
 MapBlockContext.displayName = 'MapBlockContext';
@@ -20,6 +22,7 @@ const InternalMapBlockProvider = (props) => {
   const field = useField();
   const { resource, service } = useBlockRequestContext();
   const [selectedRecordKeys, setSelectedRecordKeys] = useState([]);
+  const { token } = theme.useToken();
 
   return (
     <FixedBlockWrapper>
@@ -35,7 +38,16 @@ const InternalMapBlockProvider = (props) => {
             setSelectedRecordKeys,
           }}
         >
-          {props.children}
+          {' '}
+          <div
+            className={css`
+              .nb-action-bar {
+                margin-bottom: ${token.margin}px;
+              }
+            `}
+          >
+            {props.children}
+          </div>
         </MapBlockContext.Provider>
       </SchemaComponentOptions>
     </FixedBlockWrapper>

diff --git a/packages/plugins/@nocobase/plugin-map/src/client/block/createMapBlockUISchema.ts b/packages/plugins/@nocobase/plugin-map/src/client/block/createMapBlockUISchema.ts
@@ -9,14 +9,14 @@
 
 import { ISchema } from '@formily/react';
 import { uid } from '@formily/shared';
+import { theme } from 'antd';
 
 export const createMapBlockUISchema = (options: {
   collectionName: string;
   dataSource: string;
   fieldNames: object;
 }): ISchema => {
   const { collectionName, fieldNames, dataSource } = options;
-
   return {
     type: 'void',
     'x-acl-action': `${collectionName}:list`,
@@ -40,11 +40,7 @@ export const createMapBlockUISchema = (options: {
         type: 'void',
         'x-initializer': 'map:configureActions',
         'x-component': 'ActionBar',
-        'x-component-props': {
-          style: {
-            marginBottom: 16,
-          },
-        },
+        'x-component-props': {},
       },
       [uid()]: {
         type: 'void',

diff --git a/packages/plugins/@nocobase/plugin-map/src/client/components/AMap/Map.tsx b/packages/plugins/@nocobase/plugin-map/src/client/components/AMap/Map.tsx
@@ -20,7 +20,7 @@ import { useMapConfiguration } from '../../hooks';
 import { useMapTranslation } from '../../locale';
 import { MapEditorType } from '../../types';
 import { Search } from './Search';
-
+import { useMapHeight } from '../hook';
 export interface AMapComponentProps {
   value?: any;
   onChange?: (value: number[]) => void;
@@ -112,7 +112,8 @@ export const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapCompone
   const navigate = useNavigate();
   const id = useRef(`nocobase-map-${type || ''}-${Date.now().toString(32)}`);
   const { modal } = App.useApp();
-
+  const height = useMapHeight();
+  console.log(height);
   const [commonOptions] = useState<AMap.PolylineOptions & AMap.PolygonOptions>({
     strokeWeight: 5,
     strokeColor: '#4e9bff',
@@ -402,7 +403,7 @@ export const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapCompone
     <div
       className={css`
         position: relative;
-        height: 500px;
+        height: ${height || 500}px;
       `}
       id={id.current}
       style={props?.style}

diff --git a/packages/plugins/@nocobase/plugin-map/src/client/components/hook.ts b/packages/plugins/@nocobase/plugin-map/src/client/components/hook.ts
@@ -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.
+ */
+
+import { useDataBlockHeight, useDesignable } from '@nocobase/client';
+import { theme } from 'antd';
+import { useFieldSchema } from '@formily/react';
+
+export const useMapHeight = () => {
+  const height = useDataBlockHeight();
+  const { token } = theme.useToken();
+  const { designable } = useDesignable();
+  const schema = useFieldSchema();
+  if (!height) {
+    return;
+  }
+  const hasMapAction = Object.keys(schema.parent?.properties.actions?.properties || {}).length > 0;
+  const actionBarHeight =
+    designable || hasMapAction ? token.paddingLG + token.controlHeight + token.margin : token.paddingLG + token.margin;
+  const footerHeight = token.paddingLG;
+  return height - actionBarHeight - footerHeight;
+};