@luomus/laji-form 15.1.4 → 15.1.6

package/lib/components/templates/ArrayFieldTemplate.js

@@ -0,0 +1,416 @@
+"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 });
+exports.arrayItemKeyFunctions = exports.arrayKeyFunctions = exports.ArrayFieldTemplateWithoutKeyHandling = exports.handlesArrayKeys = exports.getButtonsForPosition = exports.getButtonElems = exports.getButtons = exports.getButton = exports.beforeAdd = void 0;
+const React = require("react");
+const components_1 = require("../components");
+const merge = require("deepmerge");
+const utils_1 = require("../../utils");
+const Context_1 = require("../../Context");
+const ReactContext_1 = require("../../ReactContext");
+const react_sortable_hoc_1 = require("react-sortable-hoc");
+const utils_2 = require("@rjsf/utils");
+function onAdd(e, props) {
+    if (!utils_1.canAdd(props))
+        return;
+    props.onAddClick(e);
+}
+function beforeAdd(props, addedIdx) {
+    if (!utils_1.canAdd(props))
+        return;
+    const { contextId } = props.formContext;
+    const startIdx = props.startIdx || utils_1.getUiOptions(props.uiSchema).startIdx;
+    let { idToScrollAfterAdd = `${props.idSchema.$id}-add`, idxOffsets, totalOffset } = utils_1.getUiOptions(props.uiSchema || {});
+    let idx = addedIdx !== null && addedIdx !== void 0 ? addedIdx : (props.items || props.formData || []).length;
+    const offset = startIdx !== undefined
+        ? startIdx
+        : idxOffsets
+            ? utils_1.getIdxWithOffset(idx, idxOffsets, totalOffset) - idx
+            : 0;
+    idx = offset + idx;
+    let idToFocus = `${props.idSchema.$id}_${idx}`;
+    Context_1.default(contextId).idToFocus = idToFocus;
+    Context_1.default(contextId).idToScroll = idToScrollAfterAdd;
+}
+exports.beforeAdd = beforeAdd;
+const buttonDefinitions = {
+    add: {
+        glyph: "plus",
+        fn: (e) => (props) => {
+            onAdd(e, props);
+        },
+        beforeFn: beforeAdd
+    }
+};
+function getButton(button, props = {}) {
+    function handleButton(button) {
+        function rulesSatisfied(rules = {}) {
+            return Object.keys(rules || {}).every(ruleName => {
+                const ruleVal = rules[ruleName];
+                if (ruleName === "minLength") {
+                    return (props.formData || []).length >= ruleVal;
+                }
+                else if (ruleName === "canAdd") {
+                    return (button.id && button.id !== props.idSchema.$id) || utils_1.canAdd(props);
+                }
+            });
+        }
+        const fnName = button.fnName || button.fn;
+        const _buttonDefinitions = props.uiSchema && utils_1.getUiOptions(props.uiSchema).buttonDefinitions
+            ? merge(buttonDefinitions, utils_1.getUiOptions(props.uiSchema).buttonDefinitions)
+            : buttonDefinitions;
+        const definition = _buttonDefinitions[fnName];
+        const _button = Object.assign(Object.assign({}, (definition || {})), button);
+        if (!rulesSatisfied(_button.rules))
+            return;
+        if (!_button.fnName)
+            _button.fnName = fnName;
+        if (definition && typeof _button.fn !== "function")
+            _button.fn = _buttonDefinitions[fnName].fn;
+        if (fnName !== "add" || (utils_1.getUiOptions(props.uiSchema).renderAdd !== false && ((button.id && button.id !== props.idSchema.$id) || utils_1.canAdd(props))))
+            return _button;
+    }
+    button = handleButton(button);
+    if (!button)
+        return;
+    const id = button.id || (props.idSchema || {}).$id;
+    const buttonId = `${id}-${button.fnName}${button.key ? `-${button.key}` : ""}`;
+    return React.createElement(_Button, { key: buttonId, buttonId: buttonId, button: button, props: props });
+}
+exports.getButton = getButton;
+function _Button({ button, props, getProps, buttonId }) {
+    let { fn, fnName, glyph, label, className, callforward, beforeFn, callback, render, variant, tooltip, tooltipPlacement, tooltipClass, changesFormData, disabled, help, active } = button, options = __rest(button, ["fn", "fnName", "glyph", "label", "className", "callforward", "beforeFn", "callback", "render", "variant", "tooltip", "tooltipPlacement", "tooltipClass", "changesFormData", "disabled", "help", "active"]);
+    label = label !== undefined
+        ? (glyph ? ` ${label}` : label)
+        : "";
+    const onClick = React.useCallback(e => {
+        const onClickProps = getProps ? getProps() : props;
+        let _fn = () => fn(e)(onClickProps, options);
+        const __fn = () => {
+            beforeFn && beforeFn(onClickProps);
+            _fn();
+            callback && callback();
+        };
+        if (callforward) {
+            e.persist();
+            callforward(__fn);
+        }
+        else {
+            __fn();
+        }
+    }, [props, getProps, options, callforward, beforeFn, callback, fn]);
+    return render ? render(onClick, button) : (React.createElement(components_1.Button, { id: buttonId, className: className, onClick: onClick, variant: variant, active: active, tooltip: tooltip || help, tooltipPlacement: tooltipPlacement, tooltipClass: tooltipClass, disabled: disabled || ((fnName === "add" || changesFormData) && (props.disabled || props.readonly)), style: button.style },
+        glyph && React.createElement(ReactContext_1.default.Consumer, null, ({ theme: { Glyphicon } }) => React.createElement(Glyphicon, { glyph: glyph })),
+        glyph ? ` ${label}` : label,
+        help && React.createElement(components_1.Help, null)));
+}
+function getButtons(buttons = [], props = {}) {
+    const addBtnAdded = buttons.some(button => button.fn === "add");
+    if (!addBtnAdded && (!props || utils_1.canAdd(props)))
+        buttons = [{ fn: "add", id: props.idSchema.$id }, ...buttons];
+    return buttons;
+}
+exports.getButtons = getButtons;
+function getButtonElems(buttons = [], props = {}) {
+    buttons = getButtons(buttons, props);
+    let buttonElems = buttons.map(button => getButton(button, props));
+    if (props.uiSchema["ui:buttons"]) {
+        buttonElems = [...buttonElems, ...props.uiSchema["ui:buttons"]];
+    }
+    return getButtonsElem(buttonElems, props);
+}
+exports.getButtonElems = getButtonElems;
+function getButtonsElem(buttonElems = [], props = {}) {
+    if (!Array.isArray(buttonElems) || buttonElems.length === 0) {
+        return null;
+    }
+    return (React.createElement(ReactContext_1.default.Consumer, null, ({ theme: { ButtonToolbar } }) => React.createElement(ButtonToolbar, { className: utils_1.getUiOptions(props.uiSchema)["ui:buttonsDesktopLayout"] ? "desktop-layout" : undefined, key: "buttons" }, buttonElems)));
+}
+function getButtonsForPosition(props, buttonDescriptions = [], position, defaultPosition = "bottom") {
+    buttonDescriptions = buttonDescriptions.filter(button => button.position === position || (!button.position && position === defaultPosition));
+    return (buttonDescriptions && buttonDescriptions.length) ?
+        buttonDescriptions.map(buttonDescription => getButton(buttonDescription, props)).filter(button => button) :
+        null;
+}
+exports.getButtonsForPosition = getButtonsForPosition;
+function handlesArrayKeys(ComposedComponent) {
+    var _a;
+    return _a = class ArrayFieldTemplateField extends ComposedComponent {
+            constructor() {
+                super(...arguments);
+                this.onFocus = target => {
+                    const context = Context_1.default(this.props.formContext.contextId);
+                    if (target === "last") {
+                        context.idToFocus = `${this.props.idSchema.$id}_${this.props.formData.length - 1}`;
+                        context.idToScroll = `_laji-form_${this.props.idSchema.$id}_${this.props.formData.length - 2}`;
+                    }
+                    else {
+                        console.warn(`custom event "focus" has only "last" implemented. Target value was: ${target}`);
+                    }
+                };
+                this.onCopy = (options = {}) => {
+                    const { type = "blacklist", filter = [] } = options;
+                    const { buttonDefinitions = {} } = utils_1.getUiOptions(this.props.uiSchema);
+                    const { copy } = buttonDefinitions;
+                    if (copy) {
+                        copy.fn()(this.props, { type, filter });
+                        if (copy.callback) {
+                            copy.callback();
+                        }
+                    }
+                };
+            }
+            componentDidMount() {
+                this.addKeyHandlers(this.props);
+                this.addChildKeyHandlers(this.props);
+                this.addCustomEventListeners(this.props);
+                if (super.componentDidMount)
+                    super.componentDidMount();
+            }
+            componentDidUpdate(prevProps, prevState) {
+                this.removeKeyHandlers(prevProps);
+                this.addKeyHandlers(this.props);
+                this.removeChildKeyHandlers(prevProps);
+                this.addChildKeyHandlers(this.props);
+                this.removeCustomEventListeners(prevProps);
+                this.addCustomEventListeners(this.props);
+                if (super.componentDidUpdate)
+                    super.componentDidUpdate(prevProps, prevState);
+            }
+            componentWillUnmount() {
+                this.removeKeyHandlers(this.props);
+                this.removeChildKeyHandlers(this.props);
+                this.removeCustomEventListeners(this.props);
+                if (super.componentWillUnmount)
+                    super.componentWillUnmount();
+            }
+            addKeyHandlers() {
+                const [keys, options] = (super.getKeyHandlers || this.getKeyHandlers).call(this, this.props);
+                this.arrayKeyFunctions = keys;
+                this.props.formContext.services.keyHandler.addKeyHandler(this.props.idSchema.$id, keys, options);
+            }
+            removeKeyHandlers(props) {
+                this.props.formContext.services.keyHandler.removeKeyHandler(props.idSchema.$id, this.arrayKeyFunctions);
+            }
+            getKeyHandlers(props) {
+                const { arrayKeyFunctions: _arrayKeyFunctions } = utils_1.getUiOptions(props.uiSchema);
+                return [_arrayKeyFunctions ? Object.assign({}, _arrayKeyFunctions) : Object.assign({}, exports.arrayKeyFunctions), {
+                        getProps: () => this.props,
+                    }];
+            }
+            addChildKeyHandlers(props) {
+                this.childKeyHandlers = (super.getChildKeyHandlers || this.getChildKeyHandlers).call(this, props);
+                this.childKeyHandlers.forEach(handler => {
+                    this.props.formContext.services.keyHandler.addKeyHandler(...handler);
+                });
+            }
+            removeChildKeyHandlers() {
+                this.childKeyHandlers.forEach(handler => {
+                    this.props.formContext.services.keyHandler.removeKeyHandler(...handler);
+                });
+            }
+            getChildKeyHandlers(props) {
+                return props.items.map((item, i) => {
+                    const id = `${props.idSchema.$id}_${i}`;
+                    return [id, exports.arrayItemKeyFunctions, { getProps: () => this.props, id, getDeleteButton: () => {
+                                return this.deleteButtonRefs[i];
+                            } }];
+                });
+            }
+            getCustomEventListeners() {
+                return [
+                    ["focus", this.onFocus],
+                    ["copy", this.onCopy]
+                ];
+            }
+            addCustomEventListeners(props) {
+                const { customEvents } = props.formContext.services;
+                const customEventListeners = (super.getCustomEventListeners || this.getCustomEventListeners).call(this, props);
+                this.customEventListeners = customEventListeners;
+                customEventListeners.forEach(params => customEvents.add(props.idSchema.$id, ...params));
+            }
+            removeCustomEventListeners(props) {
+                const { customEvents } = props.formContext.services;
+                this.customEventListeners.forEach(params => customEvents.remove(props.idSchema.$id, ...params));
+            }
+        },
+        _a.displayName = utils_1.getReactComponentName(ComposedComponent) + "_handlesArrayKeys",
+        _a;
+}
+exports.handlesArrayKeys = handlesArrayKeys;
+const SortableList = react_sortable_hoc_1.SortableContainer(({ items, itemProps, nonOrderables, formData }) => (React.createElement("div", null, items.map((item, i) => {
+    return React.createElement(SortableItem, { key: utils_1.isObject(formData[i]) ? utils_1.getUUID(formData[i]) : i, index: i, item: item, disabled: (!itemProps[i].hasMoveDown && !itemProps[i].hasMoveUp) || nonOrderables.includes(i) });
+}))));
+const SortableItem = react_sortable_hoc_1.SortableElement(({ item }) => item);
+class ArrayFieldTemplateWithoutKeyHandling extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.onSort = ({ oldIndex, newIndex }) => {
+            this.props.items[oldIndex].onReorderClick(oldIndex, newIndex)();
+        };
+        this.onFocuses = [];
+        this.getOnFocus = (i) => () => {
+            Context_1.default(this.props.formContext.contextId)[`${this.props.idSchema.$id}.activeIdx`] = i + (utils_1.getUiOptions(this.props.uiSchema).startIdx || 0);
+        };
+    }
+    render() {
+        const { props } = this;
+        const { confirmDelete, renderTitleAsLabel, deleteCorner, removable = true, orderable, nonRemovables = [], nonOrderables = [], "ui:deleteHelp": deleteHelp, buttons = [] } = utils_1.getUiOptions(props.uiSchema);
+        const { readonly, disabled } = this.props;
+        const { Label } = this.props.formContext;
+        const Title = renderTitleAsLabel ? Label : utils_2.getTemplate("TitleFieldTemplate", props.registry, utils_1.getUiOptions(props.uiSchema));
+        const Description = utils_2.getTemplate("DescriptionFieldTemplate", this.props.registry, utils_1.getUiOptions(props.uiSchema));
+        if (!this.deleteButtonRefs)
+            this.deleteButtonRefs = [];
+        const _buttons = getButtons(buttons, props);
+        const topButtons = getButtonsElem(getButtonsForPosition(props, _buttons, "top"), props);
+        const bottomButtons = getButtonsElem(getButtonsForPosition(props, _buttons, "bottom"), props);
+        const getRefFor = i => elem => { this.deleteButtonRefs[i] = elem; };
+        const items = props.items.map((item, i) => {
+            const getDeleteButton = () => (React.createElement("div", { className: "laji-form-field-template-buttons" },
+                React.createElement(components_1.DeleteButton, { id: `${props.idSchema.$id}_${i}`, disabled: disabled || readonly, ref: getRefFor(i), onClick: item.onDropIndexClick(item.index), confirm: confirmDelete, corner: deleteCorner, tooltip: deleteHelp, translations: props.formContext.translations })));
+            if (!this.onFocuses[i]) {
+                this.onFocuses[i] = this.getOnFocus(i);
+            }
+            return (React.createElement("div", { key: utils_1.getUUID(props.formData[i]) || item.key, className: "laji-form-field-template-item keep-vertical field-array-row", onFocus: this.onFocuses[i] },
+                React.createElement("div", { className: "laji-form-field-template-schema" }, item.children),
+                item.hasRemove && !nonRemovables.includes(item.index) && removable && getDeleteButton()));
+        });
+        const title = "ui:title" in props.uiSchema ? props.uiSchema["ui:title"] : props.title;
+        return (React.createElement("div", { className: props.className },
+            React.createElement(Title, { title: title, label: title, uiSchema: this.props.uiSchema, registry: this.props.registry }),
+            topButtons,
+            props.description && React.createElement(Description, { description: props.description }),
+            orderable ?
+                React.createElement(SortableList, { helperClass: "laji-form reorder-active", distance: 5, items: items, formData: props.formData, onSortEnd: this.onSort, itemProps: props.items, nonOrderables: nonOrderables }) :
+                items,
+            bottomButtons));
+    }
+}
+exports.ArrayFieldTemplateWithoutKeyHandling = ArrayFieldTemplateWithoutKeyHandling;
+exports.default = handlesArrayKeys(ArrayFieldTemplateWithoutKeyHandling);
+exports.arrayKeyFunctions = {
+    navigateArray: function (e, { reverse, getProps, navigateCallforward, getCurrentIdx, focusByIdx, getIdToScrollAfterNavigate }) {
+        var _a;
+        function focusIdx(idx, prop) {
+            function callback() {
+                const options = utils_1.getUiOptions(getProps().uiSchema);
+                const { focusOnNavigate = true, idToFocusAfterNavigate, keepPropFocusOnNavigate = false } = options;
+                const idByIdx = `${getProps().idSchema.$id}_${idx}`;
+                const _idToFocusAfterNavigate = idToFocusAfterNavigate ||
+                    prop && keepPropFocusOnNavigate
+                    ? `${idByIdx}_${prop}`
+                    : idByIdx;
+                const idToScrollAfterNavigate = options.idToScrollAfterNavigate
+                    ? options.idToScrollAfterNavigate
+                    : getIdToScrollAfterNavigate
+                        ? getIdToScrollAfterNavigate()
+                        : undefined;
+                getProps().formContext.utils.focusAndScroll(_idToFocusAfterNavigate, idToScrollAfterNavigate, focusOnNavigate);
+            }
+            if (focusByIdx) {
+                focusByIdx(idx, prop, callback);
+            }
+            else {
+                callback();
+            }
+        }
+        const nearestSchemaElemId = getProps().formContext.utils.findNearestParentSchemaElemId(document.activeElement);
+        // Should contain all nested array item ids. We want the last one, which is focused.
+        const activeItemQuery = nearestSchemaElemId.match(new RegExp(`${getProps().idSchema.$id}_\\d+`, "g"));
+        const focusedIdx = activeItemQuery ? utils_1.getReversedFormDataIndex(+activeItemQuery[0].replace(/^.*_(\d+)$/, "$1"), getProps().uiSchema) : undefined;
+        const focusedPropMaybe = (_a = nearestSchemaElemId.match(new RegExp(`${getProps().idSchema.$id}_${focusedIdx}_(.+)`))) === null || _a === void 0 ? void 0 : _a[1];
+        const focusedProp = isNaN(focusedPropMaybe) ? focusedPropMaybe : undefined;
+        const currentIdx = getCurrentIdx ? getCurrentIdx() : focusedIdx;
+        const arrayLength = getProps().formData ? getProps().formData.length : 0;
+        if (utils_1.isNullOrUndefined(currentIdx) && arrayLength > 0) {
+            focusIdx(reverse ? arrayLength - 1 : 0, focusedProp);
+            return true;
+        }
+        else {
+            let amount = 0;
+            if (focusedIdx === currentIdx)
+                amount = reverse ? -1 : 1;
+            const nextIdx = currentIdx + amount;
+            if (amount === 0 || amount < 0 && nextIdx >= 0 || amount > 0 && nextIdx < arrayLength) {
+                if (navigateCallforward) {
+                    e.persist();
+                    navigateCallforward(() => focusIdx(nextIdx, focusedProp), nextIdx);
+                }
+                else {
+                    focusIdx(nextIdx, focusedProp);
+                }
+                return true;
+            }
+        }
+        return false;
+    },
+    insert: function (e, _props) {
+        const { getProps, insertCallforward } = _props;
+        const props = getProps();
+        function afterInsert() {
+            onAdd(e, props);
+        }
+        if (!props.disabled && !props.readonly && utils_1.canAdd(props) && utils_1.getUiOptions(props.uiSchema).canAddByKey !== false) {
+            if (e.target) {
+                e.target.blur();
+            }
+            if (insertCallforward) {
+                e.persist();
+                beforeAdd(props);
+                insertCallforward(() => {
+                    afterInsert();
+                });
+            }
+            else {
+                beforeAdd(props);
+                afterInsert();
+            }
+            return true;
+        }
+        return false;
+    }
+};
+exports.arrayItemKeyFunctions = {
+    delete: function (e, { getDeleteButton, id, getProps }) {
+        const { items, idSchema, formContext, readonly, disabled } = getProps();
+        if (readonly || disabled || !utils_1.isDescendant(getProps().formContext.utils.getSchemaElementById(id), e.target)) {
+            return;
+        }
+        if (!getDeleteButton)
+            return;
+        const deleteButton = getDeleteButton();
+        if (!deleteButton || !deleteButton.onClick)
+            return;
+        const activeId = formContext.utils.findNearestParentSchemaElemId(document.activeElement);
+        const idxsMatch = activeId.match(/_\d+/g);
+        const idx = +idxsMatch[idxsMatch.length - 1].replace("_", "");
+        const elem = getProps().formContext.utils.getSchemaElementById(`${idSchema.$id}_${idx}`);
+        const prevElem = elem ? formContext.utils.getNextInput(utils_1.getTabbableFields(elem)[0], !!"reverse") : null;
+        deleteButton.onClick(e, (deleted) => {
+            if (deleted) {
+                const idxToFocus = idx === items.length - 1 ? idx - 1 : idx;
+                if (idxToFocus >= 0) {
+                    getProps().formContext.utils.focusById(`${idSchema.$id}_${idxToFocus}`);
+                }
+                else if (prevElem) {
+                    prevElem.focus();
+                }
+            }
+            else {
+                getProps().formContext.utils.focusById(`${activeId}`);
+            }
+        });
+        return true;
+    }
+};

