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