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 isPopupAction = ['create', 'update', 'view'].includes(fieldSchema['x-action'] || '');
|
||||
return (
|
||||
<GeneralSchemaDesigner {...props}>
|
||||
<GeneralSchemaDesigner {...props} disableInitializer>
|
||||
<SchemaSettings.ModalItem
|
||||
title={t('Edit button')}
|
||||
schema={
|
||||
|
@ -31,7 +31,7 @@ export const FilterActionDesigner = (props) => {
|
||||
const { t } = useTranslation();
|
||||
const nonfilterable = fieldSchema?.['x-component-props']?.nonfilterable || [];
|
||||
return (
|
||||
<GeneralSchemaDesigner {...props}>
|
||||
<GeneralSchemaDesigner {...props} disableInitializer>
|
||||
<SchemaSettings.ItemGroup title={t('Filterable fields')}>
|
||||
{fields.map((field) => {
|
||||
const checked = !nonfilterable.includes(field.name);
|
||||
|
@ -9,6 +9,7 @@ import { DndContext } from '../../common/dnd-context';
|
||||
|
||||
const GridRowContext = createContext(null);
|
||||
const GridColContext = createContext(null);
|
||||
const GridContext = createContext<any>({});
|
||||
|
||||
const ColDivider = (props) => {
|
||||
const { isOver, setNodeRef } = useDroppable({
|
||||
@ -147,6 +148,10 @@ const DndWrapper = (props) => {
|
||||
return <DndContext {...props.dndContext}>{props.children}</DndContext>;
|
||||
};
|
||||
|
||||
export const useGridContext = () => {
|
||||
return useContext(GridContext);
|
||||
};
|
||||
|
||||
export const Grid: any = observer((props: any) => {
|
||||
const field = useField();
|
||||
const fieldSchema = useFieldSchema();
|
||||
@ -154,6 +159,7 @@ export const Grid: any = observer((props: any) => {
|
||||
const addr = field.address.toString();
|
||||
const rows = useRowProperties();
|
||||
return (
|
||||
<GridContext.Provider value={{ fieldSchema, renderSchemaInitializer: render }}>
|
||||
<div className={'nb-grid'} style={{ position: 'relative' }}>
|
||||
<DndWrapper dndContext={props.dndContext}>
|
||||
<RowDivider
|
||||
@ -174,6 +180,7 @@ export const Grid: any = observer((props: any) => {
|
||||
</DndWrapper>
|
||||
{render()}
|
||||
</div>
|
||||
</GridContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
|
@ -32,7 +32,7 @@ export const TableColumnDesigner = (props) => {
|
||||
fieldSchema?.['x-component-props']?.['fieldNames'] || uiSchema?.['x-component-props']?.['fieldNames'];
|
||||
const options = useLabelFields(collectionField?.target);
|
||||
return (
|
||||
<GeneralSchemaDesigner>
|
||||
<GeneralSchemaDesigner disableInitializer>
|
||||
<SchemaSettings.ModalItem
|
||||
title={t('Custom column title')}
|
||||
schema={
|
||||
|
@ -34,7 +34,7 @@ export const TableSelectorDesigner = () => {
|
||||
const template = useSchemaTemplate();
|
||||
const { dragSort } = field.decoratorProps;
|
||||
return (
|
||||
<GeneralSchemaDesigner template={template} title={title || name}>
|
||||
<GeneralSchemaDesigner template={template} title={title || name} disableInitializer>
|
||||
<SchemaSettings.ModalItem
|
||||
title={t('Set the data scope')}
|
||||
schema={
|
||||
|
@ -10,7 +10,7 @@ export const TabsDesigner = () => {
|
||||
const { dn } = useDesignable();
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<GeneralSchemaDesigner>
|
||||
<GeneralSchemaDesigner disableInitializer>
|
||||
<SchemaSettings.ModalItem
|
||||
title={t('Edit')}
|
||||
schema={
|
||||
|
@ -9,7 +9,7 @@ export const BlockInitializers = {
|
||||
{
|
||||
key: 'dataBlocks',
|
||||
type: 'itemGroup',
|
||||
title: 'Data blocks',
|
||||
title: '{{t("Data blocks")}}',
|
||||
children: [
|
||||
{
|
||||
key: 'table',
|
||||
|
@ -6,6 +6,7 @@ import { gridRowColWrap, useFormItemInitializerFields } from '../utils';
|
||||
// 表单里配置字段
|
||||
export const FormItemInitializers = (props: any) => {
|
||||
const { t } = useTranslation();
|
||||
const { insertPosition, component } = props;
|
||||
return (
|
||||
<SchemaInitializer.Button
|
||||
wrap={gridRowColWrap}
|
||||
@ -35,8 +36,9 @@ export const FormItemInitializers = (props: any) => {
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
{t('Configure fields')}
|
||||
</SchemaInitializer.Button>
|
||||
insertPosition={insertPosition}
|
||||
component={component}
|
||||
title={component ? null : t('Configure fields')}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
@ -5,6 +5,7 @@ import { gridRowColWrap, useFormItemInitializerFields } from '../utils';
|
||||
|
||||
export const ReadPrettyFormItemInitializers = (props: any) => {
|
||||
const { t } = useTranslation();
|
||||
const { insertPosition, component } = props;
|
||||
return (
|
||||
<SchemaInitializer.Button
|
||||
wrap={gridRowColWrap}
|
||||
@ -34,8 +35,9 @@ export const ReadPrettyFormItemInitializers = (props: any) => {
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
{t('Configure fields')}
|
||||
</SchemaInitializer.Button>
|
||||
insertPosition={insertPosition}
|
||||
component={component}
|
||||
title={component ? null : t('Configure fields')}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
@ -20,10 +20,13 @@ const useRelationFields = () => {
|
||||
|
||||
export const RecordBlockInitializers = (props: any) => {
|
||||
const { t } = useTranslation();
|
||||
const { insertPosition, component } = props;
|
||||
return (
|
||||
<SchemaInitializer.Button
|
||||
wrap={gridRowColWrap}
|
||||
title={t('Add block')}
|
||||
insertPosition={insertPosition}
|
||||
component={component}
|
||||
title={component ? null : t('Add block')}
|
||||
icon={'PlusOutlined'}
|
||||
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 { useField, useFieldSchema } from '@formily/react';
|
||||
import { Space } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { DragHandler, useCompile, useDesignable } from '../schema-component';
|
||||
import { DragHandler, useCompile, useDesignable, useGridContext } from '../schema-component';
|
||||
import { SchemaSettings } from './SchemaSettings';
|
||||
|
||||
const titleCss = css`
|
||||
@ -31,7 +31,7 @@ const titleCss = css`
|
||||
`;
|
||||
|
||||
export const GeneralSchemaDesigner = (props: any) => {
|
||||
const { title, template, draggable = true } = props;
|
||||
const { disableInitializer, title, template, draggable = true } = props;
|
||||
const { dn, designable } = useDesignable();
|
||||
const field = useField();
|
||||
const { t } = useTranslation();
|
||||
@ -45,14 +45,21 @@ export const GeneralSchemaDesigner = (props: any) => {
|
||||
if (!designable) {
|
||||
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 (
|
||||
<div className={'general-schema-designer'}>
|
||||
{title && (
|
||||
<div className={classNames('general-schema-designer-title', titleCss)}>
|
||||
<Space size={2}>
|
||||
<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>
|
||||
</div>
|
||||
)}
|
||||
@ -63,6 +70,10 @@ export const GeneralSchemaDesigner = (props: any) => {
|
||||
<DragOutlined />
|
||||
</DragHandler>
|
||||
)}
|
||||
{!disableInitializer && ctx?.renderSchemaInitializer?.({
|
||||
insertPosition: 'afterEnd',
|
||||
component: <PlusOutlined style={{ cursor: 'pointer', fontSize: 12 }} />,
|
||||
})}
|
||||
<SchemaSettings title={<MenuOutlined style={{ cursor: 'pointer', fontSize: 12 }} />} {...schemaSettingsProps}>
|
||||
{props.children}
|
||||
</SchemaSettings>
|
||||
|
Loading…
Reference in New Issue
Block a user