fm453/nocobase
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2025-07-02 03:02:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: extract to SetTheCountOfColumnsDisplayedInARow (#4211)

Browse Source 
* refactor: extract

* chore: revert
This commit is contained in:
Zeke Zhang 2024-04-30 10:39:15 +08:00 committed by GitHub
parent 35825ac77b
commit e5152af4c2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 80 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
packages/core/client/src/modules/blocks/data-blocks/grid-card/SetTheCountOfColumnsDisplayedInARow.tsx Normal file
View File

@ -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'],
},
});
}}
/>
);
}

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

@ -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 {
defaultColumnCount,
gridSizes,
pageSizeOptions,
screenSizeMaps,
screenSizeTitleMaps,
} from '../../../../schema-component/antd/grid-card/options';
import { pageSizeOptions } 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',
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'],
},
});
},
};
},
Component: SetTheCountOfColumnsDisplayedInARow,
},
{
name: 'SetTheDataScope',

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

@ -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
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'],
},
});
}}
/>
<SetTheCountOfColumnsDisplayedInARow />
<SchemaSettingsDataScope
collectionName={name}
defaultFilter={fieldSchema?.['x-decorator-props']?.params?.filter || {}}