From 1416d920a03a5cebbfffba184b41364a1a863bba Mon Sep 17 00:00:00 2001
From: Meriem-BenIsmail <meriembenismail867@gmail.com>
Date: Wed, 4 Dec 2024 17:07:17 +0100
Subject: [PATCH] updated schema
---
.../base/src/panelview/customarrayfield.tsx | 16 +--
packages/base/src/panelview/formbuilder.tsx | 121 +++++++++---------
python/jupytercad_lab/style/base.css | 4 +
3 files changed, 75 insertions(+), 66 deletions(-)
diff --git a/packages/base/src/panelview/customarrayfield.tsx b/packages/base/src/panelview/customarrayfield.tsx
index 31a002615..b428a399f 100644
--- a/packages/base/src/panelview/customarrayfield.tsx
+++ b/packages/base/src/panelview/customarrayfield.tsx
@@ -20,7 +20,7 @@ const CustomArrayField: React.FC<IProps> = props => {
onChange,
onBlur
} = props;
- let fieldErrors: any = {};
+
const handleInputChange = (index: number, value: any) => {
const updatedValue = [...formData];
updatedValue[index] = value;
@@ -29,8 +29,6 @@ const CustomArrayField: React.FC<IProps> = props => {
const renderInputField = (value: any, index: number) => {
const { enum: enumOptions, type: itemType } = schema.items || {};
- fieldErrors = errorSchema?.[index]?.__errors || [];
-
if (enumOptions) {
return (
<select
@@ -98,11 +96,13 @@ const CustomArrayField: React.FC<IProps> = props => {
{errorSchema?.[index]?.__errors?.length > 0 && (
<div className="validationErrors">
- {fieldErrors.map((error: string, errorIndex: number) => (
- <div key={`${index}-${errorIndex}`} className="error">
- {error}
- </div>
- ))}
+ {errorSchema?.[index]?.__errors.map(
+ (error: string, errorIndex: number) => (
+ <div key={`${index}-${errorIndex}`} className="error">
+ {error}
+ </div>
+ )
+ )}
</div>
)}
</div>
diff --git a/packages/base/src/panelview/formbuilder.tsx b/packages/base/src/panelview/formbuilder.tsx
index 467d11a48..0efcb69d3 100644
--- a/packages/base/src/panelview/formbuilder.tsx
+++ b/packages/base/src/panelview/formbuilder.tsx
@@ -143,70 +143,75 @@ export class ObjectPropertiesForm extends React.Component<IProps, IStates> {
};
render(): React.ReactNode {
- const { schema, internalData } = this.state;
- const uiSchema = this.generateUiSchema(this.props.schema || {});
- const submitRef = React.createRef<HTMLButtonElement>();
+ if (this.props.schema) {
+ const schema = { ...this.props.schema, additionalProperties: true };
- if (!schema) {
- return <div>{this.buildForm()}</div>;
- }
- return (
- <div
- className="jpcad-property-panel"
- data-path={this.props.filePath ?? ''}
- >
- <div className="jpcad-property-outer jp-scrollbar-tiny">
- <WrappedFormComponent
- schema={schema}
- uiSchema={uiSchema}
- formData={internalData}
- onSubmit={this.onFormSubmit}
- liveValidate
- onFocus={(id, value) => {
- this.props.syncSelectedField
- ? this.props.syncSelectedField(id, value, this.props.parentType)
- : null;
- }}
- onBlur={(id, value) => {
- this.props.syncSelectedField
- ? this.props.syncSelectedField(
- null,
- value,
- this.props.parentType
- )
- : null;
- }}
- children={
+ const submitRef = React.createRef<HTMLButtonElement>();
+
+ return (
+ <div
+ className="jpcad-property-panel"
+ data-path={this.props.filePath ?? ''}
+ >
+ <div className="jpcad-property-outer jp-scrollbar-tiny">
+ <WrappedFormComponent
+ schema={{ ...schema, additionalProperties: true }}
+ uiSchema={this.generateUiSchema(this.props.schema)}
+ formData={this.state.internalData}
+ onSubmit={this.onFormSubmit}
+ liveValidate
+ onFocus={(id, value) => {
+ this.props.syncSelectedField
+ ? this.props.syncSelectedField(
+ id,
+ value,
+ this.props.parentType
+ )
+ : null;
+ }}
+ onBlur={(id, value) => {
+ this.props.syncSelectedField
+ ? this.props.syncSelectedField(
+ null,
+ value,
+ this.props.parentType
+ )
+ : null;
+ }}
+ children={
+ <button
+ ref={submitRef}
+ type="submit"
+ style={{ display: 'none' }}
+ />
+ }
+ />
+ </div>
+
+ <div className="jpcad-property-buttons">
+ {this.props.cancel ? (
<button
- ref={submitRef}
- type="submit"
- style={{ display: 'none' }}
- />
- }
- />
- </div>
+ className="jp-Dialog-button jp-mod-reject jp-mod-styled"
+ onClick={this.props.cancel}
+ >
+ <div className="jp-Dialog-buttonLabel">Cancel</div>
+ </button>
+ ) : null}
- <div className="jpcad-property-buttons">
- {this.props.cancel ? (
<button
- className="jp-Dialog-button jp-mod-reject jp-mod-styled"
- onClick={this.props.cancel}
+ className="jp-Dialog-button jp-mod-accept jp-mod-styled"
+ type="button"
+ onClick={() => {
+ submitRef.current?.click();
+ }}
>
- <div className="jp-Dialog-buttonLabel">Cancel</div>
+ <div className="jp-Dialog-buttonLabel">Submit</div>
</button>
- ) : null}
-
- <button
- className="jp-Dialog-button jp-mod-accept jp-mod-styled"
- type="button"
- onClick={() => {
- submitRef.current?.click();
- }}
- >
- <div className="jp-Dialog-buttonLabel">Submit</div>
- </button>
+ </div>
</div>
- </div>
- );
+ );
+ } else {
+ return <div>{this.buildForm()}</div>;
+ }
}
}
diff --git a/python/jupytercad_lab/style/base.css b/python/jupytercad_lab/style/base.css
index efb3612b3..f7949f5fa 100644
--- a/python/jupytercad_lab/style/base.css
+++ b/python/jupytercad_lab/style/base.css
@@ -640,3 +640,7 @@ body[data-jp-theme-light='true'] {
margin: 0;
padding: 0;
}
+
+.jpcad-property-panel .rjsf .jp-ArrayOperationsButton {
+ display: none;
+}