@luomus/laji-form 15.1.5 → 15.1.7

package/lib/components/fields/MapField.d.ts

@@ -0,0 +1,48 @@
+export function findSingleGeometry(geoJSON: any): any;
+export function getCenterAndRadiusFromGeometry(geometry: any): {
+    center?: undefined;
+    radius?: undefined;
+} | {
+    center: any;
+    radius: any;
+};
+export default class MapField extends React.Component<any, any, any> {
+    static propTypes: {
+        uiSchema: PropTypes.Requireable<PropTypes.InferProps<{
+            "ui:options": PropTypes.Requireable<PropTypes.InferProps<{
+                mapOptions: PropTypes.Requireable<object>;
+                height: PropTypes.Requireable<number>;
+                emptyHelp: PropTypes.Requireable<string>;
+                geometryCollection: any;
+            }>>;
+        }>>;
+        schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        formData: PropTypes.Requireable<object>;
+    };
+    constructor(props: any);
+    onLocateEventHandler: (geometry: any) => void;
+    _lastFormData: any;
+    _zoomToDataOnNextTick: boolean | undefined;
+    geocode: (prevProps: any) => void;
+    zoomIfExternalEdit: (props: any) => void;
+    setMapRef: (mapComponent: any) => void;
+    map: any;
+    showMobileEditorMap: () => void;
+    getDrawOptions: (props: any) => any;
+    getEditWithModalFeatureStyle: () => {
+        fillOpacity: number;
+        color: string;
+        weight: string;
+    };
+    getGeometry: (props: any) => any;
+    onOptionsChanged: (options: any) => void;
+    onChange: (events: any) => void;
+    onMobileEditorChange: (point: any) => void;
+    onHideMobileEditorMap: (options: any) => void;
+    onLocate: (latlng: any, radius: any, forceShow: any) => void;
+    renderBlocker(): JSX.Element | undefined;
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";

package/lib/components/fields/MapField.js

@@ -0,0 +1,434 @@
+"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.getCenterAndRadiusFromGeometry = exports.findSingleGeometry = void 0;
+const React = require("react");
+const react_dom_1 = require("react-dom");
+const PropTypes = require("prop-types");
+const MapArrayField_1 = require("./MapArrayField");
+const components_1 = require("../components");
+const utils_1 = require("../../utils");
+const equals = require("deep-equal");
+const Spinner = require("react-spinner");
+const components_2 = require("../components");
+const utils_2 = require("@luomus/laji-map/lib/utils");
+const utils_3 = require("@rjsf/utils");
+function findSingleGeometry(geoJSON) {
+    if (!geoJSON)
+        return undefined;
+    switch (geoJSON.type) {
+        case "FeatureCollection":
+            return geoJSON.features.length === 1
+                ? findSingleGeometry(geoJSON.features[0])
+                : undefined;
+        case "GeometryCollection":
+            return geoJSON.geometries.length === 1
+                ? findSingleGeometry(geoJSON.geometries[0])
+                : undefined;
+        case "Feature":
+            return findSingleGeometry(geoJSON.geometry);
+        case undefined:
+            return undefined;
+        default:
+            return geoJSON && geoJSON.coordinates ? geoJSON : undefined;
+    }
+}
+exports.findSingleGeometry = findSingleGeometry;
+function getCenterAndRadiusFromGeometry(geometry) {
+    const singleGeometry = findSingleGeometry(geometry);
+    if (!singleGeometry) {
+        return {};
+    }
+    let center, radius;
+    if (singleGeometry && singleGeometry.type === "Point") {
+        center = singleGeometry.coordinates.slice(0).reverse();
+        radius = singleGeometry.radius;
+    }
+    else {
+        const bounds = new L.GeoJSON(utils_2.anyToFeatureCollection(geometry)).getBounds();
+        center = bounds.getCenter();
+        radius = bounds.getSouthWest().distanceTo(bounds.getSouthEast()) / 2;
+    }
+    return { center, radius };
+}
+exports.getCenterAndRadiusFromGeometry = getCenterAndRadiusFromGeometry;
+class MapField extends React.Component {
+    constructor(props) {
+        super(props);
+        this.onLocateEventHandler = (geometry) => {
+            if (geometry) {
+                this.onLocate({ lat: geometry.coordinates[1], lng: geometry.coordinates[0] }, 100, !!"force");
+            }
+            else if (!this.getGeometry(this.props)) {
+                this.setState({ locateOn: true });
+            }
+        };
+        this.geocode = (prevProps) => {
+            let { area } = utils_1.getUiOptions(this.props.uiSchema);
+            if (area instanceof Array) {
+                area = area[0];
+            }
+            const isEmptyAndWasEmpty = [this.props, prevProps].every(props => {
+                const { geoData } = this.getDrawOptions(props);
+                return !geoData
+                    || (utils_1.isObject(geoData) && Object.keys(geoData).length === 0)
+                    || (geoData.type === "GeometryCollection" && geoData.geometries.length === 0)
+                    || (geoData.type === "FeatureCollection" && geoData.features.length === 0);
+            });
+            if (isEmptyAndWasEmpty && area && area.length > 0) {
+                this.props.formContext.apiClient.fetch(`/areas/${area}`, undefined, undefined).then((result) => {
+                    this.map.geocode(result.name, undefined, 8);
+                });
+            }
+        };
+        this.zoomIfExternalEdit = (props) => {
+            if (!equals(this._lastFormData, props.formData)) {
+                this.map.zoomToData();
+            }
+        };
+        this.setMapRef = (mapComponent) => {
+            if (mapComponent && mapComponent.refs && mapComponent.refs.map) {
+                this.map = mapComponent.refs.map.map;
+                this.setState({ mapRendered: true });
+            }
+        };
+        this.showMobileEditorMap = () => {
+            this.setState({ mobileEditor: { visible: true, options: (this.state.mobileEditor || {}).options || {} } });
+        };
+        this.getDrawOptions = (props) => {
+            const { uiSchema, disabled, readonly } = props;
+            const options = utils_1.getUiOptions(uiSchema);
+            const { mapOptions = {}, mobileEditor } = options;
+            const drawOptions = Object.assign(Object.assign({}, (mapOptions.draw || {})), { geoData: this.getGeometry(props), onChange: this.onChange, editable: !disabled && !readonly });
+            if (mobileEditor) {
+                drawOptions.getFeatureStyle = this.getEditWithModalFeatureStyle;
+            }
+            return drawOptions;
+        };
+        this.getEditWithModalFeatureStyle = () => ({
+            fillOpacity: 0,
+            color: "black",
+            weight: "2",
+        });
+        this.getGeometry = (props) => {
+            const { formData } = props;
+            return formData && Object.keys(formData).length ? formData : undefined;
+        };
+        this.onOptionsChanged = (options) => {
+            this.setState({ mapOptions: Object.assign(Object.assign({}, this.state.mapOptions), options) });
+        };
+        this.onChange = (events) => {
+            const { geometryCollection = true } = utils_1.getUiOptions(this.props.uiSchema);
+            let formData;
+            events.forEach(e => {
+                switch (e.type) {
+                    case "create":
+                        formData = geometryCollection ? {
+                            type: "GeometryCollection",
+                            geometries: [e.feature.geometry]
+                        } : e.feature.geometry;
+                        break;
+                    case "edit":
+                        formData = geometryCollection ? {
+                            type: "GeometryCollection",
+                            geometries: [e.features[0].geometry]
+                        } : e.features[0].geometry;
+                        break;
+                    case "delete":
+                        formData = geometryCollection ? {
+                            type: "GeometryCollection",
+                            geometries: []
+                        } : {};
+                }
+            });
+            this._zoomToDataOnNextTick = true;
+            this.props.onChange(formData);
+        };
+        this.onMobileEditorChange = (point) => {
+            const geometry = this.getGeometry(this.props);
+            const feature = {
+                type: "Feature",
+                geometry: point
+            };
+            if (geometry) {
+                this.onChange([{ type: "edit", features: [feature] }]);
+            }
+            else {
+                this.onChange([{ type: "create", feature }]);
+            }
+        };
+        this.onHideMobileEditorMap = (options) => {
+            this.setState({ mobileEditor: { visible: false, options } });
+        };
+        this.onLocate = (latlng, radius, forceShow) => {
+            const { geometryCollection = true, mobileEditor, createOnLocate } = utils_1.getUiOptions(this.props.uiSchema);
+            const isEmpty = !this.getGeometry(this.props);
+            if (!latlng || !isEmpty) {
+                this.setState({ located: true });
+                return;
+            }
+            if (mobileEditor) {
+                if (!this.state.located || forceShow) {
+                    this.setState({
+                        mobileEditor: {
+                            visible: true,
+                            center: latlng,
+                            radius,
+                            options: (this.state.mobileEditor || {}).options || {}
+                        },
+                        located: true
+                    });
+                }
+                return;
+            }
+            this.setState({ located: true });
+            if (createOnLocate) {
+                const geometry = { type: "Point", coordinates: [latlng.lng, latlng.lat] };
+                this.props.onChange(geometryCollection ? { type: "GeometryCollection", geometries: [geometry] } : geometry);
+            }
+        };
+        this.state = { located: false };
+        this.props.formContext.services.settings.bind(this, props);
+    }
+    componentDidMount() {
+        const { uiSchema } = this.props;
+        const { mapOptions = {} } = utils_1.getUiOptions(uiSchema);
+        if (mapOptions.singleton) {
+            const { map } = this.props.formContext.services.singletonMap;
+            if (map && map.getOptions().locate && map.userLocation) {
+                this.onLocate(map.userLocation.latlng, map.userLocation.accuracy);
+            }
+        }
+        this.geocode(this.props);
+        this.props.formContext.services.customEvents.add(this.props.idSchema.$id, "locate", this.onLocateEventHandler);
+    }
+    componentWillUnmount() {
+        this.props.formContext.services.customEvents.remove(this.props.idSchema.$id, "locate", this.onLocateEventHandler);
+    }
+    componentDidUpdate(prevProps) {
+        this.geocode(prevProps);
+        this.zoomIfExternalEdit(this.props);
+        this._lastFormData = this.props.formData;
+        if (this._zoomToDataOnNextTick) {
+            this.map.zoomToData();
+            this._zoomToDataOnNextTick = undefined;
+        }
+    }
+    render() {
+        const TitleFieldTemplate = utils_3.getTemplate("TitleFieldTemplate", this.props.registry, utils_1.getUiOptions(this.props.uiSchema));
+        const { uiSchema, formData } = this.props;
+        const { height = 400, emptyHelp, mapOptions = {}, mobileEditor: _mobileEditor, data } = utils_1.getUiOptions(uiSchema);
+        const isEmpty = !formData || !formData.geometries || !formData.geometries.length;
+        const _mapOptions = Object.assign(Object.assign(Object.assign({ controls: true, clickBeforeZoomAndPan: true }, mapOptions), (this.state.mapOptions || {})), { locate: {
+                on: this.state.locateOn || false,
+                onLocationFound: this.onLocate
+            } });
+        const isSingleton = _mapOptions.singleton;
+        let singletonHasLocate = false;
+        let singletonRendered = false;
+        if (isSingleton) {
+            const { map } = this.props.formContext.services.singletonMap;
+            if (map) {
+                singletonRendered = true;
+                singletonHasLocate = map.getOptions().locate;
+            }
+        }
+        if (mapOptions.createOnLocate && !this.state.mapOptions && (!singletonRendered || singletonHasLocate)) {
+            _mapOptions.locate.on = true;
+        }
+        if (_mobileEditor) {
+            _mapOptions.controls = false;
+            _mapOptions.viewLocked = true;
+            _mapOptions.customControls = [{
+                    text: this.props.formContext.translations.ChooseLocation,
+                    fn: this.showMobileEditorMap,
+                    iconCls: "glyphicon glyphicon-pencil"
+                }];
+        }
+        const { lang, topOffset, bottomOffset } = this.props.formContext;
+        const { mobileEditor } = this.state;
+        let mobileEditorOptions = utils_1.isObject(mobileEditor) ? mobileEditor : {};
+        const geometry = this.getGeometry(this.props);
+        if (geometry) {
+            const { center, radius } = getCenterAndRadiusFromGeometry(geometry);
+            mobileEditorOptions = {
+                center,
+                radius
+            };
+        }
+        if (this.map && this.map.userLocation) {
+            mobileEditorOptions.userLocation = this.map.userLocation;
+        }
+        const extraData = Array.isArray(data) ? data : [data].map((geoData) => ({ geoData }));
+        return (React.createElement("div", null,
+            React.createElement(TitleFieldTemplate, { title: this.props.schema.title, schema: this.props.schema }),
+            React.createElement(components_1.Affix, Object.assign({}, { topOffset, bottomOffset }),
+                React.createElement("div", { style: { height } },
+                    React.createElement(MapArrayField_1.MapComponent, Object.assign({}, _mapOptions, { ref: this.setMapRef, draw: this.getDrawOptions(this.props), data: extraData, lang: lang, zoomToData: { paddingInMeters: 200 }, panel: emptyHelp && isEmpty ? { panelTextContent: emptyHelp } : undefined, formContext: this.props.formContext, onOptionsChanged: this.onOptionsChanged })),
+                    this.map && this.map.container && react_dom_1.createPortal(this.renderBlocker(), this.map.container))),
+            this.state.mapRendered && mobileEditor && mobileEditor.visible &&
+                React.createElement(MobileEditorMap, Object.assign({}, mobileEditorOptions, { options: mobileEditor.options, onChange: this.onMobileEditorChange, onClose: this.onHideMobileEditorMap, map: this.map, formContext: this.props.formContext }))));
+    }
+    renderBlocker() {
+        const { blockBeforeLocation } = utils_1.getUiOptions(this.props.uiSchema);
+        const geometry = this.getGeometry(this.props);
+        if (blockBeforeLocation && !this.state.located && !geometry) {
+            return (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "blocker" }),
+                React.createElement("div", { className: "blocker-content" },
+                    React.createElement("span", null,
+                        this.props.formContext.translations.SearchingForLocation,
+                        "..."),
+                    React.createElement(Spinner, null))));
+        }
+    }
+}
+exports.default = MapField;
+MapField.propTypes = {
+    uiSchema: PropTypes.shape({
+        "ui:options": PropTypes.shape({
+            mapOptions: PropTypes.object,
+            height: PropTypes.number,
+            emptyHelp: PropTypes.string,
+            geometryCollection: PropTypes.boolean,
+        })
+    }),
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["object"])
+    }).isRequired,
+    formData: PropTypes.object
+};
+class MobileEditorMap extends React.Component {
+    constructor(props) {
+        super(props);
+        this.DEFAULT_RADIUS_PIXELS = 100;
+        this.setMobileEditorMapRef = (mapComponent) => {
+            if (mapComponent && mapComponent.refs && mapComponent.refs.map) {
+                this.map = mapComponent.refs.map.map;
+            }
+            this.setState({ mapRendered: true });
+        };
+        this.setOkButtonRef = (elem) => {
+            this.okButtonElem = react_dom_1.findDOMNode(elem);
+        };
+        this.onChange = () => {
+            const { map } = this.map;
+            const centerLatLng = map.getCenter();
+            const centerPoint = map.latLngToContainerPoint(centerLatLng);
+            const leftEdgeAsLatLng = map.containerPointToLatLng({ x: centerPoint.x - this.DEFAULT_RADIUS_PIXELS, y: centerPoint.y });
+            const radius = map.getCenter().distanceTo(leftEdgeAsLatLng);
+            this.props.onChange({
+                type: "Point",
+                coordinates: [centerLatLng.lng, centerLatLng.lat],
+                radius
+            });
+            this.onClose();
+        };
+        this.computePadding = () => {
+            // If the rendered element wasn't full screen, we couldn't use these as height/width.
+            const height = window.innerHeight;
+            const width = window.innerWidth;
+            const topToCircleEdgePixels = parseInt(height / 2 - this.DEFAULT_RADIUS_PIXELS);
+            const leftToCircleEdgePixels = parseInt(width / 2 - this.DEFAULT_RADIUS_PIXELS);
+            const padding = [
+                leftToCircleEdgePixels,
+                topToCircleEdgePixels
+            ];
+            return padding;
+        };
+        this.setViewFromCenterAndRadius = (center, radius) => {
+            if (center) {
+                if (radius) {
+                    const centerLatLng = L.latLng(center);
+                    const data = {
+                        geoData: {
+                            type: "Point",
+                            coordinates: [centerLatLng.lng, centerLatLng.lat],
+                            radius
+                        },
+                        getFeatureStyle: this.invisibleStyle
+                    };
+                    const zoomToData = {
+                        padding: this.computePadding()
+                    };
+                    return { data, zoomToData };
+                }
+                return { center };
+            }
+            return {};
+        };
+        this.invisibleStyle = () => {
+            return {
+                opacity: 0,
+                fillOpacity: 0
+            };
+        };
+        this.onKeyDown = ({ key }) => {
+            if (key === "Escape") {
+                this.onClose();
+            }
+        };
+        this.onLocate = (latlng, accuracy) => {
+            if (this.props.center || !this.mounted)
+                return;
+            const options = this.setViewFromCenterAndRadius(latlng, accuracy);
+            if (options.data && options.zoomToData) {
+                this.setState({ mapOptions: { data: options.data } }, () => {
+                    this.map.zoomToData(options.zoomToData);
+                });
+            }
+            else if (options.center) {
+                this.map.setCenter(options.center);
+            }
+        };
+        this.onClose = () => {
+            this.props.onClose(this.map.getOptions());
+        };
+        const { center, radius } = this.props;
+        this.state = { mapOptions: this.setViewFromCenterAndRadius(center, radius) };
+    }
+    componentDidMount() {
+        this.mounted = true;
+        this.okButtonElem.focus();
+    }
+    componenWillUnmount() {
+        this.mounted = false;
+    }
+    getCircle(radiusPixels) {
+        return (React.createElement("svg", { width: "100%", height: "100%", style: { position: "absolute", zIndex: 1000, top: 0, pointerEvents: "none" } },
+            React.createElement("defs", null,
+                React.createElement("mask", { id: "mask", x: "0", y: "0", width: "100%", height: "100%" },
+                    React.createElement("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: "#fff" }),
+                    React.createElement("circle", { cx: "50%", cy: "50%", r: radiusPixels }))),
+            React.createElement("rect", { x: "0", y: "0", width: "100%", height: "100%", mask: "url(#mask)", fillOpacity: "0.2" }),
+            React.createElement("circle", { cx: "50%", cy: "50%", r: radiusPixels, stroke: "black", strokeWidth: "2", fillOpacity: "0" })));
+    }
+    render() {
+        let _a = this.props.map.getOptions(), { rootElem, customControls, draw, data, zoomToData, zoom, center, locate } = _a, options = __rest(_a, ["rootElem", "customControls", "draw", "data", "zoomToData", "zoom", "center", "locate"]); // eslint-disable-line @typescript-eslint/no-unused-vars
+        const { userLocation } = this.props;
+        options = Object.assign(Object.assign(Object.assign({}, options), (this.props.options || {})), this.state.mapOptions);
+        options.locate = {
+            on: true,
+            userLocation,
+            onLocationFound: this.onLocate,
+            panOnFound: false
+        };
+        const { translations } = this.props.formContext;
+        return (React.createElement(components_2.Fullscreen, { onKeyDown: this.onKeyDown, tabIndex: -1, ref: this.setContainerRef, formContext: this.props.formContext },
+            React.createElement(MapArrayField_1.MapComponent, Object.assign({}, options, { singleton: true, clickBeforeZoomAndPan: false, viewLocked: false, controls: { draw: false }, ref: this.setMobileEditorMapRef, formContext: this.props.formContext })),
+            this.state.mapRendered && react_dom_1.createPortal(this.getCircle(this.DEFAULT_RADIUS_PIXELS), this.map.container),
+            React.createElement("div", { className: "floating-buttons-container" },
+                React.createElement(components_2.Button, { block: true, onClick: this.onChange, ref: this.setOkButtonRef }, translations.ChooseThisLocation),
+                React.createElement(components_2.Button, { block: true, onClick: this.onClose }, translations.Cancel))));
+    }
+}

package/lib/components/fields/MultiAnyToBooleanField.d.ts

@@ -0,0 +1,25 @@
+export default class MultiAnyToBooleanField extends React.Component<any, any, any> {
+    static propTypes: {
+        uiSchema: PropTypes.Requireable<PropTypes.InferProps<{
+            "ui:options": PropTypes.Requireable<PropTypes.InferProps<{
+                groups: PropTypes.Requireable<(PropTypes.InferProps<{
+                    label: PropTypes.Requireable<string>;
+                    trueValue: PropTypes.Requireable<any>;
+                    falseValue: PropTypes.Requireable<any>;
+                    allowUndefined: PropTypes.Requireable<boolean>;
+                }> | null | undefined)[]>;
+            }>>;
+        }>>;
+        schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        formData: PropTypes.Requireable<any[]>;
+    };
+    constructor(props: any);
+    getInitialState(props: any): {
+        groupsFormData: any[];
+    };
+    onChange: (index: any) => (value: any) => void;
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";

package/lib/components/fields/MultiAnyToBooleanField.js

@@ -0,0 +1,100 @@
+"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 BaseComponent_1 = require("../BaseComponent");
+const PropTypes = require("prop-types");
+const utils_1 = require("../../utils");
+const AnyToBooleanField_1 = require("./AnyToBooleanField");
+const utils_2 = require("@rjsf/utils");
+let MultiAnyToBooleanField = class MultiAnyToBooleanField extends React.Component {
+    constructor(props) {
+        super(props);
+        this.onChange = (index) => (value) => {
+            const groupsFormData = this.state.groupsFormData;
+            groupsFormData[index] = value;
+            this.setState({ groupsFormData: groupsFormData });
+            const formData = groupsFormData.reduce((arr, val) => {
+                if (val !== undefined) {
+                    arr.push(val);
+                }
+                return arr;
+            }, []);
+            this.props.onChange(formData);
+        };
+        this.state = this.getInitialState(props);
+    }
+    getInitialState(props) {
+        let { groups } = utils_1.getUiOptions(props.uiSchema) || [];
+        const { formData } = props;
+        const trueValues = groups.map(group => group.trueValue);
+        const falseValues = groups.map(group => group.falseValue);
+        const groupsFormData = [];
+        if (formData) {
+            formData.forEach(value => {
+                if (value === undefined) {
+                    return;
+                }
+                const trueIndex = trueValues.findIndex(trueValue => props.formContext.utils.formDataEquals(value, trueValue, props.idSchema.$id));
+                if (trueIndex !== -1) {
+                    groupsFormData[trueIndex] = value;
+                }
+                else {
+                    const falseIndex = falseValues.findIndex(falseValue => props.formContext.utils.formDataEquals(value, falseValue, props.idSchema.$id));
+                    if (falseIndex !== -1) {
+                        groupsFormData[falseIndex] = value;
+                    }
+                }
+            });
+        }
+        return { groupsFormData: groupsFormData };
+    }
+    render() {
+        const TitleFieldTemplate = utils_2.getTemplate("TitleFieldTemplate", this.props.registry, utils_1.getUiOptions(this.props.uiSchema));
+        let { groups } = utils_1.getUiOptions(this.props.uiSchema) || [];
+        return (React.createElement(React.Fragment, null,
+            React.createElement(TitleFieldTemplate, { title: this.props.schema.title, schema: this.props.schema, uiSchema: this.props.uiSchema, registry: this.props.registry }),
+            React.createElement("div", { className: "checkbox-row" }, groups.map((group, idx) => {
+                const { "ui:help": help, "ui:helpHoverable": helpHoverable, helpPlacement } = group, _group = __rest(group, ["ui:help", "ui:helpHoverable", "helpPlacement"]);
+                const groupProps = Object.assign(Object.assign({}, this.props), { schema: Object.assign(Object.assign({}, this.props.schema.items), { title: group.label }), uiSchema: Object.assign(Object.assign({}, this.props.uiSchema), { "ui:options": Object.assign({ falseValue: undefined }, _group), "ui:help": help, "ui:helpHoverable": helpHoverable, "ui:helpPlacement": helpPlacement }), formData: this.state.groupsFormData[idx], onChange: this.onChange(idx) });
+                return (React.createElement(React.Fragment, { key: idx },
+                    React.createElement(AnyToBooleanField_1.default, Object.assign({}, groupProps))));
+            }))));
+    }
+};
+MultiAnyToBooleanField.propTypes = {
+    uiSchema: PropTypes.shape({
+        "ui:options": PropTypes.shape({
+            groups: PropTypes.arrayOf(PropTypes.shape({
+                label: PropTypes.string,
+                trueValue: PropTypes.any,
+                falseValue: PropTypes.any,
+                allowUndefined: PropTypes.bool
+            }))
+        })
+    }),
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["array"])
+    }).isRequired,
+    formData: PropTypes.array
+};
+MultiAnyToBooleanField = __decorate([
+    BaseComponent_1.default
+], MultiAnyToBooleanField);
+exports.default = MultiAnyToBooleanField;