package/lib/components/templates/BaseInputTemplate.d.ts

@@ -0,0 +1,11 @@
+export default class _BaseInputTemplate extends React.Component<any, any, any> {
+    static contextType: React.Context<import("../../ReactContext").ContextProps>;
+    constructor(props: any);
+    getStateFromProps: (props: any) => any;
+    onChange: (value: any) => void;
+    timeout: any;
+    onFocus: (e: any) => void;
+    focused: boolean | undefined;
+    onBlur: (e: any) => void;
+}
+import * as React from "react";

package/lib/components/templates/BaseInputTemplate.js

@@ -0,0 +1,80 @@
+"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 core_1 = require("@rjsf/core");
+const ReactContext_1 = require("../../ReactContext");
+const utils_1 = require("../../utils");
+class _BaseInputTemplate extends React.Component {
+    constructor(props) {
+        super(props);
+        this.getStateFromProps = (props) => {
+            return Object.assign({ value: props.value }, utils_1.getUiOptions(props).inputOptions);
+        };
+        this.onChange = (value) => {
+            if (this.props.formatValue)
+                value = this.props.formatValue(value);
+            const type = this.props.schema.type;
+            // Accept only integers
+            if (type === "integer") {
+                value = value ? value.replace(/[^0-9-]/g, "") : value;
+                value = value ? value.replace(/(.+)-/g, "$1") : value;
+            }
+            // Accept integers or floats
+            if (type === "number") {
+                value = value ? value.replace(/[^0-9.-]/g, "") : value;
+                value = value ? value.replace(/(\..*)\./g, "$1") : value;
+                value = value ? value.replace(/(.+)-/g, "$1") : value;
+            }
+            this.setState({ value }, () => {
+                if (!this.focused) {
+                    this.props.onChange(value);
+                }
+                else {
+                    if (this.timeout)
+                        clearTimeout(this.timeout);
+                    this.timeout = this.props.formContext.setTimeout(() => {
+                        this.props.onChange(value);
+                    }, 1000);
+                }
+            });
+        };
+        this.onFocus = (e) => {
+            this.focused = true;
+            this.props.onFocus && this.props.onFocus(e);
+        };
+        this.onBlur = (e) => {
+            this.focused = false;
+            if (this.state.value !== this.props.value) {
+                this.props.onChange(this.state.value);
+            }
+            if (this.timeout)
+                clearTimeout(this.timeout);
+            this.props.onBlur && this.props.onBlur(e);
+        };
+        this.state = this.getStateFromProps(props);
+    }
+    UNSAFE_componentWillReceiveProps(props) {
+        this.setState(this.getStateFromProps(props));
+    }
+    render() {
+        const _a = this.props, { formatValue } = _a, // eslint-disable-line @typescript-eslint/no-unused-vars
+        props = __rest(_a, ["formatValue"]);
+        const options = props.schema.type === "number" || props.schema.type === "integer"
+            ? Object.assign(Object.assign({}, props.options), { inputType: "text" }) : props.options;
+        const { BaseInputTemplate } = core_1.getDefaultRegistry().templates;
+        return React.createElement(BaseInputTemplate, Object.assign({}, props, this.state, { onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, options: options }));
+    }
+}
+exports.default = _BaseInputTemplate;
+_BaseInputTemplate.contextType = ReactContext_1.default;

