feat: improve code
This commit is contained in:
		
							parent
							
								
									b0056e1aa1
								
							
						
					
					
						commit
						da418720aa
					
				@ -79,6 +79,10 @@ interface DesignableContextProps {
 | 
			
		||||
 | 
			
		||||
export const useAsyncDataSource = (service: any) => (field: any) => {
 | 
			
		||||
  field.loading = true;
 | 
			
		||||
  const disableAsyncDataSource = field.componentProps.disableAsyncDataSource;
 | 
			
		||||
  if (disableAsyncDataSource) {
 | 
			
		||||
    return;
 | 
			
		||||
  }
 | 
			
		||||
  service(field).then(
 | 
			
		||||
    action.bound((data: any) => {
 | 
			
		||||
      field.dataSource = data;
 | 
			
		||||
@ -87,29 +91,23 @@ export const useAsyncDataSource = (service: any) => (field: any) => {
 | 
			
		||||
  );
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const useChinaRegionDataSource = ({ onSuccess }) => {
 | 
			
		||||
  const field = useField<ArrayField>();
 | 
			
		||||
export const loadChinaRegionDataSource = async (field) => {
 | 
			
		||||
  const maxLevel = field.componentProps.maxLevel || 3;
 | 
			
		||||
  const resource = Resource.make('china_regions');
 | 
			
		||||
  console.log('useChinaRegionDataSource');
 | 
			
		||||
  useRequest(
 | 
			
		||||
    () =>
 | 
			
		||||
      resource.list({
 | 
			
		||||
        perPage: -1,
 | 
			
		||||
        filter: {
 | 
			
		||||
          level: 1,
 | 
			
		||||
        },
 | 
			
		||||
      }),
 | 
			
		||||
    {
 | 
			
		||||
      formatResult: (data) =>
 | 
			
		||||
        data?.data?.map((item) => {
 | 
			
		||||
          if (maxLevel !== 1) {
 | 
			
		||||
            item.isLeaf = false;
 | 
			
		||||
          }
 | 
			
		||||
          return item;
 | 
			
		||||
        }),
 | 
			
		||||
      onSuccess,
 | 
			
		||||
  const { data } = await resource.list({
 | 
			
		||||
    perPage: -1,
 | 
			
		||||
    filter: {
 | 
			
		||||
      level: 1,
 | 
			
		||||
    },
 | 
			
		||||
  });
 | 
			
		||||
  console.log('loadChinaRegions', data, field.value);
 | 
			
		||||
  return (
 | 
			
		||||
    data?.map((item) => {
 | 
			
		||||
      if (maxLevel !== 1) {
 | 
			
		||||
        item.isLeaf = false;
 | 
			
		||||
      }
 | 
			
		||||
      return item;
 | 
			
		||||
    }) || []
 | 
			
		||||
  );
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
@ -147,7 +145,7 @@ export const SchemaField = createSchemaField({
 | 
			
		||||
    useAsyncDataSource,
 | 
			
		||||
    ChinaRegion: {
 | 
			
		||||
      loadData: loadChinaRegionData,
 | 
			
		||||
      useDataSource: useChinaRegionDataSource,
 | 
			
		||||
      loadDataSource: loadChinaRegionDataSource,
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
  components: {
 | 
			
		||||
 | 
			
		||||
@ -73,7 +73,7 @@ Chart.DesignableBar = observer((props) => {
 | 
			
		||||
                    setVisible(false);
 | 
			
		||||
                  }}
 | 
			
		||||
                >
 | 
			
		||||
                  修改文本段
 | 
			
		||||
                  修改内容
 | 
			
		||||
                </Menu.Item>
 | 
			
		||||
                <Menu.Divider />
 | 
			
		||||
                <Menu.Item
 | 
			
		||||
@ -87,7 +87,7 @@ Chart.DesignableBar = observer((props) => {
 | 
			
		||||
                    }
 | 
			
		||||
                  }}
 | 
			
		||||
                >
 | 
			
		||||
                  删除当前文本
 | 
			
		||||
                  移除
 | 
			
		||||
                </Menu.Item>
 | 
			
		||||
              </Menu>
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
@ -19,7 +19,6 @@ export const chinaRegion: FieldOptions = {
 | 
			
		||||
      'x-component-props': {
 | 
			
		||||
        changeOnSelect: true,
 | 
			
		||||
        loadData: '{{ ChinaRegion.loadData }}',
 | 
			
		||||
        useDataSource: '{{ ChinaRegion.useDataSource }}',
 | 
			
		||||
        labelInValue: true,
 | 
			
		||||
        maxLevel: 3,
 | 
			
		||||
        fieldNames: {
 | 
			
		||||
@ -28,7 +27,7 @@ export const chinaRegion: FieldOptions = {
 | 
			
		||||
          children: 'children',
 | 
			
		||||
        },
 | 
			
		||||
      },
 | 
			
		||||
      'x-reactions': ['{{useAsyncDataSource(loadChinaRegions)}}'],
 | 
			
		||||
      'x-reactions': ['{{useAsyncDataSource(ChinaRegion.loadDataSource)}}'],
 | 
			
		||||
      'x-decorator': 'FormItem',
 | 
			
		||||
      'x-designable-bar': 'Cascader.DesignableBar',
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										8
									
								
								packages/client/src/schemas/designable-bar/style.less
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										8
									
								
								packages/client/src/schemas/designable-bar/style.less
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,8 @@
 | 
			
		||||
.designable-info {
 | 
			
		||||
  position: absolute;
 | 
			
		||||
  font-size: 12px;
 | 
			
		||||
  background: #1890ff;
 | 
			
		||||
  color: #fff;
 | 
			
		||||
  padding: 0 5px;
 | 
			
		||||
  border-bottom-right-radius: 2px;
 | 
			
		||||
}
 | 
			
		||||
@ -12,12 +12,7 @@ import {
 | 
			
		||||
  useForm,
 | 
			
		||||
  RecursionField,
 | 
			
		||||
} from '@formily/react';
 | 
			
		||||
import {
 | 
			
		||||
  useSchemaPath,
 | 
			
		||||
  SchemaField,
 | 
			
		||||
  useDesignable,
 | 
			
		||||
  removeSchema,
 | 
			
		||||
} from '../';
 | 
			
		||||
import { useSchemaPath, SchemaField, useDesignable, removeSchema } from '../';
 | 
			
		||||
import get from 'lodash/get';
 | 
			
		||||
import { Button, Dropdown, Menu, Space } from 'antd';
 | 
			
		||||
import { MenuOutlined, DragOutlined } from '@ant-design/icons';
 | 
			
		||||
@ -31,17 +26,18 @@ import constate from 'constate';
 | 
			
		||||
import { useEffect } from 'react';
 | 
			
		||||
import { uid } from '@formily/shared';
 | 
			
		||||
import { getSchemaPath } from '../../components/schema-renderer';
 | 
			
		||||
import { useCollection } from '../../constate';
 | 
			
		||||
 | 
			
		||||
export const DesignableBar = observer((props) => {
 | 
			
		||||
  const field = useField();
 | 
			
		||||
  const { designable, schema, refresh, deepRemove } = useDesignable();
 | 
			
		||||
  const [visible, setVisible] = useState(false);
 | 
			
		||||
  const { dragRef } = useContext(DraggableBlockContext);
 | 
			
		||||
  if (!designable) {
 | 
			
		||||
    return null;
 | 
			
		||||
  }
 | 
			
		||||
  const collectionName = field.componentProps.collectionName;
 | 
			
		||||
  const { collection } = useCollection({ collectionName });
 | 
			
		||||
  return (
 | 
			
		||||
    <div className={cls('designable-bar', { active: visible })}>
 | 
			
		||||
      <div className={'designable-info'}>{collection?.title || collection?.name}</div>
 | 
			
		||||
      <span
 | 
			
		||||
        onClick={(e) => {
 | 
			
		||||
          e.stopPropagation();
 | 
			
		||||
 | 
			
		||||
@ -2,6 +2,8 @@ import React from 'react';
 | 
			
		||||
import { ISchema as IFormilySchema, observer, Schema, useField } from '@formily/react';
 | 
			
		||||
import { extend } from 'umi-request';
 | 
			
		||||
 | 
			
		||||
import './designable-bar/style.less';
 | 
			
		||||
 | 
			
		||||
export type FormilyISchema = IFormilySchema
 | 
			
		||||
 | 
			
		||||
export interface ISchema extends IFormilySchema {
 | 
			
		||||
 | 
			
		||||
@ -93,7 +93,7 @@ Input.DesignableBar = observer((props) => {
 | 
			
		||||
                    // }
 | 
			
		||||
                  }}
 | 
			
		||||
                >
 | 
			
		||||
                  删除当前区块
 | 
			
		||||
                  移除
 | 
			
		||||
                </Menu.Item>
 | 
			
		||||
              </Menu>
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
@ -137,7 +137,7 @@ Markdown.Void.DesignableBar = observer((props) => {
 | 
			
		||||
                    setVisible(false);
 | 
			
		||||
                  }}
 | 
			
		||||
                >
 | 
			
		||||
                  修改文本段
 | 
			
		||||
                  修改内容
 | 
			
		||||
                </Menu.Item>
 | 
			
		||||
                <Menu.Divider />
 | 
			
		||||
                <Menu.Item
 | 
			
		||||
@ -151,7 +151,7 @@ Markdown.Void.DesignableBar = observer((props) => {
 | 
			
		||||
                    }
 | 
			
		||||
                  }}
 | 
			
		||||
                >
 | 
			
		||||
                  删除当前文本
 | 
			
		||||
                  移除
 | 
			
		||||
                </Menu.Item>
 | 
			
		||||
              </Menu>
 | 
			
		||||
            }
 | 
			
		||||
@ -206,7 +206,7 @@ Markdown.DesignableBar = observer((props) => {
 | 
			
		||||
                    }
 | 
			
		||||
                  }}
 | 
			
		||||
                >
 | 
			
		||||
                  删除当前字段
 | 
			
		||||
                  移除
 | 
			
		||||
                </Menu.Item>
 | 
			
		||||
              </Menu>
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
@ -1953,10 +1953,11 @@ Table.DesignableBar = observer((props) => {
 | 
			
		||||
  const defaultPageSize =
 | 
			
		||||
    field?.componentProps?.pagination?.defaultPageSize || 10;
 | 
			
		||||
  const collectionName = field?.componentProps?.collectionName;
 | 
			
		||||
  const { fields } = useCollection({ collectionName });
 | 
			
		||||
  const { collection, fields } = useCollection({ collectionName });
 | 
			
		||||
  console.log({ collectionName });
 | 
			
		||||
  return (
 | 
			
		||||
    <div className={cls('designable-bar', { active: visible })}>
 | 
			
		||||
      <div className={'designable-info'}>{collection?.title || collection?.name}</div>
 | 
			
		||||
      <span
 | 
			
		||||
        onClick={(e) => {
 | 
			
		||||
          e.stopPropagation();
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user