From f467b704662e2d819bea52acab1623ec239d153b Mon Sep 17 00:00:00 2001
From: Philipp Sommer <philipp.sommer@hereon.de>
Date: Mon, 7 Apr 2025 23:56:31 +0200
Subject: [PATCH] implement custom schema field
---
src/components/FunctionForm.tsx | 11 ++++++++++-
src/components/SchemaField.tsx | 25 +++++++++++++++++++++++++
2 files changed, 35 insertions(+), 1 deletion(-)
create mode 100644 src/components/SchemaField.tsx
diff --git a/src/components/FunctionForm.tsx b/src/components/FunctionForm.tsx
index 57b4a03..f8d2ce7 100644
--- a/src/components/FunctionForm.tsx
+++ b/src/components/FunctionForm.tsx
@@ -16,6 +16,8 @@ import validator from '@rjsf/validator-ajv8';
import React from 'react';
import { FormEvent } from 'react';
+import CustomSchemaField from './SchemaField';
+
const log = (type: string) => console.log.bind(console, type);
function FunctionForm({
@@ -38,13 +40,20 @@ function FunctionForm({
if (typeof uiSchema === 'undefined') {
uiSchema = {};
}
+ if (schema.uiSchema) {
+ uiSchema = { ...uiSchema, ...schema.uiSchema };
+ }
+
+ // @ts-expect-error:next-line
uiSchema.func_name = { 'ui:widget': 'hidden' };
Object.entries(schema.properties).forEach(([prop, attrs]) => {
// @ts-expect-error:next-line
if (attrs.is_reporter) {
+ // @ts-expect-error:next-line
uiSchema[prop] = { 'ui:widget': 'hidden' };
}
});
+
return (
<>
<Form
@@ -53,7 +62,7 @@ function FunctionForm({
validator={validator}
onSubmit={typeof onSubmit !== 'undefined' ? onSubmit : log('submitted')}
onError={typeof onError !== 'undefined' ? onError : log('errors')}
- fields={fields}
+ fields={{ SchemaField: CustomSchemaField, ...(fields ? fields : {}) }}
widgets={widgets}
onChange={onChange}
/>
diff --git a/src/components/SchemaField.tsx b/src/components/SchemaField.tsx
new file mode 100644
index 0000000..65b4e79
--- /dev/null
+++ b/src/components/SchemaField.tsx
@@ -0,0 +1,25 @@
+// SPDX-FileCopyrightText: 2025 Helmholtz-Zentrum hereon GmbH
+//
+// SPDX-License-Identifier: Apache-2.0
+
+// @ts-expect-error: importing React is necessary for react@18.2.0
+import React from 'react';
+import { FieldProps } from '@rjsf/utils';
+import { getDefaultRegistry } from '@rjsf/core';
+
+const {
+ fields: { SchemaField },
+} = getDefaultRegistry();
+
+const CustomSchemaField = (props: FieldProps) => {
+ if (props.schema.uiSchema) {
+ const uiSchema = {
+ ...(props.uiSchema ? props.uiSchema : {}),
+ ...props.schema.uiSchema,
+ };
+ return <SchemaField {...props} uiSchema={uiSchema} />;
+ }
+ return <SchemaField {...props} />;
+};
+
+export default CustomSchemaField;
--
GitLab