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>
This commit is contained in:
bai.zixv 2024-05-18 04:30:48 +08:00 committed by sealday
parent 1e5cfcc91f
commit 519bcc703e
5 changed files with 41 additions and 15 deletions

View File

@ -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}>
<AssociationOrCollectionProvider collection={collection} association={association}>
<ACLCollectionProvider>
<DataBlockResourceProvider>
<BlockRequestProvider>{children}</BlockRequestProvider>
</DataBlockResourceProvider>
</ACLCollectionProvider>
</AssociationOrCollectionProvider>
</CollectionManagerProvider>
<ConfigSettingProvider value={configSetting}>
<CollectionManagerProvider dataSource={dataSource}>
<AssociationOrCollectionProvider collection={collection} association={association}>
<ACLCollectionProvider>
<DataBlockResourceProvider>
<BlockRequestProvider>{children}</BlockRequestProvider>
</DataBlockResourceProvider>
</ACLCollectionProvider>
</AssociationOrCollectionProvider>
</CollectionManagerProvider>
</ConfigSettingProvider>
</DataBlockContext.Provider>
);
},

View File

@ -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);
}

View File

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

View File

@ -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 { useDataBlockProps } from '@tachybase/client';
import { useContextConfigSetting } 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 {

View File

@ -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;