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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

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