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,6 +159,7 @@ 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 (
 | 
				
			||||||
 | 
					    <GridContext.Provider value={{ fieldSchema, renderSchemaInitializer: render }}>
 | 
				
			||||||
      <div className={'nb-grid'} style={{ position: 'relative' }}>
 | 
					      <div className={'nb-grid'} style={{ position: 'relative' }}>
 | 
				
			||||||
        <DndWrapper dndContext={props.dndContext}>
 | 
					        <DndWrapper dndContext={props.dndContext}>
 | 
				
			||||||
          <RowDivider
 | 
					          <RowDivider
 | 
				
			||||||
@ -174,6 +180,7 @@ export const Grid: any = observer((props: any) => {
 | 
				
			|||||||
        </DndWrapper>
 | 
					        </DndWrapper>
 | 
				
			||||||
        {render()}
 | 
					        {render()}
 | 
				
			||||||
      </div>
 | 
					      </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