diff --git a/packages/core/client/src/formily/NocoBaseRecursionField.tsx b/packages/core/client/src/formily/NocoBaseRecursionField.tsx index 431701ab1c..90b944fce4 100644 --- a/packages/core/client/src/formily/NocoBaseRecursionField.tsx +++ b/packages/core/client/src/formily/NocoBaseRecursionField.tsx @@ -32,11 +32,15 @@ interface INocoBaseRecursionFieldProps extends IRecursionFieldProps { uiSchema?: ISchema; } -const useFieldProps = (schema: Schema) => { - const scope = useExpressionScope(); +const toFieldProps = _.memoize((schema: Schema, scope: any) => { return schema.toFieldProps({ scope, }) as any; +}); + +const useFieldProps = (schema: Schema) => { + const scope = useExpressionScope(); + return toFieldProps(schema, scope); }; const useBasePath = (props: IRecursionFieldProps) => { @@ -74,6 +78,55 @@ const createMergedSchemaInstance = _.memoize((schema: Schema, uiSchema: ISchema, return new Schema(merge(_.omit(uiSchema, 'type'), clonedSchema)); }); +const getOrderProperties = _.memoize((schema: Schema) => { + return Schema.getOrderProperties(schema); +}); + +const propertiesToReactElement = ( + schema: Schema, + field: any, + basePath: any, + mapProperties?: any, + filterProperties?: any, + propsRecursion?: any, +) => { + const properties = getOrderProperties(schema); + if (!properties.length) return null; + return ( + + {properties.map(({ schema: item, key: name }, index) => { + const base = field?.address || basePath; + let schema: Schema = item; + if (isFn(mapProperties)) { + const mapped = mapProperties(item, name); + if (mapped) { + schema = mapped; + } + } + if (isFn(filterProperties)) { + if (filterProperties(schema, name) === false) { + return null; + } + } + if (isBool(propsRecursion) && propsRecursion) { + return ( + + ); + } + return ; + })} + + ); +}; + /** * Based on @formily/react v2.3.2 RecursionField component * Modified to better adapt to NocoBase's needs @@ -92,42 +145,16 @@ export const NocoBaseRecursionField: ReactFC = Rea }, [fieldSchema, props.onlyRenderProperties, props.uiSchema]); const fieldProps = useFieldProps(mergedFieldSchema); + const renderProperties = (field?: GeneralField) => { if (props.onlyRenderSelf) return; - const properties = Schema.getOrderProperties(mergedFieldSchema); - if (!properties.length) return; - return ( - - {properties.map(({ schema: item, key: name }, index) => { - const base = field?.address || basePath; - let schema: Schema = item; - if (isFn(props.mapProperties)) { - const mapped = props.mapProperties(item, name); - if (mapped) { - schema = mapped; - } - } - if (isFn(props.filterProperties)) { - if (props.filterProperties(schema, name) === false) { - return null; - } - } - if (isBool(props.propsRecursion) && props.propsRecursion) { - return ( - - ); - } - return ; - })} - + return propertiesToReactElement( + mergedFieldSchema, + field, + basePath, + props.mapProperties, + props.filterProperties, + props.propsRecursion, ); };