feat: auto-hide grid card block action bar when empty (#7069)

* feat: add useGridCardActionBarProps hook and integrate with ActionBar component

* test: update snapshot

packages/core/client/src/block-provider/BlockSchemaComponentProvider.tsx

@@ -19,9 +19,10 @@ import { useDetailsProps } from '../modules/blocks/data-blocks/details-single/ho
 import { FormItemSchemaToolbar } from '../modules/blocks/data-blocks/form/FormItemSchemaToolbar';
 import { useCreateFormBlockDecoratorProps } from '../modules/blocks/data-blocks/form/hooks/useCreateFormBlockDecoratorProps';
 import { useCreateFormBlockProps } from '../modules/blocks/data-blocks/form/hooks/useCreateFormBlockProps';
+import { useDataFormItemProps } from '../modules/blocks/data-blocks/form/hooks/useDataFormItemProps';
 import { useEditFormBlockDecoratorProps } from '../modules/blocks/data-blocks/form/hooks/useEditFormBlockDecoratorProps';
 import { useEditFormBlockProps } from '../modules/blocks/data-blocks/form/hooks/useEditFormBlockProps';
-import { useDataFormItemProps } from '../modules/blocks/data-blocks/form/hooks/useDataFormItemProps';
+import { useGridCardActionBarProps } from '../modules/blocks/data-blocks/grid-card/hooks/useGridCardActionBarProps';
 import {
   useGridCardBlockDecoratorProps,
   useGridCardBlockItemProps,
@@ -97,6 +98,7 @@ export const BlockSchemaComponentProvider: React.FC = (props) => {
         useGridCardBlockProps,
         useFormItemProps,
         useDataFormItemProps,
+        useGridCardActionBarProps,
       }}
     >
       {props.children}
@@ -161,6 +163,7 @@ export class BlockSchemaComponentPlugin extends Plugin {
       useGridCardBlockItemProps,
       useFormItemProps,
       useDataFormItemProps,
+      useGridCardActionBarProps,
     });
   }
 }

packages/core/client/src/modules/blocks/data-blocks/grid-card/__tests__/createGridCardBlockSchema.test.ts

@@ -27,12 +27,8 @@ describe('createGridCardBlockSchema', () => {
           "actionBar": {
             "type": "void",
             "x-component": "ActionBar",
-            "x-component-props": {
-              "style": {
-                "marginBottom": "var(--nb-spacing)",
-              },
-            },
             "x-initializer": "gridCard:configureActions",
+            "x-use-component-props": "useGridCardActionBarProps",
           },
           "list": {
             "properties": {
@@ -103,12 +99,8 @@ describe('createGridCardBlockSchema', () => {
           "actionBar": {
             "type": "void",
             "x-component": "ActionBar",
-            "x-component-props": {
-              "style": {
-                "marginBottom": "var(--nb-spacing)",
-              },
-            },
             "x-initializer": "gridCard:configureActions",
+            "x-use-component-props": "useGridCardActionBarProps",
           },
           "list": {
             "properties": {

packages/core/client/src/modules/blocks/data-blocks/grid-card/createGridCardBlockUISchema.ts

@@ -49,11 +49,7 @@ export const createGridCardBlockUISchema = (options: {
         type: 'void',
         'x-initializer': 'gridCard:configureActions',
         'x-component': 'ActionBar',
-        'x-component-props': {
+        'x-use-component-props': 'useGridCardActionBarProps',
-          style: {
-            marginBottom: 'var(--nb-spacing)',
-          },
-        },
       },
       list: {
         type: 'array',

packages/core/client/src/modules/blocks/data-blocks/grid-card/hooks/useGridCardActionBarProps.ts

@@ -0,0 +1,26 @@
+/**
+ * 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 { useFieldSchema } from '@formily/react';
+import _ from 'lodash';
+import { useDesignable } from '../../../../../schema-component';
+
+export const useGridCardActionBarProps = () => {
+  const fieldSchema = useFieldSchema();
+  const { designable } = useDesignable();
+
+  return {
+    style: {
+      marginBottom: 'var(--nb-spacing)',
+    },
+
+    // In non-configuration mode, when there are no buttons, ActionBar doesn't need to be displayed
+    hidden: !designable && _.isEmpty(fieldSchema.properties),
+  };
+};

packages/core/client/src/schema-component/antd/action/ActionBar.tsx

@@ -147,6 +147,10 @@ const InternalActionBar: FC = (props: any) => {
 
 export const ActionBar = withDynamicSchemaProps(
   (props: any) => {
+    if (props.hidden) {
+      return null;
+    }
+
     return <InternalActionBar {...props} />;
   },
   { displayName: 'ActionBar' },