feat: improve collection manager module
This commit is contained in:
		
							parent
							
								
									f121999568
								
							
						
					
					
						commit
						98076d628d
					
				@ -1,11 +1,56 @@
 | 
			
		||||
import React from 'react';
 | 
			
		||||
import { SchemaComponent } from '../../schema-component';
 | 
			
		||||
import { action } from '@formily/reactive';
 | 
			
		||||
import { uid } from '@formily/shared';
 | 
			
		||||
import React, { useEffect } from 'react';
 | 
			
		||||
import { useRequest } from '../../api-client';
 | 
			
		||||
import { SchemaComponent, useActionContext } from '../../schema-component';
 | 
			
		||||
import { useCollectionManager } from '../hooks/useCollectionManager';
 | 
			
		||||
import { collectionSchema } from './schemas/collections';
 | 
			
		||||
 | 
			
		||||
const useAsyncDataSource = (service: any) => (field: any) => {
 | 
			
		||||
  field.loading = true;
 | 
			
		||||
  service(field).then(
 | 
			
		||||
    action.bound((data: any) => {
 | 
			
		||||
      field.dataSource = data;
 | 
			
		||||
      field.loading = false;
 | 
			
		||||
    }),
 | 
			
		||||
  );
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const useCollectionValues = (options) => {
 | 
			
		||||
  const { visible } = useActionContext();
 | 
			
		||||
  const result = useRequest(
 | 
			
		||||
    () =>
 | 
			
		||||
      Promise.resolve({
 | 
			
		||||
        data: {
 | 
			
		||||
          name: `t_${uid()}`,
 | 
			
		||||
        },
 | 
			
		||||
      }),
 | 
			
		||||
    {
 | 
			
		||||
      ...options,
 | 
			
		||||
      manual: true,
 | 
			
		||||
    },
 | 
			
		||||
  );
 | 
			
		||||
 | 
			
		||||
  useEffect(() => {
 | 
			
		||||
    if (visible) {
 | 
			
		||||
      result.run();
 | 
			
		||||
    }
 | 
			
		||||
  }, [visible]);
 | 
			
		||||
 | 
			
		||||
  return result;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export const ConfigurationTable = () => {
 | 
			
		||||
  const { collections = [] } = useCollectionManager();
 | 
			
		||||
  const loadCollections = async (field: any) => {
 | 
			
		||||
    return collections?.map((item: any) => ({
 | 
			
		||||
      label: item.title,
 | 
			
		||||
      value: item.name,
 | 
			
		||||
    }));
 | 
			
		||||
  };
 | 
			
		||||
  return (
 | 
			
		||||
    <div>
 | 
			
		||||
      <SchemaComponent schema={collectionSchema} />
 | 
			
		||||
      <SchemaComponent schema={collectionSchema} scope={{ useCollectionValues, useAsyncDataSource, loadCollections }}/>
 | 
			
		||||
    </div>
 | 
			
		||||
  );
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
@ -99,6 +99,9 @@ export const collectionSchema: ISchema = {
 | 
			
		||||
                  title: '{{ t("Create collection") }}',
 | 
			
		||||
                  'x-component': 'Action.Drawer',
 | 
			
		||||
                  'x-decorator': 'Form',
 | 
			
		||||
                  'x-decorator-props': {
 | 
			
		||||
                    useValues: '{{ useCollectionValues }}',
 | 
			
		||||
                  },
 | 
			
		||||
                  properties: {
 | 
			
		||||
                    title: {
 | 
			
		||||
                      'x-component': 'CollectionField',
 | 
			
		||||
@ -107,7 +110,6 @@ export const collectionSchema: ISchema = {
 | 
			
		||||
                    name: {
 | 
			
		||||
                      'x-component': 'CollectionField',
 | 
			
		||||
                      'x-decorator': 'FormItem',
 | 
			
		||||
                      default: '{{ randomString("t_") }}',
 | 
			
		||||
                    },
 | 
			
		||||
                    footer: {
 | 
			
		||||
                      type: 'void',
 | 
			
		||||
 | 
			
		||||
@ -48,7 +48,7 @@ export const linkTo: IField = {
 | 
			
		||||
      type: 'string',
 | 
			
		||||
      title: '{{t("Related collection")}}',
 | 
			
		||||
      required: true,
 | 
			
		||||
      // 'x-reactions': ['{{useAsyncDataSource(loadCollections)}}'],
 | 
			
		||||
      'x-reactions': ['{{useAsyncDataSource(loadCollections)}}'],
 | 
			
		||||
      'x-decorator': 'FormItem',
 | 
			
		||||
      'x-component': 'Select',
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user