fix: use wrapper when greater than one column

This commit is contained in:
chenos 2022-05-01 00:04:59 +08:00
parent 69da6a340f
commit ef7cc8c2ff
2 changed files with 13 additions and 5 deletions

View File

@ -152,6 +152,10 @@ export const useGridContext = () => {
return useContext(GridContext); return useContext(GridContext);
}; };
export const useGridRowContext = () => {
return useContext(GridRowContext);
}
export const Grid: any = observer((props: any) => { export const Grid: any = observer((props: any) => {
const field = useField(); const field = useField();
const fieldSchema = useFieldSchema(); const fieldSchema = useFieldSchema();

View File

@ -5,7 +5,8 @@ import { Space } from 'antd';
import classNames from 'classnames'; import classNames from 'classnames';
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { DragHandler, useCompile, useDesignable, useGridContext } from '../schema-component'; import { DragHandler, useCompile, useDesignable, useGridContext, useGridRowContext } from '../schema-component';
import { gridRowColWrap } from '../schema-initializer/utils';
import { SchemaSettings } from './SchemaSettings'; import { SchemaSettings } from './SchemaSettings';
const titleCss = css` const titleCss = css`
@ -45,6 +46,7 @@ export const GeneralSchemaDesigner = (props: any) => {
if (!designable) { if (!designable) {
return null; return null;
} }
const rowCtx = useGridRowContext();
const ctx = useGridContext(); const ctx = useGridContext();
const templateName = ['FormItem', 'ReadPrettyFormItem'].includes(template?.componentName) const templateName = ['FormItem', 'ReadPrettyFormItem'].includes(template?.componentName)
? `${template?.name} ${t('(Fields only)')}` ? `${template?.name} ${t('(Fields only)')}`
@ -70,10 +72,12 @@ export const GeneralSchemaDesigner = (props: any) => {
<DragOutlined /> <DragOutlined />
</DragHandler> </DragHandler>
)} )}
{!disableInitializer && ctx?.renderSchemaInitializer?.({ {!disableInitializer &&
insertPosition: 'afterEnd', ctx?.renderSchemaInitializer?.({
component: <PlusOutlined style={{ cursor: 'pointer', fontSize: 12 }} />, insertPosition: 'afterEnd',
})} wrap: rowCtx?.cols?.length > 1 ? undefined : gridRowColWrap,
component: <PlusOutlined style={{ cursor: 'pointer', fontSize: 12 }} />,
})}
<SchemaSettings title={<MenuOutlined style={{ cursor: 'pointer', fontSize: 12 }} />} {...schemaSettingsProps}> <SchemaSettings title={<MenuOutlined style={{ cursor: 'pointer', fontSize: 12 }} />} {...schemaSettingsProps}>
{props.children} {props.children}
</SchemaSettings> </SchemaSettings>