2022-02-21 15:08:45 +08:00
|
|
|
import { Field } from '@formily/core';
|
|
|
|
import { connect, useField, useFieldSchema } from '@formily/react';
|
2022-03-05 22:51:23 +08:00
|
|
|
import { merge } from '@formily/shared';
|
2022-02-21 15:08:45 +08:00
|
|
|
import React, { useEffect } from 'react';
|
2022-02-23 18:22:37 +08:00
|
|
|
import { useCompile, useComponent } from '..';
|
2022-01-10 19:22:21 +08:00
|
|
|
import { CollectionFieldProvider } from './CollectionFieldProvider';
|
2022-02-16 15:11:24 +08:00
|
|
|
import { useCollectionField } from './hooks';
|
2022-01-10 19:22:21 +08:00
|
|
|
|
|
|
|
// TODO: 初步适配
|
|
|
|
const InternalField: React.FC = (props) => {
|
|
|
|
const field = useField<Field>();
|
|
|
|
const fieldSchema = useFieldSchema();
|
|
|
|
const { uiSchema } = useCollectionField();
|
2022-02-21 15:08:45 +08:00
|
|
|
const component = useComponent(uiSchema?.['x-component']);
|
2022-02-23 18:22:37 +08:00
|
|
|
const compile = useCompile();
|
2022-01-10 19:22:21 +08:00
|
|
|
const setFieldProps = (key, value) => {
|
|
|
|
field[key] = typeof field[key] === 'undefined' ? value : field[key];
|
|
|
|
};
|
|
|
|
const setRequired = () => {
|
|
|
|
if (typeof fieldSchema['required'] === 'undefined') {
|
|
|
|
field.required = !!uiSchema['required'];
|
|
|
|
}
|
|
|
|
};
|
|
|
|
// TODO: 初步适配
|
|
|
|
useEffect(() => {
|
2022-02-21 15:08:45 +08:00
|
|
|
if (!uiSchema) {
|
|
|
|
return;
|
|
|
|
}
|
2022-02-23 18:22:37 +08:00
|
|
|
console.log('uiSchema', uiSchema);
|
2022-01-10 19:22:21 +08:00
|
|
|
setFieldProps('title', uiSchema.title);
|
|
|
|
setFieldProps('description', uiSchema.description);
|
|
|
|
setFieldProps('initialValue', uiSchema.default);
|
2022-02-24 00:04:41 +08:00
|
|
|
field.readPretty = uiSchema['x-read-pretty'];
|
2022-01-10 19:22:21 +08:00
|
|
|
setRequired();
|
2022-02-16 22:48:24 +08:00
|
|
|
// @ts-ignore
|
|
|
|
field.dataSource = uiSchema.enum;
|
2022-03-05 22:51:23 +08:00
|
|
|
const originalProps = compile(uiSchema['x-component-props']);
|
|
|
|
const componentProps = field.componentProps;
|
|
|
|
field.component = [component, merge(originalProps, componentProps)];
|
2022-02-21 15:08:45 +08:00
|
|
|
}, [uiSchema?.title, uiSchema?.description, uiSchema?.required]);
|
|
|
|
if (!uiSchema) {
|
|
|
|
return null;
|
|
|
|
}
|
2022-02-25 23:09:42 +08:00
|
|
|
return React.createElement(component, props, props.children);
|
2022-01-10 19:22:21 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
export const CollectionField = connect((props) => {
|
|
|
|
const fieldSchema = useFieldSchema();
|
|
|
|
return (
|
|
|
|
<CollectionFieldProvider name={fieldSchema.name}>
|
|
|
|
<InternalField {...props} />
|
|
|
|
</CollectionFieldProvider>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
export default CollectionField;
|