package/lib/components/fields/MultiArrayField.d.ts

@@ -0,0 +1,53 @@
+export default class MultiArrayField extends React.Component<any, any, any> {
+    static propTypes: {
+        uiSchema: PropTypes.Requireable<PropTypes.InferProps<{
+            "ui:options": PropTypes.Requireable<PropTypes.InferProps<{
+                rules: PropTypes.Requireable<string | PropTypes.InferProps<{
+                    container: PropTypes.Requireable<string>;
+                    field: PropTypes.Validator<string>;
+                    regexp: PropTypes.Requireable<string>;
+                    valueIn: PropTypes.Requireable<(string | null | undefined)[]>;
+                    valueLengthLessThan: PropTypes.Requireable<number>;
+                    complement: PropTypes.Requireable<boolean>;
+                }> | PropTypes.InferProps<{
+                    idx: PropTypes.Requireable<number>;
+                    isLast: PropTypes.Requireable<number>;
+                    complement: PropTypes.Requireable<boolean>;
+                }> | (string | PropTypes.InferProps<{
+                    container: PropTypes.Requireable<string>;
+                    field: PropTypes.Validator<string>;
+                    regexp: PropTypes.Requireable<string>;
+                    valueIn: PropTypes.Requireable<(string | null | undefined)[]>;
+                    valueLengthLessThan: PropTypes.Requireable<number>;
+                    complement: PropTypes.Requireable<boolean>;
+                }> | PropTypes.InferProps<{
+                    idx: PropTypes.Requireable<number>;
+                    isLast: PropTypes.Requireable<number>;
+                    complement: PropTypes.Requireable<boolean>;
+                }> | null | undefined)[]>;
+                itemsOperations: PropTypes.Requireable<PropTypes.InferProps<{
+                    type: PropTypes.Requireable<string>;
+                    uiSchema: PropTypes.Validator<object>;
+                }> | (PropTypes.InferProps<{
+                    type: PropTypes.Requireable<string>;
+                    uiSchema: PropTypes.Validator<object>;
+                }> | null | undefined)[]>;
+                cache: any;
+            }>>;
+        }>>;
+        schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        formData: PropTypes.Requireable<any[]>;
+    };
+    constructor(props: any);
+    constructor(props: any, context: any);
+    itemIds: {};
+    cache: {}[] | undefined;
+    arrayKeyFunctions: any[] | undefined;
+    groupItemIds: unknown;
+    groupedItems: any;
+    onChange: (idx: any) => (formData: any) => void;
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";