fix: core, layoutDirection (#1013)

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

packages/core/client/src/data-source/data-block/DataBlockProvider.tsx

@@ -8,6 +8,7 @@ import { AssociationProvider, CollectionManagerProvider, CollectionOptions, Coll
 import { CollectionRecord } from '../collection-record';
 import { BlockRequestProvider } from './DataBlockRequestProvider';
 import { DataBlockResourceProvider } from './DataBlockResourceProvider';
+import { ConfigSettingProvider } from './context/ConfigSetting.provider';
 
 export interface AllDataBlockProps {
   collection: string | CollectionOptions;
@@ -135,7 +136,11 @@ export const AssociationOrCollectionProvider = (props: {
 
 export const DataBlockProvider: FC<DataBlockProviderProps & { children?: ReactNode }> = withDynamicSchemaProps(
   (props) => {
-    const { collection, association, dataSource, children, ...resets } = props as Partial<AllDataBlockProps>;
+    const { collection, association, dataSource, children, layoutDirection, ...resets } =
+      props as Partial<AllDataBlockProps>;
+    const configSetting = {
+      layoutDirection,
+    };
     const { dn } = useDesignable();
 
     return (
@@ -145,15 +150,17 @@ export const DataBlockProvider: FC<DataBlockProviderProps & { children?: ReactNo
           props: { ...resets, collection, association, dataSource } as AllDataBlockProps,
         }}
       >
-        <CollectionManagerProvider dataSource={dataSource}>
+        <ConfigSettingProvider value={configSetting}>
-          <AssociationOrCollectionProvider collection={collection} association={association}>
+          <CollectionManagerProvider dataSource={dataSource}>
-            <ACLCollectionProvider>
+            <AssociationOrCollectionProvider collection={collection} association={association}>
-              <DataBlockResourceProvider>
+              <ACLCollectionProvider>
-                <BlockRequestProvider>{children}</BlockRequestProvider>
+                <DataBlockResourceProvider>
-              </DataBlockResourceProvider>
+                  <BlockRequestProvider>{children}</BlockRequestProvider>
-            </ACLCollectionProvider>
+                </DataBlockResourceProvider>
-          </AssociationOrCollectionProvider>
+              </ACLCollectionProvider>
-        </CollectionManagerProvider>
+            </AssociationOrCollectionProvider>
+          </CollectionManagerProvider>
+        </ConfigSettingProvider>
       </DataBlockContext.Provider>
     );
   },

packages/core/client/src/data-source/data-block/context/ConfigSetting.provider.tsx

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react';
+
+interface ConfigSettingContextType {
+  // laydirection, 定义区块下, 表单字段的显示方向, 横向排列还是纵向排列, 默认纵向
+  layoutDirection?: 'row' | 'column';
+}
+
+// NOTE: 专门用于向下传递 Grid Block 的配置信息
+// 用于写 Laydirection 全区块配置, 发现传递路径要四五层左右, 转而用 context 方法
+const ContextConfigSetting = createContext<ConfigSettingContextType>({
+  layoutDirection: 'column',
+});
+
+export const ConfigSettingProvider = ContextConfigSetting.Provider;
+export const ConfigSettingConsumer = ContextConfigSetting.Consumer;
+
+export function useContextConfigSetting() {
+  return useContext(ContextConfigSetting);
+}

packages/core/client/src/data-source/data-block/index.ts

@@ -1,3 +1,4 @@
 export * from './DataBlockResourceProvider';
 export * from './DataBlockRequestProvider';
 export * from './DataBlockProvider';
+export * from './context/ConfigSetting.provider';

packages/core/client/src/modules/blocks/data-blocks/form/fieldSettingsFormItem.tsx

@@ -15,8 +15,7 @@ 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 { useContextConfigSettingGrid } from '../grid-card/context/ConfigSettingGrid.provider';
+import { useContextConfigSetting } from '@tachybase/client';
-import { useDataBlockProps } from '@tachybase/client';
 
 export const fieldSettingsFormItem = new SchemaSettings({
   name: 'fieldSettings:FormItem',
@@ -233,7 +232,7 @@ export const fieldSettingsFormItem = new SchemaSettings({
               const { dn } = useDesignable();
               const field = useField();
               const fieldSchema = useFieldSchema();
-              const { layoutDirection = 'column' } = useDataBlockProps();
+              const { layoutDirection = 'column' } = useContextConfigSetting();
               const initialValue = fieldSchema['x-decorator-props']?.layoutDirection || layoutDirection;
 
               return {

packages/core/client/src/schema-component/antd/form-item/FormItem.tsx

@@ -16,7 +16,7 @@ import { FilterFormDesigner } from './FormItem.FilterFormDesigner';
 import { useEnsureOperatorsValid } from './SchemaSettingOptions';
 import useLazyLoadDisplayAssociationFieldsOfForm from './hooks/useLazyLoadDisplayAssociationFieldsOfForm';
 import useParseDefaultValue from './hooks/useParseDefaultValue';
-import { CollectionFieldProvider, useDataBlockProps } from '../../../data-source';
+import { CollectionFieldProvider, useContextConfigSetting } from '../../../data-source';
 
 export const FormItem: any = observer(
   (props: any) => {
@@ -26,7 +26,7 @@ export const FormItem: any = observer(
     const contextVariable = useContextVariable();
     const variables = useVariables();
     const { addActiveFieldName } = useFormActiveFields() || {};
-    const { layoutDirection } = useDataBlockProps();
+    const { layoutDirection } = useContextConfigSetting();
 
     const finishLayoutDirection = selfLayoutDirection ?? layoutDirection;