refactor: extract to SetTheCountOfColumnsDisplayedInARow (#4211)

* refactor: extract

* chore: revert

packages/core/client/src/modules/blocks/data-blocks/grid-card/SetTheCountOfColumnsDisplayedInARow.tsx

@@ -0,0 +1,72 @@
+import { ISchema, useField, useFieldSchema } from '@formily/react';
+import _ from 'lodash';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { columnCountMarks } from '../../../../schema-component/antd/grid-card/GridCard.Designer';
+import {
+  defaultColumnCount,
+  gridSizes,
+  screenSizeMaps,
+  screenSizeTitleMaps,
+} from '../../../../schema-component/antd/grid-card/options';
+import { useDesignable } from '../../../../schema-component/hooks';
+import { SchemaSettingsModalItem } from '../../../../schema-settings';
+
+export function SetTheCountOfColumnsDisplayedInARow() {
+  const { t } = useTranslation();
+  const fieldSchema = useFieldSchema();
+  const field = useField();
+  const { dn } = useDesignable();
+  const columnCount = field.decoratorProps.columnCount || defaultColumnCount;
+
+  const columnCountSchema = useMemo(() => {
+    return {
+      'x-component': 'Slider',
+      'x-decorator': 'FormItem',
+      'x-component-props': {
+        min: 1,
+        max: 24,
+        marks: columnCountMarks,
+        tooltip: {
+          formatter: (value) => `${value}${t('Column')}`,
+        },
+        step: null,
+      },
+    };
+  }, [t]);
+
+  const columnCountProperties = useMemo(() => {
+    return gridSizes.reduce((o, k) => {
+      o[k] = {
+        ...columnCountSchema,
+        title: t(screenSizeTitleMaps[k]),
+        description: `${t('Screen size')} ${screenSizeMaps[k]} ${t('pixels')}`,
+      };
+      return o;
+    }, {});
+  }, [columnCountSchema, t]);
+
+  return (
+    <SchemaSettingsModalItem
+      title={t('Set the count of columns displayed in a row')}
+      initialValues={columnCount}
+      schema={
+        {
+          type: 'object',
+          title: t('Set the count of columns displayed in a row'),
+          properties: columnCountProperties,
+        } as ISchema
+      }
+      onSubmit={(columnCount) => {
+        _.set(fieldSchema, 'x-decorator-props.columnCount', columnCount);
+        field.decoratorProps.columnCount = columnCount;
+        dn.emit('patch', {
+          schema: {
+            ['x-uid']: fieldSchema['x-uid'],
+            'x-decorator-props': fieldSchema['x-decorator-props'],
+          },
+        });
+      }}
+    />
+  );
+}

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

@@ -2,85 +2,23 @@ import { ArrayItems } from '@formily/antd-v5';
 import { ISchema } from '@formily/json-schema';
 import { useField, useFieldSchema } from '@formily/react';
 import _ from 'lodash';
-import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SchemaSettings } from '../../../../application/schema-settings/SchemaSettings';
 import { useFormBlockContext } from '../../../../block-provider';
 import { useCollection_deprecated, useSortFields } from '../../../../collection-manager';
 import { removeNullCondition, useDesignable } from '../../../../schema-component';
-import {
+import { pageSizeOptions } from '../../../../schema-component/antd/grid-card/options';
-  defaultColumnCount,
-  gridSizes,
-  pageSizeOptions,
-  screenSizeMaps,
-  screenSizeTitleMaps,
-} from '../../../../schema-component/antd/grid-card/options';
 import { SchemaSettingsTemplate } from '../../../../schema-settings';
 import { SchemaSettingsDataScope } from '../../../../schema-settings/SchemaSettingsDataScope';
 import { setDataLoadingModeSettingsItem } from '../details-multi/setDataLoadingModeSettingsItem';
