@luomus/laji-form 15.1.4 → 15.1.6

package/lib/components/fields/SectionArrayField.js

@@ -0,0 +1,618 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 utils_1 = require("../../utils");
+const VirtualSchemaField_1 = require("../VirtualSchemaField");
+const TitleField_1 = require("../templates/TitleField");
+const components_1 = require("../components");
+const Context_1 = require("../../Context");
+const ReactContext_1 = require("../../ReactContext");
+const ArrayFieldTemplate_1 = require("../templates/ArrayFieldTemplate");
+const getOptions = (options) => {
+    const { sectionField = "/section", rowDefinerField = "/units/%{row}/identifications/0/taxonVerbatim", rowDefinerFields = [
+        "/units/%{row}/identifications/0/taxonID"
+    ], rowValueField = "/units/%{row}/individualCount", } = options;
+    return Object.assign(Object.assign({}, options), { sectionField, rowDefinerField, rowDefinerFields, rowValueField });
+};
+const hideFields = (schema, uiSchema, fields) => fields.reduce((_uiSchema, field) => utils_1.updateSafelyWithJSONPointer(_uiSchema, { "ui:field": "HiddenField" }, utils_1.uiSchemaJSONPointer(schema, field.replace("%{row}", "0"))), uiSchema);
+const walkUiOrder = (schema, uiSchema, pathToShouldBeLast) => {
+    let [prop, ...next] = pathToShouldBeLast.split("/").filter(s => !utils_1.isEmptyString(s));
+    if (!prop) {
+        return uiSchema;
+    }
+    const nextPath = `/${next.join("/")}`;
+    const nextSchema = utils_1.parseSchemaFromFormDataPointer(schema, prop);
+    const nextUiSchema = utils_1.parseUiSchemaFromFormDataPointer(uiSchema, prop);
+    if (!isNaN(prop)) {
+        return Object.assign(Object.assign({}, uiSchema), { items: walkUiOrder(nextSchema, nextUiSchema, nextPath) });
+    }
+    if (schema.items && schema.items.properties) {
+        return Object.assign(Object.assign({}, uiSchema), { items: Object.assign(Object.assign({}, (uiSchema.items || {})), { [prop]: walkUiOrder(nextSchema, nextUiSchema, nextPath), "ui:order": ["*", prop] }) });
+    }
+    if (schema.properties) {
+        return Object.assign(Object.assign({}, uiSchema), { [prop]: walkUiOrder(nextSchema, nextUiSchema, nextPath), "ui:order": ["*", prop] });
+    }
+};
+const walkFieldTemplate = (schema, uiSchema = {}, template) => {
+    if (schema.items && schema.items.properties) {
+        return Object.assign(Object.assign({}, uiSchema), { items: walkFieldTemplate(schema.items, uiSchema.items, template) });
+    }
+    if (schema.properties) {
+        return Object.assign(Object.assign(Object.assign({}, uiSchema), { "ui:ObjectFieldTemplate": template }), Object.keys(schema.properties).reduce((props, prop) => (Object.assign(Object.assign({}, props), { [prop]: walkFieldTemplate(schema.properties[prop], uiSchema[prop], template) })), uiSchema.properties));
+    }
+    return uiSchema;
+};
+const InvisibleTitle = (props) => {
+    const uiSchema = Object.assign(Object.assign({}, (props.uiSchema || {})), { "ui:options": Object.assign(Object.assign({}, utils_1.getUiOptions(props.uiSchema)), { titleClassName: "hidden-title-text" }) });
+    return React.createElement(TitleField_1.default, Object.assign({}, props, { uiSchema: uiSchema }));
+};
+const NoLineBreakTitle = (props) => {
+    const uiSchema = Object.assign(Object.assign({}, (props.uiSchema || {})), { "ui:options": Object.assign(Object.assign({}, utils_1.getUiOptions(props.uiSchema)), { titleClassName: "no-line-break" }) });
+    return React.createElement(TitleField_1.default, Object.assign({}, props, { uiSchema: uiSchema }));
+};
+const invisibleStyle = { visibility: "hidden" };
+let SectionArrayField = class SectionArrayField extends React.Component {
+    constructor(props) {
+        super(props);
+        // Assume that options don't change.
+        this.arrayKeyFunctions = _arrayKeyFunctions(getOptions(this.getUiOptions()));
+    }
+    static getName() { return "SectionArrayField"; }
+    getStateFromProps(props) {
+        const { uiSchema, schema, registry } = props;
+        const { sectionField, rowDefinerField } = getOptions(this.getUiOptions());
+        const formContext = Object.assign(Object.assign({}, props.formContext), { Label: () => null, this: this, originalUiSchema: uiSchema, errorSchema: props.errorSchema, errorsAsPopup: true });
+        let _uiSchema = hideFields(schema, Object.assign(Object.assign({}, uiSchema), { "ui:ArrayFieldTemplate": SectionArrayFieldTemplate }), [sectionField, rowDefinerField]);
+        const [containerPointer] = rowDefinerField.split("%{row}");
+        _uiSchema = utils_1.updateSafelyWithJSONPointer(_uiSchema, false, `/${utils_1.uiSchemaJSONPointer(schema, containerPointer)}/ui:options/removable`);
+        _uiSchema = utils_1.updateSafelyWithJSONPointer(_uiSchema, [{ fn: "add", className: "invisible" }], `/${utils_1.uiSchemaJSONPointer(schema, containerPointer)}/ui:options/buttons`);
+        _uiSchema = utils_1.updateSafelyWithJSONPointer(_uiSchema, containerArrayKeyFunctions, `/${utils_1.uiSchemaJSONPointer(schema, containerPointer)}/ui:options/arrayKeyFunctions`);
+        _uiSchema = walkFieldTemplate(schema, _uiSchema, NoLabelsObjectFieldTemplate);
+        //_uiSchema = updateSafelyWithJSONPointer(_uiSchema, {"ui:functions": [{"ui:field": "SingleItemArrayField"}, ...currentUiFunctions], ...contentUiSchema }, uiSchemaJSONPointer(schema, containerPointer));
+        _uiSchema = walkUiOrder(schema, _uiSchema, rowDefinerField.replace("%{row}", 0));
+        _uiSchema = utils_1.updateSafelyWithJSONPointer(_uiSchema, this.arrayKeyFunctions, "/ui:options/arrayKeyFunctions");
+        _uiSchema = utils_1.updateSafelyWithJSONPointer(_uiSchema, true, "/ui:options/keepPropFocusOnNavigate");
+        return {
+            uiSchema: _uiSchema,
+            formContext,
+            registry: Object.assign(Object.assign({}, registry), { formContext, templates: Object.assign(Object.assign({}, registry.templates), { TitleFieldTemplate: InvisibleTitle }) })
+        };
+    }
+};
+SectionArrayField.propTypes = {
+    uiSchema: PropTypes.shape({
+        "ui:options": PropTypes.shape({})
+    }),
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["array"])
+    }).isRequired,
+    formData: PropTypes.array
+};
+SectionArrayField = __decorate([
+    VirtualSchemaField_1.default
+], SectionArrayField);
+exports.default = SectionArrayField;
+const Section = (_a) => {
+    var { children, style } = _a, rest = __rest(_a, ["children", "style"]);
+    return React.createElement("div", Object.assign({ style: style || { flexGrow: 1, width: 0, flexBasis: 0, minWidth: 1 } }, rest), children);
+};
+const emptyObj = {};
+const doNothing = () => { };
+const columnStyle = { display: "flex", flexDirection: "column" };
+const SectionContent = ({ delete: _delete = React.createElement(components_1.DeleteButton, { style: invisibleStyle, className: "horizontally-centered", translations: emptyObj, onClick: doNothing }), sectionSum = React.createElement("strong", { style: invisibleStyle }, "hidden"), sectionLabel = React.createElement("legend", { style: invisibleStyle }, "hidden"), content }) => (React.createElement("div", { style: columnStyle },
+    _delete,
+    sectionSum,
+    sectionLabel,
+    content));
+let SectionArrayFieldTemplate = class SectionArrayFieldTemplate extends React.Component {
+    constructor(props) {
+        super(props);
+        this.onFocuses = [];
+        this.getOnFocus = (i) => () => {
+            this.props.formContext.globals[`${this.props.idSchema.$id}.activeIdx`] = i + (utils_1.getUiOptions(this.props.uiSchema).startIdx || 0);
+        };
+        this.getElemsForRowIdx = (rowIdx) => {
+            const { rowValueField, rowDefinerField } = getOptions(utils_1.getUiOptions(this.props.uiSchema));
+            return [
+                `${this.props.idSchema.$id}_0_${utils_1.JSONPointerToId(rowDefinerField.replace("%{row}", rowIdx))}`,
+                ...this.props.formData.map((_, idx) => `${this.props.idSchema.$id}_${idx}_${utils_1.JSONPointerToId(rowValueField.replace("%{row}", rowIdx))}`)
+            ].map(id => document.getElementById(id));
+        };
+        this.onContainerFocus = (e) => {
+            const { id } = e.target;
+            const [rowIdx] = getIdxsFromId(this.props.idSchema, getOptions(utils_1.getUiOptions(this.props.uiSchema)), id);
+            if (rowIdx !== undefined) {
+                this.focusedRowIdx = rowIdx;
+                this.getElemsForRowIdx(rowIdx).forEach(elem => {
+                    if (elem) {
+                        elem.className += " input-highlight";
+                    }
+                });
+            }
+        };
+        this.onContainerBlur = () => {
+            if (this.focusedRowIdx !== undefined) {
+                this.getElemsForRowIdx(this.focusedRowIdx).forEach(elem => {
+                    if (elem) {
+                        elem.className = elem.className.replace(" input-highlight", "");
+                    }
+                });
+            }
+        };
+        this.getContainerElem = () => this.ref.current;
+        this.getAddButtonElem = () => {
+            return react_dom_1.findDOMNode(this.addButtonRef.current);
+        };
+        this.showAddSection = () => {
+            this.setState({ showAddSection: true }, () => {
+                setTimeout(() => {
+                    react_dom_1.findDOMNode(this.sectionInputRef.current).focus();
+                });
+            });
+        };
+        this.hideAddSection = () => {
+            this.setState({ showAddSection: false, newSection: undefined });
+        };
+        this.getAddSectionPopup = () => {
+            const { translations } = this.props.formContext;
+            const { newSection = "" } = this.state;
+            const { Row, Col } = this.context.theme;
+            return (React.createElement("div", { className: "laji-form" },
+                React.createElement("div", null,
+                    React.createElement("strong", null, translations.AddNewSection)),
+                React.createElement(Row, null,
+                    React.createElement(Col, { xs: 3 },
+                        React.createElement("label", { className: "row-height not-strong", htmlFor: `${this.props.idSchema.$id}-section-input` },
+                            translations.Number,
+                            ":")),
+                    React.createElement(Col, { xs: 9 },
+                        React.createElement("input", { className: "form-control", id: `${this.props.idSchema.$id}-section-input`, type: "text", value: newSection, onChange: this.onNewSectionChange, onKeyDown: this.onNewSectionKeyDown, ref: this.sectionInputRef }))),
+                React.createElement("div", null, translations.EnterNewSectionNumber),
+                React.createElement(components_1.Button, { disabled: !this.sectorIsValid(newSection), onClick: this.addSection }, translations.Add),
+                React.createElement(components_1.Button, { onClick: this.hideAddSection, variant: "default" }, translations.Cancel)));
+        };
+        this.sectorIsValid = (newSection) => {
+            const { sectionField } = getOptions(utils_1.getUiOptions(this.props.uiSchema));
+            const existingNumbers = this.props.formData.map(item => "" + utils_1.parseJSONPointer(item, sectionField));
+            return !(isNaN(parseInt(newSection)) || parseInt(newSection) < 0 || parseInt(newSection) > 50 || existingNumbers.includes(newSection));
+        };
+        this.onNewSectionChange = (e) => {
+            this.setState({ newSection: e.target.value.replace(/[^0-9/-]/g, "") });
+        };
+        this.onNewSectionKeyDown = (e) => {
+            if (e.key === "Enter") {
+                if (!this.sectorIsValid(this.state.newSection)) {
+                    return;
+                }
+                this.addSection();
+                this.hideAddSection();
+                e.stopPropagation();
+            }
+        };
+        this.addSection = () => {
+            const { registry, formContext, uiSchema, schema } = this.props;
+            const { newSection } = this.state;
+            const { rowDefinerField, rowDefinerFields, sectionField } = getOptions(utils_1.getUiOptions(uiSchema));
+            const [containerPointer] = rowDefinerField.split("/%{row}");
+            const copiedRowDefinerData = (utils_1.parseJSONPointer(this.props.formData[0] || {}, containerPointer) || []).reduce((result, item, idx) => {
+                return [rowDefinerField, ...rowDefinerFields].reduce((_result, field) => {
+                    const [_, parsedField] = field.split("/%{row}"); // eslint-disable-line @typescript-eslint/no-unused-vars
+                    return utils_1.updateFormDataWithJSONPointer({
+                        schema: schema.items,
+                        formData: _result,
+                        registry
+                    }, utils_1.parseJSONPointer(item, parsedField), field.replace(/%{row}/g, idx));
+                }, result);
+            }, utils_1.getDefaultFormState(schema.items));
+            const tmpIdTree = formContext.services.ids.getRelativeTmpIdTree(this.props.idSchema.$id);
+            const _item = copiedRowDefinerData;
+            let [item] = utils_1.addLajiFormIds(_item, tmpIdTree, this.props.idSchema.$id);
+            item = utils_1.updateFormDataWithJSONPointer({ schema: schema.items, formData: item, registry }, parseInt(newSection), sectionField);
+            const items = [...this.props.formData, item];
+            const idx = items.findIndex(i => i === item);
+            const idToFocus = `${this.props.idSchema.$id}_${idx}`;
+            let { idToScrollAfterAdd = `${this.props.idSchema.$id}-add-section` } = utils_1.getUiOptions(uiSchema || {});
+            Context_1.default(formContext.contextId).idToFocus = idToFocus;
+            Context_1.default(formContext.contextId).idToScroll = idToScrollAfterAdd;
+            formContext.this.props.onChange(items);
+            this.hideAddSection();
+        };
+        this.onRowDefinerChange = formData => {
+            const { rowDefinerField, rowDefinerFields } = getOptions(utils_1.getUiOptions(this.props.uiSchema));
+            const [containerPointer] = rowDefinerField.split("%{row}");
+            const rowDefinerItemIdsToContainerIdxs = (utils_1.parseJSONPointer(this.props.formData[0] || {}, containerPointer) || []).reduce((map, item, idx) => {
+                map[utils_1.getUUID(item)] = idx;
+                return map;
+            }, {});
+            const tmpIdTree = this.props.formContext.services.ids.getRelativeTmpIdTree(`${this.props.idSchema.$id}_${utils_1.JSONPointerToId(containerPointer.substr(0, containerPointer.length - 1))}`);
+            const oldIds = utils_1.getAllLajiFormIdsDeeply(this.props.formData, tmpIdTree);
+            let ids = {};
+            const _formData = this.props.formData.map((item, containerIdx) => {
+                const items = utils_1.parseJSONPointer(formData, containerPointer).map((unit, idx) => {
+                    let rowDefinerItem = utils_1.parseJSONPointer(item, `${containerPointer}/${rowDefinerItemIdsToContainerIdxs[utils_1.getUUID(unit)]}`);
+                    if (!rowDefinerItem) {
+                        // If container is first and it has UUID, it's an item added to the definer column. It has a UUID already, so 
+                        // we don't define it again, or else it will be rendered again and won't be autofocused properly.
+                        const [_rowDefinerItem, _ids] = containerIdx === 0 && utils_1.getUUID(unit)
+                            ? utils_1.addLajiFormIds(unit, tmpIdTree)
+                            : utils_1.addLajiFormIds(this.props.formContext.utils.filterItemIdsDeeply(unit, this.props.idSchema.$id), tmpIdTree, false);
+                        rowDefinerItem = _rowDefinerItem;
+                        ids = Object.assign(Object.assign({}, ids), _ids);
+                    }
+                    const updatedUnit = [rowDefinerField, ...rowDefinerFields].reduce((updatedNewUnit, field) => {
+                        const [_, contentPointer] = field.split("%{row}"); // eslint-disable-line @typescript-eslint/no-unused-vars
+                        const pointer = field.replace("%{row}", idx);
+                        const value = utils_1.parseJSONPointer(formData, pointer);
+                        return utils_1.updateFormDataWithJSONPointer({
+                            schema: utils_1.parseSchemaFromFormDataPointer(this.props.schema.items, containerPointer).items,
+                            formData: updatedNewUnit,
+                            registry: this.props.registry
+                        }, value, contentPointer);
+                    }, rowDefinerItem);
+                    return utils_1.addLajiFormIds(updatedUnit, tmpIdTree, false)[0];
+                });
+                return utils_1.updateFormDataWithJSONPointer({
+                    schema: this.props.schema.items,
+                    formData: item,
+                    registry: this.props.registry
+                }, items, containerPointer);
+            });
+            this.props.formContext.this.props.onChange(_formData);
+            Object.keys(oldIds).forEach(id => {
+                if (!ids[id]) {
+                    this.props.formContext.services.submitHooks.remove(id);
+                }
+            });
+        };
+        this.addButtonRef = React.createRef();
+        this.sectionInputRef = React.createRef();
+        this.ref = React.createRef();
+    }
+    render() {
+        return (React.createElement("div", { style: { display: "flex", width: "100%" }, ref: this.ref, onFocus: this.onContainerFocus, onBlur: this.onContainerBlur, tabIndex: 0 },
+            React.createElement(Section, { key: "definer", style: { flexGrow: "initial", maxWidth: 200 }, id: `${this.props.idSchema.$id}-section-definer` }, this.renderRowDefinerColumn()),
+            this.renderSections(),
+            React.createElement(Section, { key: "sums", className: "bg-info", style: { maxWidth: 75 } }, this.renderRowDefinerSumColumn()),
+            React.createElement(Section, { key: "deletes", style: { flexGrow: "initial", maxWidth: 143 } }, this.renderRowDefinerDeleteColumn())));
+    }
+    renderRowDefinerColumn() {
+        const { formData, uiSchema, schema, registry } = this.props;
+        const { rowDefinerField, rowValueField, sectionField } = getOptions(utils_1.getUiOptions(uiSchema));
+        const [containerPointer] = rowDefinerField.split("/%{row}");
+        const { SchemaField } = this.props.registry.fields;
+        const { originalUiSchema } = this.props.formContext;
+        const _schema = schema.items;
+        const _formData = formData[0];
+        let __uiSchema = hideFields(schema, originalUiSchema, [rowValueField, sectionField]);
+        __uiSchema = utils_1.updateSafelyWithJSONPointer(__uiSchema.items, false, `${containerPointer}/ui:options/removable`);
+        __uiSchema = walkUiOrder(schema.items, __uiSchema, rowDefinerField.replace("%{row}", 0));
+        __uiSchema = walkFieldTemplate(schema.items, __uiSchema, RowDefinerObjectFieldTemplate);
+        __uiSchema = walkUiOrder(schema.items, __uiSchema, `${containerPointer}/0/identifications`);
+        const formContext = Object.assign(Object.assign({}, this.props.formContext), { rowDefinerField, sectionPointer: utils_1.idSchemaIdToJSONPointer(this.props.idSchema.$id) });
+        const idSchema = this.props.registry.schemaUtils.toIdSchema(this.props.schema.items, `${this.props.idSchema.$id}_0`);
+        const sectionLabel = (React.createElement(components_1.Affix, { className: "background", getContainer: this.getContainerElem, topOffset: this.props.formContext.topOffset, bottomOffset: this.props.formContext.bottomOffset },
+            React.createElement("legend", null, this.props.formContext.translations.Section)));
+        const sectionSum = React.createElement("strong", null, this.props.formContext.translations.SectionSum);
+        const content = (React.createElement(SchemaField, Object.assign({}, this.props, { schema: _schema, uiSchema: __uiSchema, formData: _formData, idSchema: idSchema, onChange: this.onRowDefinerChange, registry: Object.assign(Object.assign({}, registry), { formContext, templates: Object.assign(Object.assign({}, registry.templates), { TitleFieldTemplate: NoLineBreakTitle }) }), formContext: formContext, errorSchema: this.props.formContext.errorSchema[0] || {} })));
+        return React.createElement(SectionContent, { content: content, sectionLabel: sectionLabel, sectionSum: sectionSum });
+    }
+    renderSections() {
+        const { sectionField, rowValueField } = getOptions(utils_1.getUiOptions(this.props.uiSchema));
+        return (this.props.formData || []).map((item, idx) => {
+            if (!this.props.items[idx]) {
+                return null;
+            }
+            const { children, hasRemove, index, disabled, readonly, onDropIndexClick } = this.props.items[idx];
+            const del = hasRemove && (React.createElement(components_1.DeleteButton, { id: `${this.props.idSchema.$id}_${index}`, disabled: disabled || readonly, translations: this.props.formContext.translations, onClick: onDropIndexClick(index), className: "horizontally-centered" }));
+            const sectionLabel = (React.createElement(components_1.Affix, { className: index % 2 ? "background" : " darker", getContainer: this.getContainerElem, topOffset: this.props.formContext.topOffset, bottomOffset: this.props.formContext.bottomOffset },
+                React.createElement("legend", { className: "horizontally-centered" }, utils_1.parseJSONPointer(this.props.formData[index], sectionField))));
+            const [arr, field] = rowValueField.split("/%{row}");
+            const sum = (utils_1.parseJSONPointer(item, arr) || []).reduce((sum, item) => sum + (utils_1.parseJSONPointer(item, field) || 0), 0);
+            const sectionSum = (React.createElement("strong", { className: "horizontally-centered text-muted" }, sum));
+            return (React.createElement(Section, { onFocus: this.getOnFocus(idx), key: utils_1.getUUID(item), className: index % 2 ? undefined : "darker", id: `${this.props.idSchema.$id}_${idx}-section` },
+                React.createElement(SectionContent, { delete: del, sectionLabel: sectionLabel, sectionSum: sectionSum, content: children })));
+        });
+    }
+    renderRowDefinerDeleteColumn() {
+        const { schema, registry, formData } = this.props;
+        const { rowDefinerField, rowValueField, sectionField } = getOptions(utils_1.getUiOptions(this.props.uiSchema));
+        const [containerPointer] = rowDefinerField.split("/%{row}");
+        const { SchemaField } = this.props.registry.fields;
+        const { originalUiSchema } = this.props.formContext;
+        let _schema = schema.items;
+        const _formData = formData[0];
+        let __uiSchema = hideFields(schema, originalUiSchema, [rowValueField, sectionField]);
+        __uiSchema = utils_1.updateSafelyWithJSONPointer(__uiSchema, [{ fn: "add", className: "invisible" }], `/${utils_1.uiSchemaJSONPointer(schema, containerPointer)}/ui:options/buttons`);
+        __uiSchema = walkUiOrder(schema.items, __uiSchema.items, rowDefinerField.replace("%{row}", 0));
+        __uiSchema = walkFieldTemplate(schema.items, __uiSchema, InvisibleLabelObjectFieldTemplate);
+        const formContext = Object.assign(Object.assign({}, this.props.formContext), { containerPointer, sectionPointer: utils_1.idSchemaIdToJSONPointer(this.props.idSchema.$id) });
+        const { Overlay, Popover, Glyphicon } = this.context.theme;
+        const add = (React.createElement(React.Fragment, null,
+            React.createElement(components_1.Affix, { getContainer: this.getContainerElem, topOffset: this.props.formContext.topOffset, bottomOffset: this.props.formContext.bottomOffset },
+                React.createElement(components_1.Button, { id: `${this.props.idSchema.$id}-add`, onClick: this.showAddSection, style: { whiteSpace: "nowrap", padding: "3.5px 12px" }, ref: this.addButtonRef },
+                    React.createElement(Glyphicon, { glyph: "plus" }),
+                    " ",
+                    this.props.formContext.translations.AddSection)),
+            (this.state || {}).showAddSection &&
+                React.createElement(Overlay, { show: true, placement: "left", rootClose: true, onHide: this.hideAddSection, target: this.getAddButtonElem },
+                    React.createElement(Popover, { id: `${this.props.id}-show-add-section` }, this.getAddSectionPopup()))));
+        const delButtons = (React.createElement(SchemaField, Object.assign({}, this.props, { schema: _schema, uiSchema: __uiSchema, formData: _formData, onChange: this.onRowDefinerChange, registry: Object.assign(Object.assign({}, registry), { formContext, fields: Object.assign(Object.assign({}, registry.fields), { TitleFieldTemplate: InvisibleTitle }) }), formContext: formContext })));
+        return React.createElement(SectionContent, { delete: add, content: delButtons });
+    }
+    renderRowDefinerSumColumn() {
+        const { schema, registry, formData } = this.props;
+        const { rowDefinerField, rowDefinerFields, rowValueField, sectionField } = getOptions(utils_1.getUiOptions(this.props.uiSchema));
+        const [containerPointer, valueField] = rowValueField.split("/%{row}");
+        const { SchemaField } = this.props.registry.fields;
+        const { originalUiSchema } = this.props.formContext;
+        let _schema = utils_1.updateSafelyWithJSONPointer(schema.items, { type: "integer" }, `/properties/${containerPointer}/items/properties/sum`);
+        let _formData = formData[0];
+        const sums = formData.reduce((sums, item) => {
+            (utils_1.parseJSONPointer(item, containerPointer) || []).forEach((definerItem, idx) => {
+                sums[idx] = (sums[idx] || 0) + (utils_1.parseJSONPointer(definerItem, valueField) || 0);
+            });
+            return sums;
+        }, []);
+        sums.forEach((sum, idx) => {
+            _formData = utils_1.updateSafelyWithJSONPointer(_formData || {}, sum, `${containerPointer}/${idx}/sum`);
+        });
+        let containerUiSchema = Object.keys(utils_1.parseSchemaFromFormDataPointer(_schema, containerPointer).items.properties).reduce((uiSchema, field) => {
+            if (field === "sum") {
+                return uiSchema;
+            }
+            return Object.assign(Object.assign({}, uiSchema), { [field]: { "ui:field": "HiddenField" } });
+        }, utils_1.parseUiSchemaFromFormDataPointer(originalUiSchema, containerPointer).items);
+        let __uiSchema = utils_1.updateSafelyWithJSONPointer(originalUiSchema, containerUiSchema, `/items/${containerPointer}/items`);
+        __uiSchema = hideFields(schema, __uiSchema, [rowValueField, sectionField, rowDefinerField, ...rowDefinerFields]);
+        __uiSchema = utils_1.updateSafelyWithJSONPointer(__uiSchema.items, Object.assign(Object.assign({}, utils_1.parseJSONPointer(__uiSchema.items, `${containerPointer}/ui:options`)), { removable: false, buttons: [{ fn: "add", className: "invisible" }] }), `${containerPointer}/ui:options`);
+        __uiSchema = utils_1.updateSafelyWithJSONPointer(__uiSchema, {
+            "ui:widget": "PlainTextWidget",
+            "ui:options": { strong: true, centered: true }
+        }, `${containerPointer}/items/sum`);
+        __uiSchema = walkFieldTemplate(schema.items, __uiSchema, SumObjectFieldTemplate);
+        __uiSchema = walkUiOrder(schema.items, __uiSchema, rowDefinerField.replace("%{row}", 0));
+        const formContext = Object.assign(Object.assign({}, this.props.formContext), { containerPointer, sectionPointer: utils_1.idSchemaIdToJSONPointer(this.props.idSchema.$id), rowValueField,
+            rowDefinerField });
+        const sumLabel = (React.createElement(components_1.Affix, { getContainer: this.getContainerElem, topOffset: this.props.formContext.topOffset, bottomOffset: this.props.formContext.bottomOffset },
+            React.createElement("legend", { className: "bg-info horizontally-centered" }, this.props.formContext.translations.Sum)));
+        const content = (React.createElement(SchemaField, Object.assign({}, this.props, { schema: _schema, uiSchema: __uiSchema, formData: _formData, onChange: this.onRowDefinerChange, registry: Object.assign(Object.assign({}, registry), { formContext, fields: Object.assign(Object.assign({}, registry.fields), { TitleFieldTemplate: InvisibleTitle }) }), formContext: formContext })));
+        return React.createElement(SectionContent, { sectionLabel: sumLabel, content: content });
+    }
+};
+SectionArrayFieldTemplate.contextType = ReactContext_1.default;
+SectionArrayFieldTemplate = __decorate([
+    ArrayFieldTemplate_1.handlesArrayKeys
+], SectionArrayFieldTemplate);
+const withoutItemPointers = pointer => pointer.replace(/\/([0-9]+|%{row})/g, "");
+const InvisibleLabelObjectFieldTemplate = (props) => {
+    const { containerPointer } = props.formContext;
+    const pointer = utils_1.idSchemaIdToJSONPointer(props.idSchema.$id);
+    const containerPointerWithoutItemPointers = withoutItemPointers(containerPointer);
+    const pointerWithoutItemPointers = withoutItemPointers(pointer);
+    return props.properties.map(prop => {
+        const propUiSchema = props.uiSchema[prop.name] || {};
+        if (propUiSchema["ui:field"] === "HiddenField" || propUiSchema["ui:widget"] === "HiddenWidget") {
+            return null;
+        }
+        if (containerPointerWithoutItemPointers.startsWith(pointerWithoutItemPointers.replace(props.formContext.sectionPointer, "") + "/" + prop.name)) {
+            return React.createElement(React.Fragment, { key: prop.name }, prop.content);
+        }
+        return React.createElement("div", { key: prop.name, className: "form-group row-height" },
+            React.createElement("label", null));
+    });
+};
+const SumObjectFieldTemplate = (props) => {
+    const { containerPointer } = props.formContext;
+    const pointer = utils_1.idSchemaIdToJSONPointer(props.idSchema.$id);
+    const containerPointerWithoutItemPointers = withoutItemPointers(containerPointer);
+    const pointerWithoutItemPointers = withoutItemPointers(pointer);
+    return props.properties.map(prop => {
+        const propUiSchema = props.uiSchema[prop.name] || {};
+        if (propUiSchema["ui:field"] === "HiddenField" || propUiSchema["ui:widget"] === "HiddenWidget") {
+            return null;
+        }
+        if ((containerPointerWithoutItemPointers.startsWith(pointerWithoutItemPointers.replace(props.formContext.sectionPointer, "") + "/" + prop.name))
+            || prop.name === "sum") {
+            return React.createElement(React.Fragment, { key: prop.name }, prop.content);
+        }
+        return React.createElement("div", { key: prop.name, className: "form-group row-height " + prop.name },
+            React.createElement("label", null));
+    });
+};
+const NoLabelsObjectFieldTemplate = (props) => {
+    return props.properties.map(prop => prop.content);
+};
+const RowDefinerObjectFieldTemplate = (props) => {
+    const pointer = utils_1.idSchemaIdToJSONPointer(props.idSchema.$id);
+    const rowDefinerFieldWithoutItemPointers = withoutItemPointers(props.formContext.rowDefinerField);
+    const pointerWithoutItemPointers = withoutItemPointers(pointer);
+    return props.properties.map(prop => {
+        const propUiSchema = props.uiSchema[prop.name] || {};
+        if (propUiSchema["ui:field"] === "HiddenField" || propUiSchema["ui:widget"] === "HiddenWidget") {
+            return null;
+        }
+        if ((rowDefinerFieldWithoutItemPointers.startsWith(pointerWithoutItemPointers.replace(props.formContext.sectionPointer, "") + "/" + prop.name))) {
+            return React.createElement(React.Fragment, { key: prop.name }, prop.content);
+        }
+        const title = (props.uiSchema[prop.name] || {})["ui:title"] || props.schema.properties[prop.name].title || prop.name;
+        return React.createElement("div", { key: prop.name, className: "form-group row-height" },
+            React.createElement("label", null, title));
+    });
+};
+const getIdxsFromId = (idSchema, options, _id) => {
+    const { rowDefinerField } = options;
+    const id = idSchema.$id;
+    const sectionIdx = _id.match(new RegExp(`${id}_(\\d+)`))
+        && !_id.match(new RegExp(`${id}_\\d+_${utils_1.JSONPointerToId(rowDefinerField.replace("%{row}", "\\d+"))}`))
+        ? +_id.match(new RegExp(`${id}_(\\d+)`))[1]
+        : undefined;
+    const [containerPointer] = rowDefinerField.split("%{row}");
+    const horizontalIdx = _id.match(new RegExp(`${id}_\\d+_${utils_1.JSONPointerToId(containerPointer)}`))
+        ? +_id.match(new RegExp(`${id}_\\d+_${utils_1.JSONPointerToId(containerPointer)}(\\d+)`))[1]
+        : undefined;
+    return [horizontalIdx, sectionIdx];
+};
+const _arrayKeyFunctions = options => {
+    const keyFunctions = Object.assign(Object.assign({}, ArrayFieldTemplate_1.arrayKeyFunctions), { insert: (e, props) => {
+            document.getElementById(`${props.getProps().idSchema.$id}-add`).click();
+        }, navigateSection: (e, { getProps, left, right, up, goOverRow }) => {
+            const { rowDefinerField, rowValueField } = options;
+            const currentId = getProps().formContext.utils.findNearestParentSchemaElemId(document.activeElement);
+            const amount = left || up ? -1 : 1;
+            const id = getProps().idSchema.$id;
+            let nextId;
+            const [currentRow, currentSection] = getIdxsFromId(getProps().idSchema, options, currentId);
+            if (currentRow === undefined && currentSection === undefined) {
+                return false;
+            }
+            const getNonRowSectionFieldsForSectionIdx = sectionIdx => {
+                let tabbable = utils_1.getTabbableFields(document.getElementById(`${id}_${sectionIdx}-section`));
+                return tabbable.filter(elem => {
+                    return !elem.id.match(new RegExp(utils_1.JSONPointerToId(rowValueField.replace("%{row}", "\\d+"))));
+                });
+            };
+            const goOverToNonRowLogic = (currentProp, reverse = true, last = true) => {
+                let tabbableInSection = utils_1.getTabbableFields(document.getElementById(`${id}_${last ? getProps().formData.length - 1 : 0}-section`));
+                if (reverse) {
+                    tabbableInSection = tabbableInSection.reverse();
+                }
+                let currentPropEncountered = false;
+                const elem = tabbableInSection.find(elem => {
+                    if (!elem.id.match(new RegExp(utils_1.JSONPointerToId(rowValueField.replace("%{row}", "\\d+"))))) {
+                        if (!currentProp || currentPropEncountered) {
+                            return elem;
+                        }
+                        if (elem.id.match(currentProp)) {
+                            currentPropEncountered = true;
+                        }
+                    }
+                });
+                nextId = getProps().formContext.utils.findNearestParentSchemaElemId(elem);
+            };
+            if (left || right) {
+                // Horizontal navigation from row definer column to row value column.
+                if (right && currentSection === undefined) {
+                    const idSuffix = utils_1.JSONPointerToId(rowValueField.replace("%{row}", currentRow));
+                    nextId = `${id}_0_${idSuffix}`;
+                    // Horizontal navigation from row value column to row definer column.
+                }
+                else if (left && currentSection === 0 && currentRow !== undefined) {
+                    const idSuffix = utils_1.JSONPointerToId(rowDefinerField.replace("%{row}", currentRow));
+                    nextId = `${id}_${currentSection}_${idSuffix}`;
+                    // Horizontal navigation to next/prev row if goOverRow.
+                }
+                else if (right && currentSection === getProps().formData.length - 1) {
+                    if (!goOverRow) {
+                        return false;
+                    }
+                    // Horizontal navigation inside row matrix.
+                    if (currentRow !== undefined) {
+                        const idSuffix = utils_1.JSONPointerToId(rowDefinerField.replace("%{row}", currentRow + 1));
+                        nextId = `${id}_${0}_${idSuffix}`;
+                    }
+                    else {
+                        let tabbableInSection = getNonRowSectionFieldsForSectionIdx(getProps().formData.length - 1);
+                        // Horizontal navigation inside non row section field.
+                        if (currentId === getProps().formContext.utils.findNearestParentSchemaElemId(tabbableInSection[tabbableInSection.length - 1])) {
+                            nextId = `${id}_0_${utils_1.JSONPointerToId(rowDefinerField.replace("%{row}", 0))}`;
+                            // Horizontal navigation from non row section to row field.
+                        }
+                        else {
+                            const currentProp = currentId.match(`${id}_${currentSection}_(.+)`)[1];
+                            goOverToNonRowLogic(currentProp, false, false);
+                        }
+                    }
+                }
+                else if (left && currentSection === undefined) {
+                    if (goOverRow) {
+                        // Horizontal navigation from row field to non row section field.
+                        if (currentRow === 0) {
+                            goOverToNonRowLogic();
+                            // Horizontal navigation inside row value fields.
+                        }
+                        else {
+                            const idSuffix = utils_1.JSONPointerToId(rowValueField.replace("%{row}", currentRow - 1));
+                            nextId = `${id}_${getProps().formData.length - 1}_${idSuffix}`;
+                        }
+                    }
+                    // Horizontal navigation inside non row section fields.
+                }
+                else if (left && currentRow === undefined && currentSection === 0) {
+                    if (goOverRow) {
+                        const currentProp = currentId.match(`${id}_${currentSection}_(.+)`)[1];
+                        goOverToNonRowLogic(currentProp);
+                    }
+                    // Horizontal navigation inside value matrix.
+                }
+                else {
+                    const [idPrefix] = currentId.match(new RegExp(`${id}_(\\d+)`));
+                    const idSuffix = currentId.replace(`${idPrefix}_`, "");
+                    nextId = `${id}_${+currentSection + amount}_${idSuffix}`;
+                }
+            }
+            else {
+                // Vertical navigation.
+                const containerId = currentSection !== undefined
+                    ? `${id}_${currentSection}-section`
+                    : `${id}-section-definer`;
+                const tabbableOutsideContainer = utils_1.getTabbableFields(document.getElementById(containerId));
+                const tabbableIdx = tabbableOutsideContainer.findIndex(e => e === document.activeElement);
+                nextId = getProps().formContext.utils.findNearestParentSchemaElemId(tabbableOutsideContainer[tabbableIdx + amount]);
+                if (nextId === "root") {
+                    return true;
+                }
+            }
+            getProps().formContext.utils.focusAndScroll(nextId);
+        } });
+    keyFunctions.navigate = (e, props) => {
+        const { getProps, reverse } = props;
+        const id = getProps().idSchema.$id;
+        if (!reverse) {
+            const lastSectionElems = utils_1.getTabbableFields(document.getElementById(`${id}_${getProps().formData.length - 1}-section`));
+            const lastElem = lastSectionElems[lastSectionElems.length - 1];
+            if (document.activeElement === lastElem) {
+                return false;
+            }
+        }
+        else {
+            const { rowDefinerField } = options;
+            const firstElem = utils_1.getTabbableFields(document.getElementById(`${id}_0-section`))[0];
+            if (document.activeElement === firstElem) {
+                const allTabbableFields = utils_1.getTabbableFields(react_dom_1.findDOMNode(getProps().formContext.formRef.current));
+                const matcher = new RegExp(utils_1.JSONPointerToId(rowDefinerField.replace("%{row}", "\\d+")));
+                const allTabbableFieldsWithoutRowDefinerInputs = allTabbableFields.filter(f => !f.id.match(matcher));
+                const input = getProps().formContext.utils.getNextInputInInputs(undefined, true, allTabbableFieldsWithoutRowDefinerInputs);
+                if (input) {
+                    input.focus();
+                }
+                return true;
+            }
+        }
+        return keyFunctions.navigateSection(e, Object.assign(Object.assign({}, props), { right: !props.reverse, left: props.reverse, goOverRow: true }));
+    };
+    return keyFunctions;
+};
+const containerArrayKeyFunctions = Object.assign(Object.assign({}, ArrayFieldTemplate_1.arrayKeyFunctions), { 
+    // Disable insert, insert should bubble to section adding.
+    insert: () => {
+        return false;
+    } });