package/lib/components/templates/DescriptionField.d.ts

@@ -0,0 +1 @@
+export default function DescriptonField(props: any): JSX.Element | null;

package/lib/components/templates/DescriptionField.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const utils_1 = require("../../utils");
+const L = require("leaflet");
+function DescriptonField(props) {
+    const { description } = props;
+    if (!description) {
+        return null;
+    }
+    const replacePatterns = description.match(/%{.*?}/g) || [];
+    const _description = replacePatterns.reduce((desc, replacePattern) => {
+        replacePattern = replacePattern.replace(/%|{|}/g, "");
+        let replacement;
+        const formData = props.registry.formContext.services.rootInstance.getFormData();
+        if (replacePattern[0] === "#") {
+            replacement = utils_1.parseJSONPointer(formData, replacePattern.substr(1));
+            // TODO DescriptionField doesn't receive formData
+            //} else if (replacePattern[0] === "/") {
+            //	replacement = parseJSONPointer(props.formData, replacePattern);
+        }
+        else if (replacePattern.startsWith("bbox")) {
+            const field = replacePattern.match(/\((.*)\)/)[1];
+            const value = utils_1.parseJSONPointer(formData, field.substr(1));
+            const bounds = L.geoJSON(value).getBounds();
+            const sw = bounds.getSouthWest();
+            const ne = bounds.getNorthEast();
+            replacement = `${sw.lat}:${ne.lat}:${sw.lng}:${ne.lng}:WGS84`;
+        }
+        else if (replacePattern === "lang") {
+            replacement = props.registry.formContext.lang;
+        }
+        return desc.replace(`%{${replacePattern}}`, replacement);
+    }, description);
+    return React.createElement("span", { dangerouslySetInnerHTML: { __html: _description } });
+}
+exports.default = DescriptonField;

