feat: add onChange props to SchemaComponent (#3292)

* feat: add onChange props to SchemaComponent

* fix(client): avoid undefined method error

---------

Co-authored-by: mytharcher <mytharcher@gmail.com>
This commit is contained in:
chenos 2024-01-05 21:36:00 +08:00 committed by GitHub
parent 33c690b877
commit da99573545
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,7 +1,12 @@
import { IRecursionFieldProps, ISchemaFieldProps, RecursionField, Schema } from '@formily/react';
import React, { useMemo } from 'react';
import React, { useContext, useMemo } from 'react';
import { SchemaComponentContext } from '../context';
import { SchemaComponentOptions } from './SchemaComponentOptions';
type SchemaComponentOnChange = {
onChange?: (s: Schema) => void;
};
function toSchema(schema?: any) {
if (Schema.isSchemaInstance(schema)) {
return schema;
@ -21,22 +26,36 @@ const useMemoizedSchema = (schema) => {
return useMemo(() => toSchema(schema), []);
};
const RecursionSchemaComponent = (props: ISchemaFieldProps) => {
const RecursionSchemaComponent = (props: ISchemaFieldProps & SchemaComponentOnChange) => {
const { components, scope, schema, ...others } = props;
const ctx = useContext(SchemaComponentContext);
const s = useMemo(() => toSchema(schema), [schema]);
return (
<SchemaComponentOptions inherit components={components} scope={scope}>
<RecursionField {...others} schema={toSchema(schema)} />
</SchemaComponentOptions>
<SchemaComponentContext.Provider
value={{
...ctx,
refresh: () => {
ctx.refresh?.();
props.onChange?.(s);
},
}}
>
<SchemaComponentOptions inherit components={components} scope={scope}>
<RecursionField {...others} schema={s} />
</SchemaComponentOptions>
</SchemaComponentContext.Provider>
);
};
const MemoizedSchemaComponent = (props: ISchemaFieldProps) => {
const MemoizedSchemaComponent = (props: ISchemaFieldProps & SchemaComponentOnChange) => {
const { schema, ...others } = props;
const s = useMemoizedSchema(schema);
return <RecursionSchemaComponent {...others} schema={s} />;
};
export const SchemaComponent = (props: (ISchemaFieldProps | IRecursionFieldProps) & { memoized?: boolean }) => {
export const SchemaComponent = (
props: (ISchemaFieldProps | IRecursionFieldProps) & { memoized?: boolean } & SchemaComponentOnChange,
) => {
const { memoized, ...others } = props;
if (memoized) {
return <MemoizedSchemaComponent {...others} />;