feat: table block support size settings (#5563)

* feat: table block support size settings

* fix: bug

* fix: bug

* fix: test

lerna.json

@@ -2,9 +2,7 @@
   "version": "1.4.0-alpha",
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "npmClientArgs": [
-    "--ignore-engines"
-  ],
+  "npmClientArgs": ["--ignore-engines"],
   "command": {
     "version": {
       "forcePublish": true,

packages/core/client/src/locale/zh-CN.json

@@ -1024,5 +1024,6 @@
   "Line break": "换行",
   "Ellipsis": "省略",
   "Set block layout": "设置区块布局",
-  "Add & Update": "添加 & 更新"
+  "Add & Update": "添加 & 更新",
+  "Table size":"表格大小"
 }

packages/core/client/src/modules/blocks/data-blocks/table/tableBlockSettings.tsx

@@ -187,6 +187,40 @@ export const tableBlockSettings = new SchemaSettings({
         };
       },
     },
+    {
+      name: 'tableSize',
+      type: 'select',
+      useComponentProps() {
+        const field = useField();
+        const fieldSchema = useFieldSchema();
+        const { t } = useTranslation();
+        const { dn } = useDesignable();
+        return {
+          title: t('Table size'),
+          value: field.componentProps?.size || 'middle',
+          options: [
+            { label: t('Large'), value: 'large' },
+            { label: t('Middle'), value: 'middle' },
+            { label: t('Small'), value: 'small' },
+          ],
+          onChange: (size) => {
+            const schema = fieldSchema.reduceProperties((_, s) => {
+              if (s['x-component'] === 'TableV2') {
+                return s;
+              }
+            }, null);
+            schema['x-component-props'] = schema['x-component-props'] || {};
+            schema['x-component-props']['size'] = size;
+            dn.emit('patch', {
+              schema: {
+                ['x-uid']: schema['x-uid'],
+                'x-decorator-props': schema['x-component-props'],
+              },
+            });
+          },
+        };
+      },
+    },
     {
       name: 'ConnectDataBlocks',
       Component: SchemaSettingsConnectDataBlocks,

packages/core/client/src/schema-component/antd/grid/Grid.tsx

@@ -500,7 +500,7 @@ Grid.Col = observer(
         width = `calc(${w}% - ${token.marginBlock}px *  ${(showDivider ? cols.length + 1 : 0) / cols.length})`;
       }
       return { width };
-    }, [cols?.length, schema?.['x-component-props']?.['width']]);
+    }, [cols?.length, schema?.['x-component-props']?.['width'], token.marginBlock]);
     const { isOver, setNodeRef } = useDroppable({
       id: field.address.toString(),
       data: {

packages/core/client/src/schema-component/antd/table-v2/Table.tsx

@@ -620,6 +620,7 @@ export const Table: any = withDynamicSchemaProps(
     } = { ...others1, ...others2 } as any;
     const field = useArrayField(others);
     const schema = useFieldSchema();
+    const { size = 'middle' } = schema?.['x-component-props'] || {};
     const collection = useCollection();
     const isTableSelector = schema?.parent?.['x-decorator'] === 'TableSelectorProvider';
     const ctx = isTableSelector ? useTableSelectorContext() : useTableBlockContext();
@@ -892,7 +893,6 @@ export const Table: any = withDynamicSchemaProps(
         expandedRowKeys: expandedKeys,
       };
     }, [expandedKeys, onExpandValue]);
-
     return (
       // If spinning is set to undefined, it will cause the subtable to always display loading, so we need to convert it here
       <Spin spinning={!!loading}>
@@ -913,6 +913,7 @@ export const Table: any = withDynamicSchemaProps(
           columns={columns}
           expandable={expandable}
           field={field}
+          size={size}
         />
       </Spin>
     );

packages/core/client/src/schema-component/antd/table-v2/TableBlockDesigner.tsx

@@ -303,6 +303,30 @@ export const TableBlockDesigner = () => {
           });
         }}
       />
+      <SchemaSettingsSelectItem
+        title={t('Table size')}
+        value={field.componentProps?.size || 'middle'}
+        options={[
+          { label: t('Large'), value: 'large' },
+          { label: t('Middle'), value: 'middle' },
+          { label: t('Small'), value: 'small' },
+        ]}
+        onChange={(size) => {
+          const schema = fieldSchema.reduceProperties((_, s) => {
+            if (s['x-component'] === 'TableV2') {
+              return s;
+            }
+          }, null);
+          schema['x-component-props'] = schema['x-component-props'] || {};
+          schema['x-component-props']['size'] = size;
+          dn.emit('patch', {
+            schema: {
+              ['x-uid']: schema['x-uid'],
+              'x-decorator-props': schema['x-component-props'],
+            },
+          });
+        }}
+      />
       <SchemaSettingsConnectDataBlocks type={FilterBlockType.TABLE} emptyDescription={t('No blocks to connect')} />
       {supportTemplate && <SchemaSettingsDivider />}
       {supportTemplate && (

packages/core/client/src/schema-component/antd/table-v2/__tests__/Table.settings.test.tsx

@@ -219,6 +219,21 @@ describe('Table.settings', () => {
             },
           ],
         },
+        {
+          title: 'Table size',
+          type: 'select',
+          options: [
+            {
+              label: 'Large',
+            },
+            {
+              label: 'Middle',
+            },
+            {
+              label: 'Small',
+            },
+          ],
+        },
         {
           title: 'Save as template',
           type: 'modal',