ruiling/tachybase_todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: support layout direction

Browse Source 
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>
This commit is contained in:
bai.zixv 2024-05-17 20:51:21 +08:00 committed by sealday
parent b5c518fd4b
commit a081858aba
5 changed files with 70 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/little-roses-punch.md Normal file
View File

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

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

@ -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'],
};
const styleValue = {
layoutDirection: v ?? 'column',
style: {
onChange(directionVal = 'column') {
const oldStyle = fieldSchema['x-decorator-props']?.style;
const newStyle = {
...oldStyle,
display: 'flex',
flexDirection: `${v === 'row' ? 'row' : 'column'}`,
alignItems: 'baseline',
},
flexDirection: directionVal,
alignItems: `${directionVal === 'row' ? 'baseline' : 'unset'}`,
};
_.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();

1
packages/core/client/src/modules/blocks/data-blocks/grid-card/createGridCardBlockUISchema.ts
View File

@ -30,6 +30,7 @@ export const createGridCardBlockUISchema = (options: {
},
runWhenParamsChanged: true,
rowKey,
layoutDirection: 'column',
},
'x-component': 'BlockItem',
'x-use-component-props': 'useGridCardBlockItemProps',

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

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

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

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