fix: add schema initializer icon

This commit is contained in:
chenos 2022-04-30 22:43:36 +08:00
parent 01c7c95369
commit 42438625d5
11 changed files with 63 additions and 38 deletions

View File

@ -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={

View File

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

View File

@ -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,26 +159,28 @@ export const Grid: any = observer((props: any) => {
const addr = field.address.toString();
const rows = useRowProperties();
return (
<div className={'nb-grid'} style={{ position: 'relative' }}>
<DndWrapper dndContext={props.dndContext}>
<RowDivider
id={`${addr}_0`}
data={{ wrapSchema: wrapRowSchema, insertAdjacent: 'afterBegin', schema: fieldSchema }}
/>
{rows.map((schema, index) => {
return (
<React.Fragment key={schema.name}>
<RecursionField name={schema.name} schema={schema} />
<RowDivider
id={`${addr}_${index + 1}`}
data={{ wrapSchema: wrapRowSchema, insertAdjacent: 'afterEnd', schema }}
/>
</React.Fragment>
);
})}
</DndWrapper>
{render()}
</div>
<GridContext.Provider value={{ fieldSchema, renderSchemaInitializer: render }}>
<div className={'nb-grid'} style={{ position: 'relative' }}>
<DndWrapper dndContext={props.dndContext}>
<RowDivider
id={`${addr}_0`}
data={{ wrapSchema: wrapRowSchema, insertAdjacent: 'afterBegin', schema: fieldSchema }}
/>
{rows.map((schema, index) => {
return (
<React.Fragment key={schema.name}>
<RecursionField name={schema.name} schema={schema} />
<RowDivider
id={`${addr}_${index + 1}`}
data={{ wrapSchema: wrapRowSchema, insertAdjacent: 'afterEnd', schema }}
/>
</React.Fragment>
);
})}
</DndWrapper>
{render()}
</div>
</GridContext.Provider>
);
});

View File

@ -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={

View File

@ -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={

View File

@ -10,7 +10,7 @@ export const TabsDesigner = () => {
const { dn } = useDesignable();
const { t } = useTranslation();
return (
<GeneralSchemaDesigner>
<GeneralSchemaDesigner disableInitializer>
<SchemaSettings.ModalItem
title={t('Edit')}
schema={

View File

@ -9,7 +9,7 @@ export const BlockInitializers = {
{
key: 'dataBlocks',
type: 'itemGroup',
title: 'Data blocks',
title: '{{t("Data blocks")}}',
children: [
{
key: 'table',

View File

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

View File

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

View File

@ -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={[
{

View File

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