package/lib/components/templates/ErrorListTemplate.d.ts

@@ -0,0 +1,9 @@
+export default class ErrorListTemplate extends React.Component<any, any, any> {
+    static contextType: React.Context<import("../../ReactContext").ContextProps>;
+    constructor(props: any);
+    expand: () => void;
+    poppedToggle: (e: any) => void;
+    revalidate: () => void;
+    submitWithWarnings: () => void;
+}
+import * as React from "react";

package/lib/components/templates/ErrorListTemplate.js

@@ -0,0 +1,95 @@
+"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 components_1 = require("../components");
+const utils_1 = require("../../utils");
+const ReactContext_1 = require("../../ReactContext");
+class ErrorListTemplate extends React.Component {
+    constructor(props) {
+        super(props);
+        this.expand = () => {
+            if (!this.state.popped)
+                this.setState({ popped: true });
+            this.refs.errorPanel.expand();
+            this.refs.warningPanel.expand();
+        };
+        this.poppedToggle = (e) => {
+            e.stopPropagation();
+            this.setState({ popped: !this.state.popped, poppedTouched: true });
+        };
+        this.revalidate = () => {
+            this.props.formContext.services.rootInstance.validate();
+            this.refs.errorPanel.expand();
+            this.refs.warningPanel.expand();
+        };
+        this.submitWithWarnings = () => {
+            this.props.formContext.services.rootInstance.submitWithWarnings();
+        };
+        this.state = { popped: false, poppedTouched: false };
+        this.props.formContext.services.rootInstance.setErrorListInstance(this);
+    }
+    render() {
+        const { errorSchema, schema, formContext, uiSchema } = this.props;
+        const { "ui:disabled": disabled, "ui:readonly": readonly } = uiSchema;
+        const { translations } = formContext;
+        const clickHandler = formContext.services.focus.focus;
+        function walkErrors(path, id, errorSchema, uiSchema, defaultTitle) {
+            const { __errors } = errorSchema, properties = __rest(errorSchema, ["__errors"]);
+            const _schema = utils_1.parseJSONPointer(schema, path);
+            const title = _schema.title || defaultTitle;
+            let { errors, warnings } = (__errors || []).reduce(({ errors, warnings }, _error) => {
+                if (_error.includes("[warning]")) {
+                    warnings.push({
+                        label: title,
+                        error: utils_1.formatErrorMessage(_error),
+                        id: id
+                    });
+                }
+                else {
+                    errors.push({
+                        label: title,
+                        error: utils_1.formatErrorMessage(_error),
+                        id: id
+                    });
+                }
+                return { errors, warnings };
+            }, { errors: [], warnings: [] });
+            Object.keys(properties).forEach(prop => {
+                let _path = path;
+                if (prop.match(/^\d+$/))
+                    _path = `${_path}/items`;
+                else
+                    _path = `${_path}/properties/${prop}`;
+                const _defaultTitle = uiSchema["ui:multiLanguage"] ? `${title} (${prop})` : prop;
+                const childErrors = walkErrors(_path, `${id}_${prop}`, errorSchema[prop], uiSchema[prop] || {}, _defaultTitle);
+                errors = [...errors, ...childErrors.errors];
+                warnings = [...warnings, ...childErrors.warnings];
+            });
+            return { errors, warnings };
+        }
+        const { Glyphicon } = this.context.theme;
+        const { errors, warnings } = walkErrors("", "root", errorSchema, uiSchema, "");
+        const footer = (errors.length > 0
+            ? React.createElement(components_1.Button, { onClick: this.revalidate },
+                React.createElement(Glyphicon, { glyph: "refresh" }),
+                " ",
+                translations.Revalidate)
+            : React.createElement(components_1.Button, { onClick: this.submitWithWarnings, variant: "success", disabled: disabled || readonly }, translations.SubmitWithWarnings));
+        return (React.createElement("div", { className: `laji-form-error-list${this.state.popped ? " laji-form-popped" : ""}${errors.length === 0 ? " laji-form-warning-list" : ""}`, style: this.state.popped ? { top: (this.props.formContext.topOffset || 0) + 5 } : null },
+            React.createElement(components_1.ErrorPanel, { classNames: "error-panel", ref: "errorPanel", errors: errors, title: translations.Errors, clickHandler: clickHandler, showToggle: true, poppedToggle: this.poppedToggle, footer: footer }),
+            React.createElement(components_1.ErrorPanel, { classNames: "warning-panel", ref: "warningPanel", errors: warnings, title: translations.Warnings, clickHandler: clickHandler, showToggle: errors.length === 0, poppedToggle: this.poppedToggle, footer: footer })));
+    }
+}
+exports.default = ErrorListTemplate;
+ErrorListTemplate.contextType = ReactContext_1.default;

package/lib/components/templates/FieldTemplate.d.ts

@@ -0,0 +1,6 @@
+export default class _FieldTemplate extends React.Component<any, any, any> {
+    constructor(props: any);
+    canFocus: () => boolean;
+    receiveId: (id: any) => void;
+}
+import * as React from "react";