feat: support layout direction

Reviewed-on: daoyoucloud/tachybase#1006
Reviewed-by: sealday <zhanglin@daoyoucloud.com>
Co-authored-by: bai.zixv <bai.zixv@foxmail.com>
Co-committed-by: bai.zixv <bai.zixv@foxmail.com>

.changeset/little-roses-punch.md

@@ -0,0 +1,5 @@
+---
+"@tachybase/client": patch
+---
+
+grid card, layoutDirection

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) {
+                onChange(directionVal = 'column') {
-                  const schema: ISchema = {
+                  const oldStyle = fieldSchema['x-decorator-props']?.style;
-                    ['x-uid']: fieldSchema['x-uid'],
+                  const newStyle = {
+                    ...oldStyle,
+                    display: 'flex',
+                    flexDirection: directionVal,
+                    alignItems: `${directionVal === 'row' ? 'baseline' : 'unset'}`,
                   };
 
-                  const styleValue = {
+                  _.set(field, 'decoratorProps.style', newStyle);
-                    layoutDirection: v ?? 'column',
+                  _.set(field, 'decoratorProps.layoutDirection', directionVal);
-                    style: {
-                      display: 'flex',
-                      flexDirection: `${v === 'row' ? 'row' : 'column'}`,
-                      alignItems: 'baseline',
-                    },
-                  };
-
-                  _.set(fieldSchema, 'x-decorator-props', styleValue);
-                  _.set(schema, 'x-decorator-props', styleValue);
 
                   dn.emit('patch', {
-                    schema,
+                    schema: {
+                      'x-uid': fieldSchema['x-uid'],
+
+                      'x-decorator-props': {
+                        ...fieldSchema['x-decorator-props'],
+                        layoutDirection: directionVal,
+                        style: newStyle,
+                      },
+                    },
                   });
 
                   dn.refresh();

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',

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,

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<Field>();
     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' ? (
         <div
@@ -65,6 +69,13 @@ export const FormItem: any = observer(
             }
           `]: showTitle === false,
         },
+        {
+          [css`
+            display: flex;
+            flex-direction: row;
+            align-items: baseline;
+          `]: finishLayoutDirection === 'row',
+        },
       );
     }, [showTitle]);