@jupytergis/base 0.13.2 → 0.14.0

package/lib/formbuilder/objectform/process/dissolveProcessForm.js

@@ -1,62 +1,74 @@
-import { BaseForm, } from "../baseform"; // Ensure BaseForm imports states
-import { loadFile } from "../../../tools";
-export class DissolveForm extends BaseForm {
-    constructor(options) {
-        var _a;
-        super(options);
-        this.features = [];
-        this.model = options.model;
-        // Ensure initial state matches IBaseFormStates
-        this.state = {
-            schema: (_a = options.schema) !== null && _a !== void 0 ? _a : {}, // Ensure schema is never undefined
-        };
-        this.onFormChange = this.handleFormChange.bind(this);
-        this.fetchFieldNames(options.sourceData.inputLayer);
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { deepCopy, loadFile } from "../../../tools";
+import { SchemaForm } from '../SchemaForm';
+import { processBaseSchema, removeFormEntry } from '../schemaUtils';
+import { useSchemaFormState } from '../useSchemaFormState';
+async function fetchFieldNames(model, layerId) {
+    var _a, _b, _c;
+    if (!layerId) {
+        return [];
     }
-    async fetchFieldNames(layerId) {
-        var _a, _b;
-        const layer = this.model.getLayer(layerId);
-        if (!((_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.source)) {
-            return;
-        }
-        const source = this.model.getSource(layer.parameters.source);
-        if (!source || source.type !== 'GeoJSONSource') {
-            return;
-        }
-        const sourceData = source.parameters;
-        if (!(sourceData === null || sourceData === void 0 ? void 0 : sourceData.path)) {
+    const layer = model.getLayer(layerId);
+    if (!((_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.source)) {
+        return [];
+    }
+    const source = model.getSource(layer.parameters.source);
+    if (!source || source.type !== 'GeoJSONSource') {
+        return [];
+    }
+    const sourceData = source.parameters;
+    if (!(sourceData === null || sourceData === void 0 ? void 0 : sourceData.path)) {
+        return [];
+    }
+    const jsonData = await loadFile({
+        filepath: sourceData.path,
+        type: 'GeoJSONSource',
+        model,
+    });
+    if (!((_b = jsonData === null || jsonData === void 0 ? void 0 : jsonData.features) === null || _b === void 0 ? void 0 : _b.length)) {
+        return [];
+    }
+    return Object.keys((_c = jsonData.features[0].properties) !== null && _c !== void 0 ? _c : {});
+}
+export function DissolveForm(props) {
+    const { schema: schemaProp, sourceData, syncData, model, filePath, formContext, ok, } = props;
+    const { formData, formContextValue, hasSchema, handleChangeBase, handleSubmitBase, } = useSchemaFormState({ sourceData, schemaProp, model, syncData });
+    const [features, setFeatures] = useState([]);
+    const submitButtonRef = useRef(null);
+    useEffect(() => {
+        fetchFieldNames(model, formData === null || formData === void 0 ? void 0 : formData.inputLayer)
+            .then(setFeatures)
+            .catch(() => setFeatures([]));
+    }, [model, formData === null || formData === void 0 ? void 0 : formData.inputLayer]);
+    useEffect(() => {
+        if (!ok) {
             return;
         }
-        try {
-            const jsonData = await loadFile({
-                filepath: sourceData.path,
-                type: 'GeoJSONSource',
-                model: this.model,
-            });
-            if (!((_b = jsonData === null || jsonData === void 0 ? void 0 : jsonData.features) === null || _b === void 0 ? void 0 : _b.length)) {
-                return;
-            }
-            this.features = Object.keys(jsonData.features[0].properties);
-            this.updateSchema();
-        }
-        catch (error) {
-            console.error('Error loading GeoJSON:', error);
-        }
-    }
-    handleFormChange(e) {
-        super.onFormChange(e);
-        if (e.formData.inputLayer) {
-            this.fetchFieldNames(e.formData.inputLayer);
+        const handler = () => {
+            var _a;
+            (_a = submitButtonRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        };
+        ok.connect(handler);
+        return () => {
+            ok.disconnect(handler);
+        };
+    }, [ok]);
+    const schema = useMemo(() => {
+        const schemaCopy = deepCopy(schemaProp !== null && schemaProp !== void 0 ? schemaProp : {});
+        if (schemaCopy.properties &&
+            schemaCopy.properties.dissolveField) {
+            schemaCopy.properties.dissolveField = Object.assign(Object.assign({}, schemaCopy.properties.dissolveField), { enum: [...features] });
         }
+        return schemaCopy;
+    }, [schemaProp, features]);
+    const uiSchema = useMemo(() => {
+        const builtUiSchema = {};
+        const dataCopy = deepCopy(formData);
+        processBaseSchema(dataCopy, schema, builtUiSchema, formContext, removeFormEntry);
+        return builtUiSchema;
+    }, [schema, formData, formContext]);
+    if (!hasSchema) {
+        return null;
     }
-    updateSchema() {
-        this.setState((prevState) => {
-            var _a, _b, _c;
-            return ({
-                schema: Object.assign(Object.assign({}, prevState.schema), { properties: Object.assign(Object.assign({}, (_a = prevState.schema) === null || _a === void 0 ? void 0 : _a.properties), { dissolveField: Object.assign(Object.assign({}, (_c = (_b = prevState.schema) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.dissolveField), { enum: [...this.features] }) }) }),
-            });
-        }, () => {
-            this.forceUpdate();
-        });
-    }
+    return (React.createElement(SchemaForm, { schema: schema, formData: formData, onChange: handleChangeBase, onSubmit: handleSubmitBase, formContext: formContextValue, filePath: filePath, uiSchema: uiSchema, submitButtonRef: submitButtonRef }));
 }

package/lib/formbuilder/objectform/processingForm.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Used by ProcessingFormDialog when processingType is not 'Dissolve'.
+ */
+import { Dialog } from '@jupyterlab/apputils';
+import { Signal } from '@lumino/signaling';
+import React from 'react';
+import type { IBaseFormProps } from "../../types";
+export interface IProcessingFormWrapperProps extends IBaseFormProps {
+    /** Signal emitted by the dialog when OK is clicked; form submits when this fires. */
+    ok?: Signal<Dialog<any>, number>;
+}
+export declare function DefaultProcessingForm(props: IProcessingFormWrapperProps): React.ReactElement | null;

package/lib/formbuilder/objectform/processingForm.js

@@ -0,0 +1,33 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { deepCopy } from "../../tools";
+import { SchemaForm } from './SchemaForm';
+import { processBaseSchema, removeFormEntry } from './schemaUtils';
+import { useSchemaFormState } from './useSchemaFormState';
+export function DefaultProcessingForm(props) {
+    const { schema: schemaProp, sourceData, syncData, model, filePath, formContext, ok, } = props;
+    const { formData, schema, formContextValue, hasSchema, handleChangeBase, handleSubmitBase, } = useSchemaFormState({ sourceData, schemaProp, model, syncData });
+    const submitButtonRef = useRef(null);
+    useEffect(() => {
+        if (!ok) {
+            return;
+        }
+        const handler = () => {
+            var _a;
+            (_a = submitButtonRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        };
+        ok.connect(handler);
+        return () => {
+            ok.disconnect(handler);
+        };
+    }, [ok]);
+    const uiSchema = useMemo(() => {
+        const builtUiSchema = {};
+        const dataCopy = deepCopy(formData);
+        processBaseSchema(dataCopy, schema, builtUiSchema, formContext, removeFormEntry);
+        return builtUiSchema;
+    }, [schema, formData, formContext]);
+    if (!hasSchema) {
+        return null;
+    }
+    return (React.createElement(SchemaForm, { schema: schema, formData: formData, onChange: handleChangeBase, onSubmit: handleSubmitBase, formContext: formContextValue, filePath: filePath, uiSchema: uiSchema, submitButtonRef: submitButtonRef }));
+}

package/lib/formbuilder/objectform/schemaUtils.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Helpers for adapting JSON Schema and uiSchema before passing them to SchemaForm.
+ * Used by layer, source, and other object forms to hide fields, set array options,
+ * and apply read-only behaviour based on form context (create vs update).
+ */
+import { RJSFSchema, UiSchema } from '@rjsf/utils';
+import { IDict } from "../../types";
+/**
+ * Remove a property from form data, schema, and uiSchema.
+ */
+export declare function removeFormEntry(entry: string, data: IDict | undefined, schema: RJSFSchema, uiSchema: UiSchema): void;
+/**
+ * Apply base processSchema: array options, opacity field, readOnly handling.
+ * Mutates schema, uiSchema, and optionally data (for readOnly removal in update).
+ */
+export declare function processBaseSchema(data: IDict | undefined, schema: RJSFSchema, uiSchema: UiSchema, formContext: 'create' | 'update', removeEntry: typeof removeFormEntry): void;

package/lib/formbuilder/objectform/schemaUtils.js

@@ -0,0 +1,59 @@
+/**
+ * Remove a property from form data, schema, and uiSchema.
+ */
+export function removeFormEntry(entry, data, schema, uiSchema) {
+    if (data) {
+        delete data[entry];
+    }
+    if (schema.properties) {
+        delete schema.properties[entry];
+    }
+    delete uiSchema[entry];
+    if (schema.required && schema.required.includes(entry)) {
+        schema.required.splice(schema.required.indexOf(entry), 1);
+    }
+}
+/**
+ * Apply base processSchema: array options, opacity field, readOnly handling.
+ * Mutates schema, uiSchema, and optionally data (for readOnly removal in update).
+ */
+export function processBaseSchema(data, schema, uiSchema, formContext, removeEntry) {
+    var _a, _b, _c, _d;
+    if (!schema['properties']) {
+        return;
+    }
+    const props = schema.properties;
+    for (const [k, v] of Object.entries(props)) {
+        uiSchema[k] = (_a = uiSchema[k]) !== null && _a !== void 0 ? _a : {};
+        if (v && typeof v === 'object' && v['type'] === 'array') {
+            uiSchema[k]['ui:options'] = Object.assign({ orderable: false, removable: false, addable: false }, ((_b = uiSchema[k]['ui:options']) !== null && _b !== void 0 ? _b : {}));
+            const items = v['items'];
+            if (items &&
+                typeof items === 'object' &&
+                items['type'] === 'array') {
+                uiSchema[k].items = Object.assign({ 'ui:options': {
+                        orderable: false,
+                        removable: false,
+                        addable: false,
+                    } }, ((_c = uiSchema[k].items) !== null && _c !== void 0 ? _c : {}));
+            }
+        }
+        if (v &&
+            typeof v === 'object' &&
+            v['type'] === 'object' &&
+            v.properties) {
+            processBaseSchema(data === null || data === void 0 ? void 0 : data[k], v, (_d = uiSchema[k]) !== null && _d !== void 0 ? _d : {}, formContext, removeEntry);
+        }
+        if (k === 'opacity') {
+            uiSchema[k]['ui:field'] = 'opacity';
+        }
+        if (v && typeof v === 'object' && v['readOnly']) {
+            if (formContext === 'create') {
+                delete v['readOnly'];
+            }
+            if (formContext === 'update') {
+                removeEntry(k, data, schema, uiSchema);
+            }
+        }
+    }
+}

package/lib/formbuilder/objectform/source/geojsonsource.d.ts

@@ -1,19 +1,3 @@
-import { IDict } from '@jupytergis/schema';
-import { ISubmitEvent } from '@rjsf/core';
-import { PathBasedSourcePropertiesForm } from './pathbasedsource';
-import { ISourceFormProps } from './sourceform';
-/**
- * The form to modify a GeoJSON source.
- */
-export declare class GeoJSONSourcePropertiesForm extends PathBasedSourcePropertiesForm {
-    private _validate;
-    constructor(props: ISourceFormProps);
-    protected processSchema(data: IDict<any> | undefined, schema: IDict, uiSchema: IDict): void;
-    /**
-     * Validate the path, to avoid invalid path or invalid GeoJSON.
-     *
-     * @param path - the path to validate.
-     */
-    protected _validatePath(path: string | undefined): Promise<void>;
-    protected onFormSubmit(e: ISubmitEvent<any>): void;
-}
+import React from 'react';
+import type { ISourceFormProps } from './sourceform';
+export declare function GeoJSONSourcePropertiesForm(props: ISourceFormProps): React.ReactElement | null;

package/lib/formbuilder/objectform/source/geojsonsource.js

@@ -1,81 +1,122 @@
 import * as geojson from '@jupytergis/schema/src/schema/geojson.json';
 import { showErrorMessage } from '@jupyterlab/apputils';
 import { Ajv } from 'ajv';
-import { loadFile } from "../../../tools";
-import { PathBasedSourcePropertiesForm } from './pathbasedsource';
-/**
- * The form to modify a GeoJSON source.
- */
-export class GeoJSONSourcePropertiesForm extends PathBasedSourcePropertiesForm {
-    constructor(props) {
-        var _a, _b;
-        super(props);
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { deepCopy, loadFile } from "../../../tools";
+import { SchemaForm } from '../SchemaForm';
+import { FileSelectorWidget } from '../fileselectorwidget';
+import { processBaseSchema, removeFormEntry } from '../schemaUtils';
+import { useSchemaFormState } from '../useSchemaFormState';
+export function GeoJSONSourcePropertiesForm(props) {
+    const { schema: schemaProp, sourceData, syncData, model, filePath, formContext, dialogOptions, formErrorSignal, formSchemaRegistry, cancel, } = props;
+    const { formData, schema, formContextValue, hasSchema, handleChangeBase, handleSubmitBase, } = useSchemaFormState({
+        sourceData,
+        schemaProp,
+        model,
+        syncData,
+        cancel,
+        onAfterChange: dialogOptions
+            ? (data) => {
+                dialogOptions.sourceData = Object.assign({}, data);
+            }
+            : undefined,
+    });
+    const [extraErrors, setExtraErrors] = useState({});
+    const validateGeoJSON = useMemo(() => {
         const ajv = new Ajv();
-        this._validate = ajv.compile(geojson);
-        this._validatePath((_b = (_a = props.sourceData) === null || _a === void 0 ? void 0 : _a.path) !== null && _b !== void 0 ? _b : '');
-    }
-    processSchema(data, schema, uiSchema) {
-        this.removeFormEntry('data', data, schema, uiSchema);
-        if (this.props.formContext === 'create') {
-            schema.properties.path.description =
-                'The local path to a GeoJSON file. (If no path/url is provided, an empty GeoJSON is created.)';
-        }
-        super.processSchema(data, schema, uiSchema);
-    }
-    /**
-     * Validate the path, to avoid invalid path or invalid GeoJSON.
-     *
-     * @param path - the path to validate.
-     */
-    async _validatePath(path) {
+        return ajv.compile(geojson);
+    }, []);
+    const validatePath = useCallback(async (path) => {
         var _a;
-        const extraErrors = this.state.extraErrors;
-        let error = '';
+        const nextErrors = {};
         let valid = true;
-        if (path) {
+        let error = '';
+        if (!path || !path.trim()) {
+            valid = false;
+            error = 'Path is required';
+        }
+        else {
             try {
                 const geoJSONData = await loadFile({
                     filepath: path,
-                    type: this.props.sourceType,
-                    model: this.props.model,
+                    type: 'GeoJSONSource',
+                    model,
                 });
-                valid = this._validate(geoJSONData);
+                valid = validateGeoJSON(geoJSONData);
                 if (!valid) {
                     error = `"${path}" is not a valid GeoJSON file`;
                 }
             }
             catch (e) {
+                valid = false;
                 error = `"${path}" is not a valid GeoJSON file: ${e}`;
             }
         }
         if (!valid) {
-            extraErrors.path = {
-                __errors: [error],
-            };
-            (_a = this._validate.errors) === null || _a === void 0 ? void 0 : _a.reverse().forEach(error => {
-                extraErrors.path.__errors.push(error.message);
-            });
-            this.setState(old => (Object.assign(Object.assign({}, old), { extraErrors })));
+            nextErrors.path = { __errors: [error] };
+            if ((_a = validateGeoJSON.errors) === null || _a === void 0 ? void 0 : _a.length) {
+                validateGeoJSON.errors.reverse().forEach(err => {
+                    var _a;
+                    nextErrors.path.__errors.push((_a = err.message) !== null && _a !== void 0 ? _a : '');
+                });
+            }
         }
         else {
-            this.setState(old => (Object.assign(Object.assign({}, old), { extraErrors: Object.assign(Object.assign({}, extraErrors), { path: { __errors: [] } }) })));
+            nextErrors.path = { __errors: [] };
         }
-        if (this.props.formErrorSignal) {
-            this.props.formErrorSignal.emit(!valid);
+        setExtraErrors(nextErrors);
+        formErrorSignal === null || formErrorSignal === void 0 ? void 0 : formErrorSignal.emit(!valid);
+    }, [model, validateGeoJSON, formErrorSignal]);
+    const uiSchema = useMemo(() => {
+        var _a, _b;
+        const builtUiSchema = {};
+        const dataCopy = deepCopy(formData);
+        removeFormEntry('data', dataCopy, schema, builtUiSchema);
+        if (formContext === 'create' && ((_a = schema.properties) === null || _a === void 0 ? void 0 : _a.path)) {
+            schema.properties.path.description =
+                'The local path to a GeoJSON file. (If no path/url is provided, an empty GeoJSON is created.)';
         }
-    }
-    onFormSubmit(e) {
-        var _a, _b, _c;
-        if (((_c = (_b = (_a = this.state.extraErrors) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.__errors) === null || _c === void 0 ? void 0 : _c.length) >= 1) {
-            showErrorMessage('Invalid file', this.state.extraErrors.path.__errors[0]);
+        processBaseSchema(dataCopy, schema, builtUiSchema, formContext, removeFormEntry);
+        const docManager = formSchemaRegistry === null || formSchemaRegistry === void 0 ? void 0 : formSchemaRegistry.getDocManager();
+        if (((_b = schema.properties) === null || _b === void 0 ? void 0 : _b.path) && docManager) {
+            builtUiSchema.path = {
+                'ui:widget': FileSelectorWidget,
+                'ui:options': {
+                    docManager,
+                    formOptions: props,
+                },
+            };
+        }
+        return builtUiSchema;
+    }, [schema, formData, formContext, formSchemaRegistry, props]);
+    const handleChange = useCallback((data) => {
+        handleChangeBase(data);
+        if (data.path !== undefined) {
+            validatePath(data.path);
+        }
+    }, [handleChangeBase, validatePath]);
+    const handleSubmit = useCallback((data) => {
+        var _a, _b;
+        if (((_b = (_a = extraErrors === null || extraErrors === void 0 ? void 0 : extraErrors.path) === null || _a === void 0 ? void 0 : _a.__errors) === null || _b === void 0 ? void 0 : _b.length) >= 1) {
+            showErrorMessage('Invalid file', extraErrors.path.__errors[0]);
             return;
         }
-        if (!e.formData.path) {
-            e.formData.data = {
-                type: 'FeatureCollection',
-                features: [],
-            };
+        let submitted = Object.assign({}, data);
+        if (!submitted.path) {
+            submitted = Object.assign(Object.assign({}, submitted), { data: {
+                    type: 'FeatureCollection',
+                    features: [],
+                } });
+        }
+        handleSubmitBase(submitted);
+    }, [extraErrors, handleSubmitBase]);
+    useEffect(() => {
+        if (formData === null || formData === void 0 ? void 0 : formData.path) {
+            validatePath(formData === null || formData === void 0 ? void 0 : formData.path);
         }
-        super.onFormSubmit(e);
+    }, []);
+    if (!hasSchema) {
+        return null;
     }
+    return (React.createElement(SchemaForm, { schema: schema, formData: formData, onChange: handleChange, onSubmit: handleSubmit, formContext: formContextValue, filePath: filePath, uiSchema: uiSchema, extraErrors: extraErrors, formErrorSignal: formErrorSignal }));
 }

package/lib/formbuilder/objectform/source/geotiffsource.d.ts

@@ -1,20 +1,3 @@
-import { IDict } from '@jupytergis/schema';
-import { IChangeEvent, ISubmitEvent } from '@rjsf/core';
-import { ISourceFormProps, SourcePropertiesForm } from './sourceform';
-/**
- * The form to modify a GeoTiff source.
- */
-export declare class GeoTiffSourcePropertiesForm extends SourcePropertiesForm {
-    private _isSubmitted;
-    constructor(props: ISourceFormProps);
-    protected processSchema(data: IDict<any> | undefined, schema: IDict, uiSchema: IDict): void;
-    protected onFormChange(e: IChangeEvent): void;
-    protected onFormBlur(id: string, value: any): void;
-    protected onFormSubmit(e: ISubmitEvent<any>): Promise<void>;
-    /**
-     * Validate the URLs, ensuring that there is at least one object with required fields.
-     *
-     * @param urls - the URLs array to validate.
-     */
-    private _validateUrls;
-}
+import React from 'react';
+import type { ISourceFormProps } from './sourceform';
+export declare function GeoTiffSourcePropertiesForm(props: ISourceFormProps): React.ReactElement | null;

package/lib/formbuilder/objectform/source/geotiffsource.js

@@ -1,80 +1,36 @@
 import { showErrorMessage } from '@jupyterlab/apputils';
-import { FileSelectorWidget } from "../fileselectorwidget";
-import { getMimeType } from "../../../tools";
-import { SourcePropertiesForm } from './sourceform';
-/**
- * The form to modify a GeoTiff source.
- */
-export class GeoTiffSourcePropertiesForm extends SourcePropertiesForm {
-    constructor(props) {
-        var _a, _b;
-        super(props);
-        this._isSubmitted = false;
-        this._validateUrls((_b = (_a = props.sourceData) === null || _a === void 0 ? void 0 : _a.urls) !== null && _b !== void 0 ? _b : []);
-    }
-    processSchema(data, schema, uiSchema) {
-        var _a;
-        super.processSchema(data, schema, uiSchema);
-        if (!schema.properties || !data) {
-            return;
-        }
-        // Customize the widget for urls
-        if (schema.properties && schema.properties.urls) {
-            const docManager = (_a = this.props.formChangedSignal) === null || _a === void 0 ? void 0 : _a.sender.props.formSchemaRegistry.getDocManager();
-            uiSchema.urls = Object.assign(Object.assign({}, uiSchema.urls), { items: Object.assign(Object.assign({}, uiSchema.urls.items), { url: {
-                        'ui:widget': FileSelectorWidget,
-                        'ui:options': {
-                            docManager,
-                            formOptions: this.props,
-                        },
-                    } }) });
-        }
-        // This is not user-editable
-        delete schema.properties.valid;
-    }
-    onFormChange(e) {
-        var _a;
-        super.onFormChange(e);
-        if ((_a = e.formData) === null || _a === void 0 ? void 0 : _a.urls) {
-            this._validateUrls(e.formData.urls);
-        }
-    }
-    onFormBlur(id, value) {
-        // Is there a better way to spot the url text entry?
-        if (!id.endsWith('_urls')) {
-            return;
-        }
-        this._validateUrls(value);
-    }
-    async onFormSubmit(e) {
-        this._isSubmitted = true;
-        // validate urls.url only when submitting for better performance
-        const { valid, errors } = await this._validateUrls(e.formData.urls);
-        if (!valid) {
-            if (errors.length > 0) {
-                showErrorMessage('Invalid URLs', errors[0]);
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { deepCopy, getMimeType } from "../../../tools";
+import { SchemaForm } from '../SchemaForm';
+import { FileSelectorWidget } from '../fileselectorwidget';
+import { processBaseSchema, removeFormEntry } from '../schemaUtils';
+import { useSchemaFormState } from '../useSchemaFormState';
+export function GeoTiffSourcePropertiesForm(props) {
+    const { schema: schemaProp, sourceData, syncData, model, filePath, formContext, sourceType, dialogOptions, formErrorSignal, formSchemaRegistry, cancel, } = props;
+    const { formData, formContextValue, hasSchema, handleChangeBase, handleSubmitBase, } = useSchemaFormState({
+        sourceData,
+        schemaProp,
+        model,
+        syncData,
+        cancel,
+        onAfterChange: dialogOptions
+            ? (data) => {
+                dialogOptions.sourceData = Object.assign({}, data);
             }
-            return;
-        }
-        super.onFormSubmit(e);
-    }
-    /**
-     * Validate the URLs, ensuring that there is at least one object with required fields.
-     *
-     * @param urls - the URLs array to validate.
-     */
-    async _validateUrls(urls) {
-        const extraErrors = this.state.extraErrors;
+            : undefined,
+    });
+    const [extraErrors, setExtraErrors] = useState({});
+    const validateUrls = useCallback(async (urls, isSubmit) => {
         const errors = [];
         let valid = true;
         if (urls && urls.length > 0) {
             for (let i = 0; i < urls.length; i++) {
                 const { url, min, max } = urls[i];
-                if (this._isSubmitted) {
+                if (isSubmit) {
                     const mimeType = getMimeType(url);
                     if (!mimeType || !mimeType.startsWith('image/tiff')) {
                         valid = false;
-                        errors.push(`"${url}" is not a valid ${this.props.sourceType} file.`);
+                        errors.push(`"${url}" is not a valid ${sourceType} file.`);
                     }
                 }
                 else {
@@ -103,15 +59,58 @@ export class GeoTiffSourcePropertiesForm extends SourcePropertiesForm {
             errors.push('At least one valid URL with min/max values is required.');
             valid = false;
         }
-        if (!valid) {
-            this.setState(old => (Object.assign(Object.assign({}, old), { extraErrors: Object.assign(Object.assign({}, extraErrors), { urls: { __errors: errors } }) })));
+        const nextErrors = valid
+            ? { urls: { __errors: [] } }
+            : { urls: { __errors: errors } };
+        setExtraErrors(nextErrors);
+        formErrorSignal === null || formErrorSignal === void 0 ? void 0 : formErrorSignal.emit(!valid);
+        return { valid, errors };
+    }, [sourceType, formErrorSignal]);
+    const schema = useMemo(() => {
+        const schemaCopy = deepCopy(schemaProp !== null && schemaProp !== void 0 ? schemaProp : {});
+        if (schemaCopy.properties) {
+            delete schemaCopy.properties.valid;
         }
-        else {
-            this.setState(old => (Object.assign(Object.assign({}, old), { extraErrors: Object.assign(Object.assign({}, extraErrors), { urls: { __errors: [] } }) })));
+        return schemaCopy;
+    }, [schemaProp]);
+    const uiSchema = useMemo(() => {
+        var _a, _b;
+        const builtUiSchema = {};
+        const dataCopy = deepCopy(formData);
+        processBaseSchema(dataCopy, schema, builtUiSchema, formContext, removeFormEntry);
+        const docManager = formSchemaRegistry === null || formSchemaRegistry === void 0 ? void 0 : formSchemaRegistry.getDocManager();
+        if (((_a = schema.properties) === null || _a === void 0 ? void 0 : _a.urls) && docManager) {
+            builtUiSchema.urls = Object.assign(Object.assign({}, builtUiSchema.urls), { items: Object.assign(Object.assign({}, (_b = builtUiSchema.urls) === null || _b === void 0 ? void 0 : _b.items), { url: {
+                        'ui:widget': FileSelectorWidget,
+                        'ui:options': {
+                            docManager,
+                            formOptions: props,
+                        },
+                    } }) });
         }
-        if (this.props.formErrorSignal) {
-            this.props.formErrorSignal.emit(!valid);
+        return builtUiSchema;
+    }, [schema, formData, formContext, formSchemaRegistry, props]);
+    const handleChange = useCallback((data) => {
+        handleChangeBase(data);
+        if (data.urls) {
+            validateUrls(data.urls, false);
         }
-        return { valid, errors };
+    }, [handleChangeBase, validateUrls]);
+    const handleSubmit = useCallback(async (data) => {
+        const { valid, errors } = await validateUrls(data.urls, true);
+        if (!valid) {
+            if (errors.length > 0) {
+                showErrorMessage('Invalid URLs', errors[0]);
+            }
+            return;
+        }
+        handleSubmitBase(data);
+    }, [validateUrls, handleSubmitBase]);
+    useEffect(() => {
+        validateUrls(formData === null || formData === void 0 ? void 0 : formData.urls, false);
+    }, []);
+    if (!hasSchema) {
+        return null;
     }
+    return (React.createElement(SchemaForm, { schema: schema, formData: formData, onChange: handleChange, onSubmit: handleSubmit, formContext: formContextValue, filePath: filePath, uiSchema: uiSchema, extraErrors: extraErrors, formErrorSignal: formErrorSignal }));
 }