@luomus/laji-form 15.1.5 → 15.1.7

package/lib/components/LajiForm.js

@@ -0,0 +1,616 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_dom_1 = require("react-dom");
+const PropTypes = require("prop-types");
+const validation_1 = require("../validation");
+const validation_2 = require("../validation");
+const components_1 = require("./components");
+const utils_1 = require("../utils");
+const equals = require("deep-equal");
+const validator_ajv6_1 = require("@rjsf/validator-ajv6");
+const merge = require("deepmerge");
+const ReactContext_1 = require("../ReactContext");
+const stub_1 = require("../themes/stub");
+const core_1 = require("@rjsf/core");
+const ApiClient_1 = require("../ApiClient");
+const Context_1 = require("../Context");
+const translations = require("../translations.json");
+const key_handler_service_1 = require("../services/key-handler-service");
+const settings_service_1 = require("../services/settings-service");
+const focus_service_1 = require("../services/focus-service");
+const blocker_service_1 = require("../services/blocker-service");
+const custom_event_service_1 = require("../services/custom-event-service");
+const submit_hook_service_1 = require("../services/submit-hook-service");
+const dom_id_service_1 = require("../services/dom-id-service");
+const id_service_1 = require("../services/id-service");
+const root_instance_service_1 = require("../services/root-instance-service");
+const singleton_map_service_1 = require("../services/singleton-map-service");
+const fields = importLocalComponents("fields", [
+    "SchemaField",
+    { "ArraySchemaField": "SchemaField" },
+    "ArrayField",
+    "ObjectField",
+    "NestField",
+    "ArrayBulkField",
+    "ArrayBulkField",
+    "ScopeField",
+    "SelectTreeField",
+    "GridLayoutField",
+    "TableField",
+    "InjectField",
+    "InjectDefaultValueField",
+    "ArrayCombinerField",
+    "DependentBooleanField",
+    "DependentDisableField",
+    "MapArrayField",
+    "AutoArrayField",
+    "AutosuggestField",
+    "HiddenField",
+    "InitiallyHiddenField",
+    "ContextInjectionField",
+    "ImageArrayField",
+    "SplitField",
+    "FlatField",
+    "SingleActiveArrayField",
+    "SingleItemArrayField",
+    "UnitShorthandField",
+    "CombinedValueDisplayField",
+    "UiFieldMapperArrayField",
+    "ExtraLabelRowField",
+    "SumField",
+    "NamedPlaceChooserField",
+    "NamedPlaceSaverField",
+    "MapField",
+    "GeocoderField",
+    "TagArrayField",
+    "StringToArrayField",
+    "ConditionalOnChangeField",
+    "ConditionalUiSchemaField",
+    "AnnotationField",
+    "PrefillingArrayField",
+    "AnyToBooleanField",
+    "EnumRangeArrayField",
+    "UnitListShorthandArrayField",
+    "LocationChooserField",
+    "DataLeakerField",
+    "LocalityField",
+    "ImageDisplayField",
+    "FakePropertyField",
+    "SectionArrayField",
+    "MultiArrayField",
+    "AudioArrayField",
+    "FilterArrayField",
+    "MultiAnyToBooleanField",
+    "UnitCountShorthandField",
+    "ToggleAdditionalArrayFieldsField",
+    "DefaultValueArrayField",
+    "UiFieldApplierField",
+    "MultiLanguageField",
+    "SortArrayField",
+    "InputWithDefaultValueButtonField",
+    "MultiTagArrayField",
+    "PdfArrayField",
+    "AsArrayField",
+    { "InputTransformerField": "ConditionalOnChangeField" },
+    { "ConditionalField": "ConditionalUiSchemaField" },
+    { "UnitRapidField": "UnitShorthandField" },
+    { "AccordionArrayField": "SingleActiveArrayField" } // Alias for backward compatibility.
+]);
+const widgets = importLocalComponents("widgets", [
+    "CheckboxWidget",
+    "SelectWidget",
+    "TextareaWidget",
+    "DateTimeWidget",
+    "DateWidget",
+    "TimeWidget",
+    "SeparatedDateTimeWidget",
+    "AutosuggestWidget",
+    "HiddenWidget",
+    "PlainTextWidget",
+    "TextSelectWidget",
+    "ImageSelectWidget",
+    "AnyToBooleanWidget",
+    "URLWidget",
+    "InformalTaxonGroupChooserWidget",
+    "TaxonImageWidget",
+    "UpperCaseWidget",
+    "NumberWidget",
+    "InputGroupWidget",
+    "InputWithDefaultValueButtonWidget"
+]);
+const templates = importLocalComponents("templates", [
+    "BaseInputTemplate",
+    "DescriptionField",
+    { "TitleFieldTemplate": "TitleField" },
+    { "DescriptionFieldTemplate": "DescriptionField" },
+    "FieldTemplate",
+    "ArrayFieldTemplate",
+    "ErrorListTemplate",
+    "ObjectFieldTemplate"
+]);
+function importLocalComponents(dir, fieldNames) {
+    return fieldNames.reduce((fields, field) => {
+        if (typeof field === "string") {
+            fields[field] = require(`./${dir}/${field}`).default;
+        }
+        else {
+            const fieldName = Object.keys(field)[0];
+            if (typeof field[fieldName] === "string") {
+                fields[fieldName] = require(`./${dir}/${field[fieldName]}`).default;
+            }
+            else {
+                fields[fieldName] = field[fieldName];
+            }
+        }
+        return fields;
+    }, {});
+}
+// Each form should have a unique id to keep Context private.
+let id = 0;
+function getNewId() {
+    const _id = id;
+    id++;
+    return _id;
+}
+class LajiForm extends React.Component {
+    constructor(props) {
+        super(props);
+        this.translations = this.constructTranslations();
+        this.bgJobRef = React.createRef();
+        this.shortcutHelpRef = React.createRef();
+        this.propagateSubmit = true;
+        this.formRef = React.createRef();
+        this.validating = false;
+        this.eventListeners = [];
+        this.timeouts = [];
+        this.onSubmitHooksChange = (submitHooks, callback) => {
+            this.setState({ submitHooks }, callback);
+        };
+        this.getDefaultNotifier = () => {
+            if (this.defaultNotifier)
+                return this.defaultNotifier;
+            this.defaultNotifier = ["success", "info", "warning", "error"].reduce((notifier, method) => {
+                notifier[method] = msg => console.warn(`Notification component not specified for LajiForm! Got '${method}'notification: '${msg}'`);
+                return notifier;
+            }, {});
+            return this.defaultNotifier;
+        };
+        this.onChange = ({ formData }) => {
+            this.setState({ formData }, () => {
+                if (this.props.onChange) {
+                    const _formData = this.props.optimizeOnChange
+                        ? formData
+                        : this.memoizedFormContext.services.ids.removeLajiFormIds(formData);
+                    this.props.onChange(_formData);
+                }
+                this.memoizedFormContext.services.ids.setFormData(formData);
+                this.memoizedFormContext.services.rootInstance.setFormData(formData);
+                !this.validating && this.validate(!!"warnings", !"nonlive");
+            });
+        };
+        this.getFields = (_fields) => (Object.assign(Object.assign({}, fields), (_fields || {})));
+        this.getWidgets = (_widgets) => (Object.assign(Object.assign({}, widgets), (_widgets || {})));
+        this.getTemplates = (_templates) => (Object.assign(Object.assign({}, templates), (_templates || {})));
+        this.getContext = (props, context) => {
+            const nextKey = ["theme"].reduce((key, prop) => {
+                key[prop] = props[prop];
+                return key;
+            }, {});
+            if (this.contextMemoizeKey && Object.keys(this.contextMemoizeKey).every(k => this.contextMemoizeKey[k] === nextKey[k])) {
+                return this.memoizedContext;
+            }
+            else {
+                this.contextMemoizeKey = nextKey;
+                this.memoizedContext = {
+                    theme: props.theme || (context === null || context === void 0 ? void 0 : context.theme) || stub_1.default,
+                };
+                return this.memoizedContext;
+            }
+        };
+        this.renderSubmitHooks = () => {
+            if (!this.state || !this.state.submitHooks)
+                return;
+            const jobsAmount = this.state.submitHooks.filter(({ failed }) => !failed).length;
+            const runningAmount = this.state.submitHooks.reduce((count, { running }) => running ? count + 1 : count, 0);
+            if (!this.state.runningSubmitHooks)
+                return null;
+            const { ProgressBar } = this.getContext(this.props, this.context).theme;
+            return (React.createElement("div", { className: "running-jobs" },
+                this.state.formContext.translations.PendingRunningJobs,
+                "... (",
+                jobsAmount - runningAmount + 1,
+                " / ",
+                jobsAmount,
+                ")",
+                React.createElement(ProgressBar, { now: 100 / jobsAmount * (jobsAmount - runningAmount) })));
+        };
+        this.validateAndSubmit = (warnings = true, onlySchema = false) => {
+            const { formData } = this.state;
+            const { onValidationError, onSubmit } = this.props;
+            return this.validate(warnings, true, onlySchema).then((valid) => {
+                if (formData !== this.state.formData) {
+                    this.validateAndSubmit(warnings, onlySchema);
+                }
+                else if (valid) {
+                    onSubmit && onSubmit({ formData: this.memoizedFormContext.services.ids.removeLajiFormIds(formData) });
+                }
+                else {
+                    onValidationError && onValidationError(this.state.extraErrors);
+                }
+            });
+        };
+        this.validate = (warnings = true, nonlive = true, onlySchema = false) => {
+            this.validating = true;
+            let live = true;
+            if (onlySchema) {
+                warnings = false;
+                nonlive = false;
+                live = false;
+            }
+            const block = nonlive || onlySchema;
+            const { formData } = this.state;
+            const { live: liveErrorValidators, rest: errorValidators } = splitLive(this.props.validators, this.props.schema.properties);
+            const { live: liveWarningValidators, rest: warningValidators } = splitLive(this.props.warnings, this.props.schema.properties);
+            let liveValidations = { errors: liveErrorValidators };
+            const validations = {};
+            if (!onlySchema && nonlive) {
+                validations.errors = errorValidators;
+            }
+            if (!onlySchema && warnings) {
+                liveValidations.warnings = liveWarningValidators;
+                if (nonlive) {
+                    validations.warnings = warningValidators;
+                }
+            }
+            if (!live) {
+                liveValidations = {};
+            }
+            const schemaErrors = nonlive || onlySchema
+                ? validator_ajv6_1.default.validateFormData(formData, this.props.schema, undefined, ((e) => validation_2.transformErrors(this.state.formContext.translations, e))).errorSchema
+                : {};
+            block && this.memoizedFormContext.services.blocker.push();
+            return new Promise(resolve => Promise.all([validation_1.default(validations, formData), validation_1.default(liveValidations, formData)]).then(([_validations, _liveValidations]) => {
+                if (nonlive || onlySchema) {
+                    this.cachedNonliveValidations = merge(schemaErrors, _validations);
+                    block && this.memoizedFormContext.services.blocker.pop();
+                }
+                const merged = merge(_liveValidations, !nonlive
+                    ? (this.cachedNonliveValidations || {})
+                    : merge(_validations, schemaErrors));
+                this.validating = false;
+                resolve(!Object.keys(merged).length);
+                !equals((this.state.extraErrors || {}), merged) && this.setState({ extraErrors: merged }, this.popErrorListIfNeeded);
+            }).catch((e) => {
+                block && this.memoizedFormContext.services.blocker.pop();
+                throw e;
+            }));
+            function splitLive(validators = {}, schema, live = {}, rest = {}) {
+                Object.keys(validators).forEach(key => {
+                    if (schema[key]) {
+                        live[key] = {};
+                        rest[key] = {};
+                        splitLive(validators[key], schema[key], live[key], rest[key]);
+                        if (Object.keys(live[key]).length === 0)
+                            delete live[key];
+                        if (Object.keys(rest[key]).length === 0)
+                            delete rest[key];
+                    }
+                    else {
+                        const container = validators[key].options && validators[key].options._live ? live : rest;
+                        container[key] = validators[key];
+                    }
+                });
+                return { live, rest };
+            }
+        };
+        this.onSubmit = (onlySchemaValidations) => {
+            const _onlySchemaValidations = onlySchemaValidations === "onlySchemaValidations";
+            const { uiSchema } = this.props;
+            if (uiSchema["ui:disabled"] || uiSchema["ui:readonly"]) {
+                return false;
+            }
+            this.memoizedFormContext.services.blocker.push();
+            this.setState({ runningSubmitHooks: true });
+            this.memoizedFormContext.services.submitHooks.checkHooks().then(() => {
+                this.memoizedFormContext.services.blocker.pop();
+                this.setState({ runningSubmitHooks: false });
+                this.validateAndSubmit(!_onlySchemaValidations, _onlySchemaValidations);
+            }).catch(() => {
+                var _a;
+                this.setState({ runningSubmitHooks: false });
+                this.memoizedFormContext.services.blocker.pop();
+                utils_1.highlightElem(react_dom_1.findDOMNode((_a = this.bgJobRef) === null || _a === void 0 ? void 0 : _a.current));
+            });
+            return undefined;
+        };
+        this.popErrorListIfNeeded = () => {
+            const errorList = this.memoizedFormContext.services.rootInstance.getErrorListInstance();
+            let errorListElem;
+            try {
+                errorListElem = react_dom_1.findDOMNode(errorList);
+            }
+            catch (e) {
+                // Empty
+            }
+            if (!errorListElem)
+                return;
+            const wouldScrollTo = utils_1.getScrollPositionForScrollIntoViewIfNeeded(errorListElem, this.props.topOffset, this.props.bottomOffset) || 0;
+            const scrollAmount = wouldScrollTo - utils_1.getWindowScrolled();
+            if (!errorList.state.poppedTouched && scrollAmount !== 0) {
+                errorList.expand();
+            }
+            utils_1.highlightElem(errorListElem);
+        };
+        this._onDefaultSubmit = (e) => {
+            e.preventDefault();
+            this.submit();
+        };
+        this.submit = () => {
+            this.onSubmit();
+        };
+        this.submitOnlySchemaValidations = () => {
+            this.onSubmit("onlySchemaValidations");
+        };
+        this.getShorcutButtonTooltip = () => {
+            const { translations } = this.state.formContext;
+            if (this.keyCombo) {
+                return utils_1.translate(translations, "ShortcutHelp", { key: utils_1.stringifyKeyCombo(this.keyCombo) });
+            }
+            return undefined;
+        };
+        this.toggleHelp = (e) => {
+            this.helpVisible ? this.dismissHelp(e) : this.showHelp();
+        };
+        this.showHelp = () => {
+            const node = react_dom_1.findDOMNode(this.shortcutHelpRef.current);
+            if (!this.helpVisible) {
+                if (node)
+                    node.className = node.className.replace(" hidden", "");
+                this.helpVisible = true;
+            }
+        };
+        this.dismissHelp = (e) => {
+            const node = react_dom_1.findDOMNode(this.shortcutHelpRef.current);
+            e.preventDefault();
+            e.stopPropagation();
+            if (this.helpVisible && node) {
+                node.className += " hidden";
+            }
+            this.helpVisible = false;
+            this.helpStarted = false;
+            document.removeEventListener("keyup", this.dismissHelp);
+            window.removeEventListener("blur", this.dismissHelp);
+            clearTimeout(this.helpTimeout);
+        };
+        this.keyFunctions = {
+            navigate: (e, { reverse }) => {
+                return this.memoizedFormContext.services.focus.focusNextInput(reverse);
+            },
+            help: (e, { delay }) => {
+                if (this.helpStarted)
+                    return false;
+                this.helpStarted = true;
+                this.helpTimeout = window.setTimeout(() => {
+                    this.showHelp();
+                }, delay * 1000);
+                this.addEventListener(document, "keyup", this.dismissHelp);
+                this.addEventListener(window, "blur", this.dismissHelp);
+                return false;
+            },
+            revalidate: () => {
+                this.submit();
+            }
+        };
+        this.pushBlockingLoader = () => {
+            this.memoizedFormContext.services.blocker.push();
+        };
+        this.popBlockingLoader = () => {
+            this.memoizedFormContext.services.blocker.pop();
+        };
+        this.onSettingsChange = (settings, global = false) => {
+            if (this.props.onSettingsChange)
+                this.props.onSettingsChange(settings, global);
+        };
+        this.addEventListener = (target, name, fn) => {
+            target.addEventListener(name, fn);
+            this.eventListeners.push([target, name, fn]);
+        };
+        this.setTimeout = (fn, time = 0) => {
+            const timeout = window.setTimeout(fn, time);
+            this.timeouts.push(timeout);
+            return timeout;
+        };
+        this.destroy = () => {
+            if (this.eventListeners)
+                this.eventListeners.forEach(([target, name, fn]) => {
+                    target.removeEventListener(name, fn);
+                });
+            if (this.timeouts)
+                this.timeouts.forEach((timeout) => {
+                    clearTimeout(timeout);
+                });
+            this.eventListeners = [];
+        };
+        if (props.apiClient) {
+            this.apiClient = new ApiClient_1.default(props.apiClient, props.lang, this.translations);
+        }
+        validation_2.initializeValidation(this.apiClient);
+        this._id = getNewId();
+        this.getMemoizedFormContext(props); // Initialize form context.
+        this.resetShortcuts((props.uiSchema || {})["ui:shortcuts"]);
+        this.state = this.getStateFromProps(props);
+    }
+    UNSAFE_componentWillReceiveProps(props) {
+        if (props.apiClient && props.apiClient !== this.apiClient) {
+            this.apiClient = new ApiClient_1.default(props.apiClient, props.lang, this.translations);
+        }
+        if (this.apiClient && "lang" in props && this.props.lang !== props.lang) {
+            this.apiClient.setLang(props.lang);
+        }
+        this.setState(this.getStateFromProps(props));
+    }
+    getStateFromProps(props) {
+        const state = {
+            formContext: this.getMemoizedFormContext(props)
+        };
+        if (((!this.state && props.schema && Object.keys(props.schema).length) || (this.state && !("formData" in this.state))) || ("formData" in props && props.formData !== this.props.formData)) {
+            state.formData = state.formContext.services.ids.addLajiFormIds(utils_1.getDefaultFormState(props.schema, props.formData, props.schema))[0];
+        }
+        else if (this.state && this.formRef.current) {
+            state.formData = this.formRef.current.state.formData;
+        }
+        if (this.state && props.schema !== this.props.schema) {
+            state.extraErrors = {};
+        }
+        this.memoizedFormContext.services.ids.setFormData(state.formData);
+        this.memoizedFormContext.services.rootInstance.setFormData(state.formData);
+        return state;
+    }
+    getMemoizedFormContext(props) {
+        const nextKey = ["lang", "topOffset", "bottomOffset", "formContext", "settings", "schema", "uiSchemaContext", "lajiGeoServerAddress"].reduce((key, prop) => {
+            key[prop] = props[prop];
+            return key;
+        }, {});
+        if (this.contextFormMemoizeKey && Object.keys(this.contextFormMemoizeKey).every(k => this.contextFormMemoizeKey[k] === nextKey[k])) {
+            return this.memoizedFormContext;
+        }
+        else {
+            this.contextFormMemoizeKey = nextKey;
+            const { services } = this.memoizedFormContext || {};
+            this.memoizedFormContext = Object.assign(Object.assign({}, props.formContext), { translations: this.translations[props.lang], lang: props.lang, uiSchemaContext: props.uiSchemaContext || {}, topOffset: props.topOffset || 0, bottomOffset: props.bottomOffset || 0, contextId: this._id, formID: props.id, googleApiKey: props.googleApiKey, notifier: props.notifier || this.getDefaultNotifier(), apiClient: this.apiClient, Label: (props.fields || {}).Label || components_1.Label, mediaMetadata: props.mediaMetadata, setTimeout: this.setTimeout, services: {}, formRef: this.formRef, lajiGeoServerAddress: props.lajiGeoServerAddress, globals: Context_1.default(this._id) });
+            this.memoizedFormContext.utils = utils_1.ReactUtils(this.memoizedFormContext);
+            if (services) {
+                this.memoizedFormContext.services = services;
+                services.keyHandler.setFormContext(this.memoizedFormContext);
+                services.focus.setFormContext(this.memoizedFormContext);
+                services.settings.setSettings(props.settings);
+                services.ids.setSchema(props.schema);
+                services.rootInstance.setSchema(props.schema);
+            }
+            else {
+                this.memoizedFormContext.services.keyHandler = new key_handler_service_1.default(this.memoizedFormContext);
+                this.memoizedFormContext.services.settings = new settings_service_1.default(this.onSettingsChange, props.settings);
+                this.memoizedFormContext.services.focus = new focus_service_1.default(this.memoizedFormContext);
+                this.memoizedFormContext.services.blocker = new blocker_service_1.default(this.memoizedFormContext);
+                this.memoizedFormContext.services.customEvents = new custom_event_service_1.default();
+                this.memoizedFormContext.services.submitHooks = new submit_hook_service_1.default(this.onSubmitHooksChange);
+                this.memoizedFormContext.services.DOMIds = new dom_id_service_1.default();
+                this.memoizedFormContext.services.ids = new id_service_1.default(props.schema, props.formData);
+                this.memoizedFormContext.services.rootInstance = new root_instance_service_1.default(props.schema, props.formData, (formData) => this.onChange({ formData }), this.validate, () => this.validateAndSubmit(false));
+                this.memoizedFormContext.services.singletonMap = new singleton_map_service_1.default();
+            }
+            return this.memoizedFormContext;
+        }
+    }
+    componentDidMount() {
+        this.mounted = true;
+        this.memoizedFormContext.services.rootInstance.setIsMounted(true);
+        this.props.autoFocus && this.memoizedFormContext.utils.focusById("root");
+        Object.keys(this.memoizedFormContext.services).forEach(service => {
+            var _a, _b;
+            (_b = (_a = this.memoizedFormContext.services[service]).initialize) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+        if (this.props.componentDidMount)
+            this.props.componentDidMount();
+    }
+    componentWillUnmount() {
+        this.mounted = false;
+        this.memoizedFormContext.services.rootInstance.setIsMounted(false);
+        Object.keys(this.memoizedFormContext.services).forEach(service => {
+            var _a, _b;
+            (_b = (_a = this.memoizedFormContext.services[service]).destroy) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+    }
+    componentDidCatch(e, i) {
+        this.setState({ error: true });
+        if (this.props.onError) {
+            this.props.onError(e, i);
+        }
+    }
+    componentDidUpdate(prevProps) {
+        if ((prevProps.uiSchema || {})["ui:shortcuts"] !== (this.props.uiSchema || {})["ui:shortcuts"]) {
+            this.resetShortcuts((this.props.uiSchema || {})["ui:shortcuts"]);
+        }
+    }
+    resetShortcuts(shortcuts = {}) {
+        this.memoizedFormContext.services.keyHandler.setShortcuts(shortcuts, this.keyFunctions);
+        Object.keys(shortcuts).some(keyCombo => {
+            if (shortcuts[keyCombo].fn == "help") {
+                this.keyCombo = keyCombo;
+                return true;
+            }
+            return false;
+        });
+    }
+    constructTranslations() {
+        return utils_1.constructTranslations(translations);
+    }
+    render() {
+        if (this.state.error)
+            return null;
+        const { translations } = this.state.formContext;
+        const { "ui:shortcuts": shortcuts, "ui:showShortcutsButton": showShortcutsButton = true, "ui:readonly": readonly, "ui:disabled": disabled } = this.props.uiSchema;
+        const uiSchema = Object.assign(Object.assign({}, this.props.uiSchema), { "ui:submitButtonOptions": {
+                norender: true
+            } });
+        const { Panel, Table } = this.getContext(this.props, this.context).theme;
+        const panelHeader = (React.createElement("h3", null,
+            translations.Shortcuts,
+            React.createElement("button", { type: "button", className: "close pull-right", onClick: this.dismissHelp }, "\u00D7")));
+        return (React.createElement(ReactContext_1.default.Provider, { value: this.getContext(this.props, this.context) },
+            React.createElement("div", { className: "laji-form" },
+                showShortcutsButton && this.props.showShortcutButton !== false && shortcuts && (React.createElement(components_1.TooltipComponent, { tooltip: this.getShorcutButtonTooltip() },
+                    React.createElement(components_1.Button, { variant: undefined, onClick: this.toggleHelp }, translations.Shortcuts))),
+                React.createElement(components_1.FailedBackgroundJobsPanel, { jobs: this.state.submitHooks, schema: this.props.schema, uiSchema: uiSchema, formContext: this.state.formContext, errorClickHandler: this.memoizedFormContext.services.focus.focus, ref: this.bgJobRef }),
+                React.createElement(core_1.default, Object.assign({}, this.props, { formData: this.state.formData, uiSchema: uiSchema, ref: this.formRef, onChange: this.onChange, onSubmit: this.onSubmit, fields: this.getFields(this.props.fields), widgets: this.getWidgets(this.props.widgets), templates: this.getTemplates(this.props.templates), formContext: this.state.formContext, validator: validator_ajv6_1.default, noValidate: true, extraErrors: this.state.extraErrors, noHtml5Validate: true, liveValidate: true, autoComplete: "off", tagName: "div", readonly: readonly, disabled: disabled }), this.props.children),
+                (!this.props.children && this.props.renderSubmit !== false) ? (React.createElement(components_1.Button, { id: "submit", onClick: this.submit, disabled: readonly || disabled }, this.props.submitText || translations.Submit)) : null,
+                shortcuts &&
+                    React.createElement(Panel, { ref: this.shortcutHelpRef, className: "shortcut-help laji-form-popped z-depth-3 hidden", style: { top: (this.props.topOffset || 0) + 5, bottom: (this.props.bottomOffset || 0) + 5 }, variant: "info" },
+                        React.createElement(Panel.Heading, null, panelHeader),
+                        React.createElement(Table, null,
+                            React.createElement("tbody", { className: "well" }, Object.keys(shortcuts).map((keyCombo, idx) => {
+                                const _a = shortcuts[keyCombo], { fn, targetLabel, label } = _a, rest = __rest(_a, ["fn", "targetLabel", "label"]);
+                                if (["help", "autosuggestToggle"].includes(fn) || fn === "navigateSection" && rest.goOverRow)
+                                    return;
+                                let translation = "";
+                                if (translation)
+                                    translation = label;
+                                else
+                                    translation = translations[[fn, ...Object.keys(rest)].map(utils_1.capitalizeFirstLetter).join("")];
+                                if (targetLabel)
+                                    translation = `${translation} ${targetLabel}`;
+                                return (React.createElement("tr", { key: idx },
+                                    React.createElement("td", null, utils_1.stringifyKeyCombo(keyCombo)),
+                                    React.createElement("td", null, translation)));
+                            })))),
+                this.renderSubmitHooks())));
+    }
+    getSettings(global = false) {
+        return this.memoizedFormContext.services.settings.getSettings(global);
+    }
+}
+exports.default = LajiForm;
+LajiForm.contextType = ReactContext_1.default;
+LajiForm.propTypes = {
+    uiSchemaContext: PropTypes.object,
+    settings: PropTypes.object,
+    validators: PropTypes.object,
+    warnings: PropTypes.object,
+};
+LajiForm.defaultProps = {
+    lang: "en",
+    schema: {},
+    uiSchema: {}
+};

package/lib/components/VirtualSchemaField.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { FieldProps } from "./LajiForm";
+export declare function getPropsWithInnerUiSchema(props: FieldProps): FieldProps;
+declare type Constructor<LFC> = new (...args: any[]) => LFC;
+interface LajiFormComponentForVirtualSchemaField extends Omit<React.Component<FieldProps>, "render"> {
+    getStateFromProps?(propsWithInnerUiSchema: FieldProps, origProps: FieldProps): any;
+    render?(): React.ReactNode;
+}
+/**
+ * Virtual SchemaFields are components which are just state transforming machines.
+ */
+export default function VirtualSchemaField<LFC extends Constructor<LajiFormComponentForVirtualSchemaField>>(ComposedComponent: LFC): {
+    new (...args: any[]): {
+        getUiOptions(): any;
+        getStateFromProps: (props: FieldProps) => any;
+        render: () => React.ReactNode;
+        context: any;
+        readonly props: Readonly<FieldProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        componentDidMount?: (() => void) | undefined;
+        setState: <K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<FieldProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined) => void;
+        forceUpdate: (callback?: (() => void) | undefined) => void;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?: ((nextProps: Readonly<FieldProps>, nextState: Readonly<{}>, nextContext: any) => boolean) | undefined;
+        componentWillUnmount?: (() => void) | undefined;
+        componentDidCatch?: ((error: Error, errorInfo: React.ErrorInfo) => void) | undefined;
+        getSnapshotBeforeUpdate?: ((prevProps: Readonly<FieldProps>, prevState: Readonly<{}>) => any) | undefined;
+        componentDidUpdate?: ((prevProps: Readonly<FieldProps>, prevState: Readonly<{}>, snapshot?: any) => void) | undefined;
+        componentWillMount?: (() => void) | undefined;
+        UNSAFE_componentWillMount?: (() => void) | undefined;
+        componentWillReceiveProps?: ((nextProps: Readonly<FieldProps>, nextContext: any) => void) | undefined;
+        UNSAFE_componentWillReceiveProps?: ((nextProps: Readonly<FieldProps>, nextContext: any) => void) | undefined;
+        componentWillUpdate?: ((nextProps: Readonly<FieldProps>, nextState: Readonly<{}>, nextContext: any) => void) | undefined;
+        UNSAFE_componentWillUpdate?: ((nextProps: Readonly<FieldProps>, nextState: Readonly<{}>, nextContext: any) => void) | undefined;
+    };
+    displayName: string;
+} & LFC;
+export {};