fix: add schema initializer icon
This commit is contained in:
parent
01c7c95369
commit
42438625d5
@ -11,7 +11,7 @@ export const ActionDesigner = (props) => {
|
|||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const isPopupAction = ['create', 'update', 'view'].includes(fieldSchema['x-action'] || '');
|
const isPopupAction = ['create', 'update', 'view'].includes(fieldSchema['x-action'] || '');
|
||||||
return (
|
return (
|
||||||
<GeneralSchemaDesigner {...props}>
|
<GeneralSchemaDesigner {...props} disableInitializer>
|
||||||
<SchemaSettings.ModalItem
|
<SchemaSettings.ModalItem
|
||||||
title={t('Edit button')}
|
title={t('Edit button')}
|
||||||
schema={
|
schema={
|
||||||
|
@ -31,7 +31,7 @@ export const FilterActionDesigner = (props) => {
|
|||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const nonfilterable = fieldSchema?.['x-component-props']?.nonfilterable || [];
|
const nonfilterable = fieldSchema?.['x-component-props']?.nonfilterable || [];
|
||||||
return (
|
return (
|
||||||
<GeneralSchemaDesigner {...props}>
|
<GeneralSchemaDesigner {...props} disableInitializer>
|
||||||
<SchemaSettings.ItemGroup title={t('Filterable fields')}>
|
<SchemaSettings.ItemGroup title={t('Filterable fields')}>
|
||||||
{fields.map((field) => {
|
{fields.map((field) => {
|
||||||
const checked = !nonfilterable.includes(field.name);
|
const checked = !nonfilterable.includes(field.name);
|
||||||
|
@ -9,6 +9,7 @@ import { DndContext } from '../../common/dnd-context';
|
|||||||
|
|
||||||
const GridRowContext = createContext(null);
|
const GridRowContext = createContext(null);
|
||||||
const GridColContext = createContext(null);
|
const GridColContext = createContext(null);
|
||||||
|
const GridContext = createContext<any>({});
|
||||||
|
|
||||||
const ColDivider = (props) => {
|
const ColDivider = (props) => {
|
||||||
const { isOver, setNodeRef } = useDroppable({
|
const { isOver, setNodeRef } = useDroppable({
|
||||||
@ -147,6 +148,10 @@ const DndWrapper = (props) => {
|
|||||||
return <DndContext {...props.dndContext}>{props.children}</DndContext>;
|
return <DndContext {...props.dndContext}>{props.children}</DndContext>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const useGridContext = () => {
|
||||||
|
return useContext(GridContext);
|
||||||
|
};
|
||||||
|
|
||||||
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();
|
||||||
@ -154,26 +159,28 @@ export const Grid: any = observer((props: any) => {
|
|||||||
const addr = field.address.toString();
|
const addr = field.address.toString();
|
||||||
const rows = useRowProperties();
|
const rows = useRowProperties();
|
||||||
return (
|
return (
|
||||||
<div className={'nb-grid'} style={{ position: 'relative' }}>
|
<GridContext.Provider value={{ fieldSchema, renderSchemaInitializer: render }}>
|
||||||
<DndWrapper dndContext={props.dndContext}>
|
<div className={'nb-grid'} style={{ position: 'relative' }}>
|
||||||
<RowDivider
|
<DndWrapper dndContext={props.dndContext}>
|
||||||
id={`${addr}_0`}
|
<RowDivider
|
||||||
data={{ wrapSchema: wrapRowSchema, insertAdjacent: 'afterBegin', schema: fieldSchema }}
|
id={`${addr}_0`}
|
||||||
/>
|
data={{ wrapSchema: wrapRowSchema, insertAdjacent: 'afterBegin', schema: fieldSchema }}
|
||||||
{rows.map((schema, index) => {
|
/>
|
||||||
return (
|
{rows.map((schema, index) => {
|
||||||
<React.Fragment key={schema.name}>
|
return (
|
||||||
<RecursionField name={schema.name} schema={schema} />
|
<React.Fragment key={schema.name}>
|
||||||
<RowDivider
|
<RecursionField name={schema.name} schema={schema} />
|
||||||
id={`${addr}_${index + 1}`}
|
<RowDivider
|
||||||
data={{ wrapSchema: wrapRowSchema, insertAdjacent: 'afterEnd', schema }}
|
id={`${addr}_${index + 1}`}
|
||||||
/>
|
data={{ wrapSchema: wrapRowSchema, insertAdjacent: 'afterEnd', schema }}
|
||||||
</React.Fragment>
|
/>
|
||||||
);
|
</React.Fragment>
|
||||||
})}
|
);
|
||||||
</DndWrapper>
|
})}
|
||||||
{render()}
|
</DndWrapper>
|
||||||
</div>
|
{render()}
|
||||||
|
</div>
|
||||||
|
</GridContext.Provider>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -32,7 +32,7 @@ export const TableColumnDesigner = (props) => {
|
|||||||
fieldSchema?.['x-component-props']?.['fieldNames'] || uiSchema?.['x-component-props']?.['fieldNames'];
|
fieldSchema?.['x-component-props']?.['fieldNames'] || uiSchema?.['x-component-props']?.['fieldNames'];
|
||||||
const options = useLabelFields(collectionField?.target);
|
const options = useLabelFields(collectionField?.target);
|
||||||
return (
|
return (
|
||||||
<GeneralSchemaDesigner>
|
<GeneralSchemaDesigner disableInitializer>
|
||||||
<SchemaSettings.ModalItem
|
<SchemaSettings.ModalItem
|
||||||
title={t('Custom column title')}
|
title={t('Custom column title')}
|
||||||
schema={
|
schema={
|
||||||
|
@ -34,7 +34,7 @@ export const TableSelectorDesigner = () => {
|
|||||||
const template = useSchemaTemplate();
|
const template = useSchemaTemplate();
|
||||||
const { dragSort } = field.decoratorProps;
|
const { dragSort } = field.decoratorProps;
|
||||||
return (
|
return (
|
||||||
<GeneralSchemaDesigner template={template} title={title || name}>
|
<GeneralSchemaDesigner template={template} title={title || name} disableInitializer>
|
||||||
<SchemaSettings.ModalItem
|
<SchemaSettings.ModalItem
|
||||||
title={t('Set the data scope')}
|
title={t('Set the data scope')}
|
||||||
schema={
|
schema={
|
||||||
|
@ -10,7 +10,7 @@ export const TabsDesigner = () => {
|
|||||||
const { dn } = useDesignable();
|
const { dn } = useDesignable();
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
return (
|
return (
|
||||||
<GeneralSchemaDesigner>
|
<GeneralSchemaDesigner disableInitializer>
|
||||||
<SchemaSettings.ModalItem
|
<SchemaSettings.ModalItem
|
||||||
title={t('Edit')}
|
title={t('Edit')}
|
||||||
schema={
|
schema={
|
||||||
|
@ -9,7 +9,7 @@ export const BlockInitializers = {
|
|||||||
{
|
{
|
||||||
key: 'dataBlocks',
|
key: 'dataBlocks',
|
||||||
type: 'itemGroup',
|
type: 'itemGroup',
|
||||||
title: 'Data blocks',
|
title: '{{t("Data blocks")}}',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
key: 'table',
|
key: 'table',
|
||||||
|
@ -6,6 +6,7 @@ import { gridRowColWrap, useFormItemInitializerFields } from '../utils';
|
|||||||
// 表单里配置字段
|
// 表单里配置字段
|
||||||
export const FormItemInitializers = (props: any) => {
|
export const FormItemInitializers = (props: any) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
const { insertPosition, component } = props;
|
||||||
return (
|
return (
|
||||||
<SchemaInitializer.Button
|
<SchemaInitializer.Button
|
||||||
wrap={gridRowColWrap}
|
wrap={gridRowColWrap}
|
||||||
@ -35,8 +36,9 @@ export const FormItemInitializers = (props: any) => {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
>
|
insertPosition={insertPosition}
|
||||||
{t('Configure fields')}
|
component={component}
|
||||||
</SchemaInitializer.Button>
|
title={component ? null : t('Configure fields')}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -5,6 +5,7 @@ import { gridRowColWrap, useFormItemInitializerFields } from '../utils';
|
|||||||
|
|
||||||
export const ReadPrettyFormItemInitializers = (props: any) => {
|
export const ReadPrettyFormItemInitializers = (props: any) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
const { insertPosition, component } = props;
|
||||||
return (
|
return (
|
||||||
<SchemaInitializer.Button
|
<SchemaInitializer.Button
|
||||||
wrap={gridRowColWrap}
|
wrap={gridRowColWrap}
|
||||||
@ -34,8 +35,9 @@ export const ReadPrettyFormItemInitializers = (props: any) => {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
>
|
insertPosition={insertPosition}
|
||||||
{t('Configure fields')}
|
component={component}
|
||||||
</SchemaInitializer.Button>
|
title={component ? null : t('Configure fields')}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -20,10 +20,13 @@ const useRelationFields = () => {
|
|||||||
|
|
||||||
export const RecordBlockInitializers = (props: any) => {
|
export const RecordBlockInitializers = (props: any) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
const { insertPosition, component } = props;
|
||||||
return (
|
return (
|
||||||
<SchemaInitializer.Button
|
<SchemaInitializer.Button
|
||||||
wrap={gridRowColWrap}
|
wrap={gridRowColWrap}
|
||||||
title={t('Add block')}
|
insertPosition={insertPosition}
|
||||||
|
component={component}
|
||||||
|
title={component ? null : t('Add block')}
|
||||||
icon={'PlusOutlined'}
|
icon={'PlusOutlined'}
|
||||||
items={[
|
items={[
|
||||||
{
|
{
|
||||||
|
@ -1,11 +1,11 @@
|
|||||||
import { DragOutlined, MenuOutlined } from '@ant-design/icons';
|
import { DragOutlined, MenuOutlined, PlusOutlined } from '@ant-design/icons';
|
||||||
import { css } from '@emotion/css';
|
import { css } from '@emotion/css';
|
||||||
import { useField, useFieldSchema } from '@formily/react';
|
import { useField, useFieldSchema } from '@formily/react';
|
||||||
import { Space } from 'antd';
|
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 } from '../schema-component';
|
import { DragHandler, useCompile, useDesignable, useGridContext } from '../schema-component';
|
||||||
import { SchemaSettings } from './SchemaSettings';
|
import { SchemaSettings } from './SchemaSettings';
|
||||||
|
|
||||||
const titleCss = css`
|
const titleCss = css`
|
||||||
@ -31,7 +31,7 @@ const titleCss = css`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
export const GeneralSchemaDesigner = (props: any) => {
|
export const GeneralSchemaDesigner = (props: any) => {
|
||||||
const { title, template, draggable = true } = props;
|
const { disableInitializer, title, template, draggable = true } = props;
|
||||||
const { dn, designable } = useDesignable();
|
const { dn, designable } = useDesignable();
|
||||||
const field = useField();
|
const field = useField();
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
@ -45,14 +45,21 @@ export const GeneralSchemaDesigner = (props: any) => {
|
|||||||
if (!designable) {
|
if (!designable) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
const templateName = ['FormItem', 'ReadPrettyFormItem'].includes(template?.componentName) ? `${template?.name} ${t('(Fields only)')}` : template?.name;
|
const ctx = useGridContext();
|
||||||
|
const templateName = ['FormItem', 'ReadPrettyFormItem'].includes(template?.componentName)
|
||||||
|
? `${template?.name} ${t('(Fields only)')}`
|
||||||
|
: template?.name;
|
||||||
return (
|
return (
|
||||||
<div className={'general-schema-designer'}>
|
<div className={'general-schema-designer'}>
|
||||||
{title && (
|
{title && (
|
||||||
<div className={classNames('general-schema-designer-title', titleCss)}>
|
<div className={classNames('general-schema-designer-title', titleCss)}>
|
||||||
<Space size={2}>
|
<Space size={2}>
|
||||||
<span className={'title-tag'}>{compile(title)}</span>
|
<span className={'title-tag'}>{compile(title)}</span>
|
||||||
{template && <span className={'title-tag'}>{t('Reference template')}: {templateName || t('Untitled')}</span>}
|
{template && (
|
||||||
|
<span className={'title-tag'}>
|
||||||
|
{t('Reference template')}: {templateName || t('Untitled')}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
</Space>
|
</Space>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@ -63,6 +70,10 @@ export const GeneralSchemaDesigner = (props: any) => {
|
|||||||
<DragOutlined />
|
<DragOutlined />
|
||||||
</DragHandler>
|
</DragHandler>
|
||||||
)}
|
)}
|
||||||
|
{!disableInitializer && ctx?.renderSchemaInitializer?.({
|
||||||
|
insertPosition: 'afterEnd',
|
||||||
|
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>
|
||||||
|
Loading…
Reference in New Issue
Block a user