-import { columnCountMarks } from './utils';
+import { SetTheCountOfColumnsDisplayedInARow } from './SetTheCountOfColumnsDisplayedInARow';
 
 export const gridCardBlockSettings = new SchemaSettings({
   name: 'blockSettings:gridCard',
   items: [
     {
       name: 'SetTheCountOfColumnsDisplayedInARow',
-      type: 'modal',
+      Component: SetTheCountOfColumnsDisplayedInARow,
-      useComponentProps() {
-        const { t } = useTranslation();
-        const fieldSchema = useFieldSchema();
-        const field = useField();
-        const { dn } = useDesignable();
-        const columnCount = field.decoratorProps.columnCount || defaultColumnCount;
-
-        const columnCountSchema = useMemo(() => {
-          return {
-            'x-component': 'Slider',
-            'x-decorator': 'FormItem',
-            'x-component-props': {
-              min: 1,
-              max: 24,
-              marks: columnCountMarks,
-              tooltip: {
-                formatter: (value) => `${value}${t('Column')}`,
-              },
-              step: null,
-            },
-          };
-        }, [t]);
-
-        const columnCountProperties = useMemo(() => {
-          return gridSizes.reduce((o, k) => {
-            o[k] = {
-              ...columnCountSchema,
-              title: t(screenSizeTitleMaps[k]),
-              description: `${t('Screen size')} ${screenSizeMaps[k]} ${t('pixels')}`,
-            };
-            return o;
-          }, {});
-        }, [columnCountSchema, t]);
-
-        return {
-          title: t('Set the count of columns displayed in a row'),
-          initialValues: columnCount,
-          schema: {
-            type: 'object',
-            title: t('Set the count of columns displayed in a row'),
-            properties: columnCountProperties,
-          } as ISchema,
-
-          onSubmit: (columnCount) => {
-            _.set(fieldSchema, 'x-decorator-props.columnCount', columnCount);
-            field.decoratorProps.columnCount = columnCount;
-            dn.emit('patch', {
-              schema: {
-                ['x-uid']: fieldSchema['x-uid'],
-                'x-decorator-props': fieldSchema['x-decorator-props'],
-              },
-            });
-          },
-        };
-      },
     },
     {
       name: 'SetTheDataScope',

packages/core/client/src/schema-component/antd/grid-card/GridCard.Designer.tsx

@@ -6,6 +6,8 @@ import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useFormBlockContext } from '../../../block-provider';
 import { useCollection_deprecated, useSortFields } from '../../../collection-manager';
+import { SetDataLoadingMode } from '../../../modules/blocks/data-blocks/details-multi/setDataLoadingModeSettingsItem';
+import { SetTheCountOfColumnsDisplayedInARow } from '../../../modules/blocks/data-blocks/grid-card/SetTheCountOfColumnsDisplayedInARow';
 import { useRecord } from '../../../record-provider';
 import {
   GeneralSchemaDesigner,
@@ -15,15 +17,14 @@ import {
   SchemaSettingsSelectItem,
   SchemaSettingsTemplate,
 } from '../../../schema-settings';
+import { SchemaSettingsDataScope } from '../../../schema-settings/SchemaSettingsDataScope';
 import { useSchemaTemplate } from '../../../schema-templates';
 import { SchemaComponentOptions } from '../../core';
 import { useDesignable } from '../../hooks';
 import { removeNullCondition } from '../filter';
 import { defaultColumnCount, gridSizes, pageSizeOptions, screenSizeMaps, screenSizeTitleMaps } from './options';
-import { SchemaSettingsDataScope } from '../../../schema-settings/SchemaSettingsDataScope';
-import { SetDataLoadingMode } from '../../../modules/blocks/data-blocks/details-multi/setDataLoadingModeSettingsItem';
 
-const columnCountMarks = [1, 2, 3, 4, 6, 8, 12, 24].reduce((obj, cur) => {
+export const columnCountMarks = [1, 2, 3, 4, 6, 8, 12, 24].reduce((obj, cur) => {
   obj[cur] = cur;
   return obj;
 }, {});
@@ -84,27 +85,7 @@ export const GridCardDesigner = () => {
   return (
     <GeneralSchemaDesigner template={template} title={title || name}>
       <SchemaComponentOptions components={{ Slider }}>
-        <SchemaSettingsModalItem
+        <SetTheCountOfColumnsDisplayedInARow />
-          title={t('Set the count of columns displayed in a row')}
-          initialValues={columnCount}
-          schema={
-            {
-              type: 'object',
-              title: t('Set the count of columns displayed in a row'),
-              properties: columnCountProperties,
-            } as ISchema
-          }
-          onSubmit={(columnCount) => {
-            _.set(fieldSchema, 'x-decorator-props.columnCount', columnCount);
-            field.decoratorProps.columnCount = columnCount;
-            dn.emit('patch', {
-              schema: {
-                ['x-uid']: fieldSchema['x-uid'],
-                'x-decorator-props': fieldSchema['x-decorator-props'],
-              },
-            });
-          }}
-        />
         <SchemaSettingsDataScope
           collectionName={name}
           defaultFilter={fieldSchema?.['x-decorator-props']?.params?.filter || {}}