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; +}