From a081858aba24af62e83a9c5655fca92db8509df1 Mon Sep 17 00:00:00 2001 From: "bai.zixv" Date: Fri, 17 May 2024 20:51:21 +0800 Subject: [PATCH] feat: support layout direction Reviewed-on: https://git.daoyoucloud.com/daoyoucloud/tachybase/pulls/1006 Reviewed-by: sealday Co-authored-by: bai.zixv Co-committed-by: bai.zixv --- .changeset/little-roses-punch.md | 5 +++ .../form/fieldSettingsFormItem.tsx | 43 +++++++++++-------- .../grid-card/createGridCardBlockUISchema.ts | 1 + .../grid-card/gridCardBlockSettings.ts | 26 +++++++++++ .../antd/form-item/FormItem.tsx | 15 ++++++- 5 files changed, 70 insertions(+), 20 deletions(-) create mode 100644 .changeset/little-roses-punch.md diff --git a/.changeset/little-roses-punch.md b/.changeset/little-roses-punch.md new file mode 100644 index 000000000..05175ccf2 --- /dev/null +++ b/.changeset/little-roses-punch.md @@ -0,0 +1,5 @@ +--- +"@tachybase/client": patch +--- + +grid card, layoutDirection diff --git a/packages/core/client/src/modules/blocks/data-blocks/form/fieldSettingsFormItem.tsx b/packages/core/client/src/modules/blocks/data-blocks/form/fieldSettingsFormItem.tsx index 9e469c4ef..8f6e66101 100644 --- a/packages/core/client/src/modules/blocks/data-blocks/form/fieldSettingsFormItem.tsx +++ b/packages/core/client/src/modules/blocks/data-blocks/form/fieldSettingsFormItem.tsx @@ -15,7 +15,8 @@ import { isPatternDisabled } from '../../../../schema-settings'; import { ActionType } from '../../../../schema-settings/LinkageRules/type'; import { SchemaSettingsDefaultValue } from '../../../../schema-settings/SchemaSettingsDefaultValue'; import { useIsAllowToSetDefaultValue } from '../../../../schema-settings/hooks/useIsAllowToSetDefaultValue'; -import { css } from '@tachybase/client'; +import { useContextConfigSettingGrid } from '../grid-card/context/ConfigSettingGrid.provider'; +import { useDataBlockProps } from '@tachybase/client'; export const fieldSettingsFormItem = new SchemaSettings({ name: 'fieldSettings:FormItem', @@ -229,9 +230,12 @@ export const fieldSettingsFormItem = new SchemaSettings({ type: 'select', useComponentProps() { const { t } = useTranslation(); - const fieldSchema = useFieldSchema(); const { dn } = useDesignable(); - const initialValue = fieldSchema['x-decorator-props']?.layoutDirection ?? 'column'; + const field = useField(); + const fieldSchema = useFieldSchema(); + const { layoutDirection = 'column' } = useDataBlockProps(); + const initialValue = fieldSchema['x-decorator-props']?.layoutDirection || layoutDirection; + return { title: t('Layout Direction'), options: [ @@ -239,25 +243,28 @@ export const fieldSettingsFormItem = new SchemaSettings({ { label: t('Column'), value: 'column' }, ], value: initialValue, - onChange(v) { - const schema: ISchema = { - ['x-uid']: fieldSchema['x-uid'], + onChange(directionVal = 'column') { + const oldStyle = fieldSchema['x-decorator-props']?.style; + const newStyle = { + ...oldStyle, + display: 'flex', + flexDirection: directionVal, + alignItems: `${directionVal === 'row' ? 'baseline' : 'unset'}`, }; - const styleValue = { - layoutDirection: v ?? 'column', - style: { - display: 'flex', - flexDirection: `${v === 'row' ? 'row' : 'column'}`, - alignItems: 'baseline', - }, - }; - - _.set(fieldSchema, 'x-decorator-props', styleValue); - _.set(schema, 'x-decorator-props', styleValue); + _.set(field, 'decoratorProps.style', newStyle); + _.set(field, 'decoratorProps.layoutDirection', directionVal); dn.emit('patch', { - schema, + schema: { + 'x-uid': fieldSchema['x-uid'], + + 'x-decorator-props': { + ...fieldSchema['x-decorator-props'], + layoutDirection: directionVal, + style: newStyle, + }, + }, }); dn.refresh(); diff --git a/packages/core/client/src/modules/blocks/data-blocks/grid-card/createGridCardBlockUISchema.ts b/packages/core/client/src/modules/blocks/data-blocks/grid-card/createGridCardBlockUISchema.ts index c355742f6..10d739957 100644 --- a/packages/core/client/src/modules/blocks/data-blocks/grid-card/createGridCardBlockUISchema.ts +++ b/packages/core/client/src/modules/blocks/data-blocks/grid-card/createGridCardBlockUISchema.ts @@ -30,6 +30,7 @@ export const createGridCardBlockUISchema = (options: { }, runWhenParamsChanged: true, rowKey, + layoutDirection: 'column', }, 'x-component': 'BlockItem', 'x-use-component-props': 'useGridCardBlockItemProps', diff --git a/packages/core/client/src/modules/blocks/data-blocks/grid-card/gridCardBlockSettings.ts b/packages/core/client/src/modules/blocks/data-blocks/grid-card/gridCardBlockSettings.ts index b77312795..b7971a657 100644 --- a/packages/core/client/src/modules/blocks/data-blocks/grid-card/gridCardBlockSettings.ts +++ b/packages/core/client/src/modules/blocks/data-blocks/grid-card/gridCardBlockSettings.ts @@ -251,6 +251,32 @@ export const gridCardBlockSettings = new SchemaSettings({ }; }, }, + { + name: 'LayoutDirection', + type: 'select', + useComponentProps() { + const { t } = useTranslation(); + const fieldSchema = useFieldSchema(); + const field = useField(); + const { dn } = useDesignable(); + return { + title: t('Layout Direction'), + value: field.decoratorProps?.layoutDirection || 'column', + options: [{ value: 'row' }, { value: 'column' }], + onChange: (layoutDirection) => { + _.set(fieldSchema, 'x-decorator-props.layoutDirection', layoutDirection); + _.set(field, 'decoratorProps.layoutDirection', layoutDirection); + + dn.emit('patch', { + schema: { + ['x-uid']: fieldSchema['x-uid'], + 'x-decorator-props': fieldSchema['x-decorator-props'], + }, + }); + }, + }; + }, + }, { name: 'ConvertReferenceToDuplicate', Component: SchemaSettingsTemplate, diff --git a/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx b/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx index a0e5496f3..81921005c 100644 --- a/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx +++ b/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx @@ -16,16 +16,19 @@ import { FilterFormDesigner } from './FormItem.FilterFormDesigner'; import { useEnsureOperatorsValid } from './SchemaSettingOptions'; import useLazyLoadDisplayAssociationFieldsOfForm from './hooks/useLazyLoadDisplayAssociationFieldsOfForm'; import useParseDefaultValue from './hooks/useParseDefaultValue'; -import { CollectionFieldProvider } from '../../../data-source'; +import { CollectionFieldProvider, useDataBlockProps } from '../../../data-source'; export const FormItem: any = observer( (props: any) => { - useEnsureOperatorsValid(); + const { layoutDirection: selfLayoutDirection } = props; const field = useField(); const schema = useFieldSchema(); const contextVariable = useContextVariable(); const variables = useVariables(); const { addActiveFieldName } = useFormActiveFields() || {}; + const { layoutDirection } = useDataBlockProps(); + + const finishLayoutDirection = selfLayoutDirection ?? layoutDirection; useEffect(() => { variables?.registerVariable(contextVariable); @@ -40,6 +43,7 @@ export const FormItem: any = observer( }, [addActiveFieldName, schema.name]); const showTitle = schema['x-decorator-props']?.showTitle ?? true; + const extra = useMemo(() => { return typeof field.description === 'string' ? (