@luomus/laji-form 15.1.4 → 15.1.6

package/lib/components/fields/AutoArrayField.js

@@ -0,0 +1,56 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const PropTypes = require("prop-types");
+const VirtualSchemaField_1 = require("../VirtualSchemaField");
+const utils_1 = require("../../utils");
+let AutoArrayField = class AutoArrayField extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.onChange = (formData) => {
+            const emptyItem = utils_1.getDefaultFormState(this.props.schema.items);
+            if (formData && formData.length !== 0 && this.props.formContext.utils.formDataEquals(formData[formData.length - 1], emptyItem, this.props.idSchema.$id)) {
+                formData = formData.slice(0, formData.length - 1);
+            }
+            this.props.onChange(formData);
+        };
+    }
+    static getName() { return "AutoArrayField"; }
+    getStateFromProps(props) {
+        const { formData = [], schema, uiSchema, formContext: { utils } } = props;
+        const state = { formData, onChange: this.onChange };
+        const newEmptyItem = utils_1.getDefaultFormState(schema.items);
+        const emptyItem = this.emptyItem
+            && utils.formDataEquals(newEmptyItem, this.emptyItem, props.idSchema.$id)
+            && formData.every(item => utils_1.getUUID(item) !== utils_1.getUUID(this.emptyItem))
+            ? this.emptyItem
+            : utils_1.assignUUID(newEmptyItem);
+        this.emptyItem = emptyItem;
+        if (formData && (formData.length === 0 || !utils.formDataEquals(formData[formData.length - 1], emptyItem, props.idSchema.$id))) {
+            state.formData = [...formData, emptyItem];
+        }
+        state.uiSchema = Object.assign(Object.assign({}, uiSchema), { "ui:options": Object.assign(Object.assign({ canAdd: false }, (uiSchema["ui:options"] || {})), { nonOrderables: [state.formData.length - 1], nonRemovables: [state.formData.length - 1] }) });
+        return state;
+    }
+};
+AutoArrayField.propTypes = {
+    uiSchema: PropTypes.shape({
+        "ui:options": PropTypes.shape({
+            autofocus: PropTypes.boolean
+        })
+    }),
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["array"])
+    }).isRequired,
+    formData: PropTypes.array
+};
+AutoArrayField = __decorate([
+    VirtualSchemaField_1.default
+], AutoArrayField);
+exports.default = AutoArrayField;

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

@@ -0,0 +1,69 @@
+/**
+ * Uses AutosuggestWidget to apply autosuggested values to multiple object's fields. Options are passed to AutosuggestWidget.
+ *
+ * uischema = {"ui:options": {
+ *  autosuggestField: <string> (field name which is used for api call. The suggestions renderer method is also defined by autosuggestField)
+ *  suggestionInputField: <fieldName> (the field which is rendered as the autosuggest input)
+ *  suggestionValueField: <fieldName> (the field which the value for autosuggest is pulled from)
+ *  suggestionReceivers: {
+ *    <fieldName>: <suggestion path>,     (when an autosuggestion is selected, these fields receive the autosuggestions value defined by suggestion path.
+ *    <fieldName2>: <suggestion path 2>,   Example: autosuggestion = {key: "MLV.2", value: "kalalokki", payload: {informalGroups: ["linnut"]}}
+ *   }                                              suggestionReceivers: {someFieldName: "key", someFieldName2: "/payload/informalgroups/0"}
+ *                                         If fieldName start  with '$', then a function from autosuggestFieldSettings parses the suggestion. Example: $taxonGroup
+ *                                         If fieldName start  with '/', it is handled as a JSON pointer.
+ *  uiSchema: <uiSchema> (uiSchema which is passed to inner SchemaField)
+ * }
+ */
+export default class AutosuggestField extends React.Component<any, any, any> {
+    static propTypes: {
+        uiSchema: PropTypes.Validator<PropTypes.InferProps<{
+            "ui:options": PropTypes.Validator<PropTypes.InferProps<{
+                autosuggestField: PropTypes.Validator<string>;
+                suggestionInputField: PropTypes.Validator<string>;
+                allowNonsuggestedValue: any;
+                suggestionReceivers: PropTypes.Validator<object>;
+                inputTransformer: PropTypes.Requireable<PropTypes.InferProps<{
+                    regexp: PropTypes.Validator<string>;
+                    transformations: PropTypes.Validator<object>;
+                }>>;
+                informalTaxonGroups: PropTypes.Requireable<string>;
+                informalTaxonGroupPersistenceKey: PropTypes.Requireable<string>;
+            }>>;
+            uiSchema: PropTypes.Requireable<object>;
+        }>>;
+        schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        formData: PropTypes.Validator<object>;
+    };
+    static getName(): string;
+    constructor(props: any);
+    onNextTick: (() => any) | undefined;
+    getTogglePersistenceContextKey: (props: any) => string;
+    getInformalTaxonGroupsPersistenceContextKey: (props: any) => string;
+    getStateFromProps: (props: any, toggled: any) => {
+        schema: any;
+        uiSchema: any;
+        toggled: any;
+        taxonGroupID: any;
+    };
+    getActiveOptions: (options: any, toggled: any) => any;
+    getSuggestionReceiverValue(suggestion: any, suggestionReceiver: any): any;
+    getSuggestionValue: (suggestion: any, def: any) => any;
+    onSuggestionSelected: (suggestion: any, mounted: any) => void;
+    onConfirmUnsuggested: (value: any) => void;
+    onInputChange: ({ target: { value } }: {
+        target: {
+            value: any;
+        };
+    }) => any;
+    isValueSuggested: () => boolean;
+    getSuggestionFromValue: () => Promise<{
+        value: any;
+        key: any;
+    }>;
+    onInformalTaxonGroupSelected: (informalTaxonID: any) => void;
+    onToggleChange: (value: any) => void;
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";

package/lib/components/fields/AutosuggestField.js

@@ -0,0 +1,299 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const PropTypes = require("prop-types");
+const utils_1 = require("../../utils");
+const Context_1 = require("../../Context");
+const merge = require("deepmerge");
+const suggestionParsers = {
+    taxonGroup: suggestion => {
+        return suggestion.payload ? suggestion.payload.informalTaxonGroups.map(item => typeof item === "string" ? item : item.id) : [];
+    }
+};
+const parseQuery = (query, props, taxonGroups) => {
+    return Object.keys(query).reduce((_query, key) => {
+        if (typeof query[key] === "object") {
+            const { parser, field } = query[key];
+            const { formData = {} } = props;
+            if (parser === "arrayJoin") {
+                _query[key] = ((key === "informalTaxonGroup" ? taxonGroups : formData[field]) || []).join(",");
+            }
+        }
+        else {
+            _query[key] = query[key];
+        }
+        return _query;
+    }, {});
+};
+/**
+ * Uses AutosuggestWidget to apply autosuggested values to multiple object's fields. Options are passed to AutosuggestWidget.
+ *
+ * uischema = {"ui:options": {
+ *  autosuggestField: <string> (field name which is used for api call. The suggestions renderer method is also defined by autosuggestField)
+ *  suggestionInputField: <fieldName> (the field which is rendered as the autosuggest input)
+ *  suggestionValueField: <fieldName> (the field which the value for autosuggest is pulled from)
+ *  suggestionReceivers: {
+ *    <fieldName>: <suggestion path>,     (when an autosuggestion is selected, these fields receive the autosuggestions value defined by suggestion path.
+ *    <fieldName2>: <suggestion path 2>,   Example: autosuggestion = {key: "MLV.2", value: "kalalokki", payload: {informalGroups: ["linnut"]}}
+ *   }                                              suggestionReceivers: {someFieldName: "key", someFieldName2: "/payload/informalgroups/0"}
+ *                                         If fieldName start  with '$', then a function from autosuggestFieldSettings parses the suggestion. Example: $taxonGroup
+ *                                         If fieldName start  with '/', it is handled as a JSON pointer.
+ *  uiSchema: <uiSchema> (uiSchema which is passed to inner SchemaField)
+ * }
+ */
+class AutosuggestField extends React.Component {
+    constructor(props) {
+        super(props);
+        this.UNSAFE_componentWillReceiveProps = (props) => {
+            this.setState(this.getStateFromProps(props));
+            if (this.onNextTick) {
+                this.onNextTick();
+                this.onNextTick = undefined;
+            }
+        };
+        this.getTogglePersistenceContextKey = (props) => `AUTOSUGGEST_FIELD_TOGGLE_PERSISTENCE_${props.uiSchema["ui:options"].togglePersistenceKey}`;
+        this.getInformalTaxonGroupsPersistenceContextKey = (props) => `AUTOSUGGEST_FIELD_PERSISTENCE_${props.uiSchema["ui:options"].informalTaxonGroupPersistenceKey}`;
+        this.getStateFromProps = (props, toggled) => {
+            let { schema, uiSchema, formData } = props;
+            const context = Context_1.default(this.props.formContext.contextId);
+            const uiOptions = utils_1.getUiOptions(uiSchema);
+            const { informalTaxonGroups = "informalTaxonGroups", informalTaxonGroupPersistenceKey, togglePersistenceKey, suggestionInputField, suggestionReceivers } = uiOptions;
+            if (togglePersistenceKey) {
+                toggled = context[this.getTogglePersistenceContextKey(props)];
+            }
+            const { toggleable } = uiOptions;
+            toggled = (toggled !== undefined)
+                ? toggled
+                : this.state
+                    ? this.state.toggled
+                    : togglePersistenceKey
+                        ? context[this.getTogglePersistenceContextKey(props)] !== undefined
+                            ? context[this.getTogglePersistenceContextKey(props)]
+                            : (toggleable && toggleable.toggled || false)
+                        : false;
+            const taxonGroupID = !informalTaxonGroups
+                ? undefined
+                : informalTaxonGroupPersistenceKey !== undefined
+                    ? context[this.getInformalTaxonGroupsPersistenceContextKey(props)]
+                    : formData[informalTaxonGroups]
+                        ? formData[informalTaxonGroups][0]
+                        : undefined;
+            let options = Object.assign(Object.assign({}, uiOptions), { onSuggestionSelected: this.onSuggestionSelected, onUnsuggestedSelected: this.onUnsuggestedSelected, inputProps: {
+                    onChange: this.onInputChange
+                }, isValueSuggested: this.isValueSuggested, getSuggestionFromValue: this.getSuggestionFromValue, onInformalTaxonGroupSelected: informalTaxonGroups ? this.onInformalTaxonGroupSelected : undefined, getSuggestionValue: this.getSuggestionValue, informalTaxonGroupsValue: props.formData[informalTaxonGroups], taxonGroupID, placeholder: toggled
+                    ? typeof toggleable.placeholder === "string"
+                        ? toggleable.placeholder
+                        : this.props.formContext.translations.UnitAutosuggestFieldTogglePlaceholder
+                    : uiOptions["ui:placeholder"], controlledValue: suggestionReceivers
+                    && suggestionReceivers[suggestionInputField]
+                    && suggestionReceivers[suggestionInputField] !== "key" });
+            if (toggleable) {
+                options.toggled = toggled;
+                options.onToggle = this.onToggleChange;
+                options = this.getActiveOptions(options, toggled);
+            }
+            if (suggestionInputField && props.formData && !utils_1.isEmptyString(utils_1.parseJSONPointer(props.formData, suggestionInputField, !!"safe"))) {
+                options.value = utils_1.parseJSONPointer(props.formData, suggestionInputField);
+            }
+            if (options.query) {
+                options.query = parseQuery(options.query, props, [options.taxonGroupID]);
+            }
+            const innerUiSchema = utils_1.getInnerUiSchema(uiSchema);
+            const _uiSchemaJSONPointer = utils_1.uiSchemaJSONPointer(schema, suggestionInputField);
+            const suggestionInputFieldExistingUiSchema = utils_1.parseJSONPointer(innerUiSchema, _uiSchemaJSONPointer);
+            let widgetProps = suggestionInputFieldExistingUiSchema || {};
+            if (options.chooseImages && props.formContext.uiSchemaContext.isEdit && options.value) {
+                widgetProps = Object.assign(Object.assign({}, widgetProps), { "ui:title": utils_1.capitalizeFirstLetter(options.orWriteSpeciesNameLabel || props.formContext.translations.orWriteSpeciesName) });
+            }
+            let _uiSchema = utils_1.updateSafelyWithJSONPointer(innerUiSchema, Object.assign(Object.assign({ "ui:widget": "AutosuggestWidget" }, widgetProps), { "ui:options": Object.assign(Object.assign({}, utils_1.getUiOptions((suggestionInputFieldExistingUiSchema || {})[suggestionInputField])), options) }), _uiSchemaJSONPointer);
+            return { schema, uiSchema: _uiSchema, toggled, taxonGroupID };
+        };
+        this.getActiveOptions = (options, toggled) => {
+            toggled = (toggled !== undefined) ? toggled : (this.state || {}).toggled;
+            return toggled ? merge(options, options.toggleable) : options;
+        };
+        this.getSuggestionValue = (suggestion, def) => {
+            const { suggestionValueParse } = this.getActiveOptions(utils_1.getUiOptions(this.props.uiSchema));
+            return suggestionValueParse
+                ? this.getSuggestionReceiverValue(suggestion, suggestionValueParse)
+                : def;
+        };
+        this.onSuggestionSelected = (suggestion, mounted) => {
+            if (suggestion === null)
+                suggestion = undefined;
+            let { formData, uiSchema, formContext } = this.props;
+            const { suggestionReceivers, autosuggestField, suggestionValueField, autocopy, suggestionInputField } = this.getActiveOptions(utils_1.getUiOptions(uiSchema));
+            const handleSuggestionReceivers = (formData, suggestion) => {
+                for (let fieldName in suggestionReceivers) {
+                    const fieldVal = this.getSuggestionReceiverValue(suggestion, suggestionReceivers[fieldName]);
+                    formData = utils_1.updateFormDataWithJSONPointer(Object.assign(Object.assign({}, this.props), { formData }), fieldVal, fieldName);
+                }
+                return formData;
+            };
+            if (autosuggestField === "unit") {
+                let { unit } = suggestion.payload;
+                if (unit.unitType) {
+                    unit.informalTaxonGroups = unit.unitType;
+                    delete unit.unitType;
+                }
+                unit = (mounted && formContext.formDataTransformers || []).reduce((unit, { "ui:field": uiField, props: fieldProps }) => {
+                    const { state = {} } = new fieldProps.registry.fields[uiField](Object.assign(Object.assign({}, fieldProps), { formData: unit }));
+                    return state.formData;
+                }, unit);
+                formData = handleSuggestionReceivers(formData, {});
+                formData = Object.assign(Object.assign({}, utils_1.updateFormDataWithJSONPointer(Object.assign(Object.assign({}, this.props), { formData }), undefined, suggestionValueField)), unit);
+                if (utils_1.isEmptyString(utils_1.parseJSONPointer(this.props.formData, suggestionInputField, !!"safe")) && autocopy && !this.props.formContext.utils.formDataEquals(this.props.formData, formData, this.props.idSchema.$id)) {
+                    this.onNextTick = () => this.props.formContext.services.customEvents.send(this.props.idSchema.$id, "copy", autocopy);
+                }
+            }
+            else {
+                formData = handleSuggestionReceivers(formData, suggestion);
+            }
+            if (mounted) {
+                this.props.onChange(formData);
+            }
+            else {
+                if (formContext.formDataTransformers) {
+                    formData = formContext.formDataTransformers.reduce((unit, { "ui:field": uiField, props: fieldProps }) => {
+                        let changed;
+                        const getChanged = (_changed) => {
+                            changed = _changed;
+                        };
+                        const field = new fieldProps.registry.fields[uiField](Object.assign(Object.assign({}, fieldProps), { formData: formData, onChange: getChanged }));
+                        field.onChange(field.state && field.state.formData ? field.state.formData : formData);
+                        return changed;
+                    }, formData);
+                }
+                const lajiFormInstance = formContext.services.rootInstance;
+                const pointer = this.props.formContext.services.ids.getJSONPointerFromLajiFormIdAndFormDataAndIdSchemaId(this.props.idSchema.$id, utils_1.getFieldUUID(this.props));
+                const newFormData = Object.assign(Object.assign({}, utils_1.parseJSONPointer(lajiFormInstance.state.formData, pointer)), formData);
+                lajiFormInstance.onChange(utils_1.updateSafelyWithJSONPointer(lajiFormInstance.getFormData(), newFormData, pointer));
+            }
+        };
+        this.onConfirmUnsuggested = (value) => {
+            let { formData, uiSchema } = this.props;
+            const { suggestionReceivers, suggestionInputField } = this.getActiveOptions(utils_1.getUiOptions(uiSchema));
+            Object.keys(suggestionReceivers).forEach(fieldName => {
+                const defaultValue = utils_1.getDefaultFormState(utils_1.parseJSONPointer(this.props.schema, utils_1.schemaJSONPointer(this.props.schema, fieldName)));
+                formData = utils_1.updateFormDataWithJSONPointer(Object.assign(Object.assign({}, this.props), { formData }), defaultValue, fieldName);
+            });
+            formData = utils_1.updateFormDataWithJSONPointer(Object.assign(Object.assign({}, this.props), { formData }), value, suggestionInputField);
+            this.props.onChange(formData);
+        };
+        this.onInputChange = ({ target: { value } }) => {
+            let { formData, uiSchema } = this.props;
+            const { inputTransformer } = this.getActiveOptions(utils_1.getUiOptions(uiSchema));
+            if (inputTransformer) {
+                const regexp = new RegExp(inputTransformer.regexp);
+                if (value.match(regexp)) {
+                    if (!formData)
+                        formData = {};
+                    let formDataChange = {};
+                    value = value.replace(regexp, "$1");
+                    if (inputTransformer.transformations)
+                        for (let transformField in inputTransformer.transformations) {
+                            formDataChange[transformField] = inputTransformer.transformations[transformField];
+                        }
+                    formData = Object.assign(Object.assign({}, formData), formDataChange);
+                    this.props.onChange(formData);
+                }
+            }
+            return value;
+        };
+        this.isValueSuggested = () => {
+            const { formData, uiSchema } = this.props;
+            const { suggestionValueField } = this.getActiveOptions(utils_1.getUiOptions(uiSchema));
+            if (suggestionValueField) {
+                return !!utils_1.parseJSONPointer(formData, suggestionValueField, !!"safe");
+            }
+            for (let fieldName in this.getActiveOptions(utils_1.getUiOptions(uiSchema)).suggestionReceivers) {
+                if (!formData || !utils_1.parseJSONPointer(formData, fieldName, !!"safe")) {
+                    return false;
+                }
+            }
+            return true;
+        };
+        this.getSuggestionFromValue = () => {
+            const { formData, uiSchema } = this.props;
+            const { suggestionValueField, suggestionInputField } = this.getActiveOptions(utils_1.getUiOptions(uiSchema));
+            const suggestionValue = utils_1.parseJSONPointer(formData, suggestionValueField, !!"safe");
+            const suggestionInputValue = utils_1.parseJSONPointer(formData, suggestionInputField, !!"safe");
+            const value = suggestionInputField && formData && !utils_1.isEmptyString(suggestionValue) ?
+                suggestionInputValue : undefined;
+            const key = suggestionValueField && formData && !utils_1.isEmptyString(suggestionValue) ?
+                suggestionValue : undefined;
+            let suggestion = undefined;
+            if (value !== undefined && key !== undefined) {
+                suggestion = { value, key };
+            }
+            return suggestion ? Promise.resolve(suggestion) : Promise.reject();
+        };
+        this.onInformalTaxonGroupSelected = (informalTaxonID) => {
+            const { uiSchema } = this.props;
+            const { informalTaxonGroups, informalTaxonGroupPersistenceKey } = this.getActiveOptions(utils_1.getUiOptions(uiSchema));
+            if (informalTaxonGroupPersistenceKey !== undefined) {
+                Context_1.default(this.props.formContext.contextId)[this.getInformalTaxonGroupsPersistenceContextKey(this.props)] = informalTaxonID;
+                this.setState(this.getStateFromProps(this.props));
+            }
+            else {
+                this.props.onChange(Object.assign(Object.assign({}, this.props.formData), { [informalTaxonGroups]: [informalTaxonID] }));
+            }
+        };
+        this.onToggleChange = (value) => {
+            const { togglePersistenceKey } = utils_1.getUiOptions(this.props.uiSchema);
+            if (togglePersistenceKey) {
+                Context_1.default(this.props.formContext.contextId)[this.getTogglePersistenceContextKey(this.props)] = value;
+            }
+            this.setState(this.getStateFromProps(this.props, value));
+        };
+        this.props.formContext.services.settings.bind(this, props);
+        this.state = this.getStateFromProps(props);
+    }
+    static getName() { return "AutosuggestField"; }
+    getSuggestionReceiverValue(suggestion, suggestionReceiver) {
+        // undefined suggestion clears value.
+        let fieldVal = undefined;
+        if (typeof suggestion === "object") {
+            const suggestionValPath = suggestionReceiver;
+            if (suggestionValPath[0] === "$") {
+                fieldVal = suggestionParsers[suggestionValPath.substring(1)](suggestion);
+            }
+            else {
+                const fieldsToTry = suggestionValPath.split("||").map(s => s.trim());
+                for (let field of fieldsToTry) {
+                    fieldVal = utils_1.parseJSONPointer(suggestion, field);
+                    if (fieldVal !== undefined) {
+                        break;
+                    }
+                }
+            }
+        }
+        return fieldVal;
+    }
+    render() {
+        const { SchemaField } = this.props.registry.fields;
+        return React.createElement(SchemaField, Object.assign({}, this.props, { uiSchema: this.state.uiSchema }));
+    }
+}
+exports.default = AutosuggestField;
+AutosuggestField.propTypes = {
+    uiSchema: PropTypes.shape({
+        "ui:options": PropTypes.shape({
+            autosuggestField: PropTypes.string.isRequired,
+            suggestionInputField: PropTypes.string.isRequired,
+            allowNonsuggestedValue: PropTypes.boolean,
+            suggestionReceivers: PropTypes.object.isRequired,
+            inputTransformer: PropTypes.shape({
+                regexp: PropTypes.string.isRequired,
+                transformations: PropTypes.object.isRequired
+            }),
+            informalTaxonGroups: PropTypes.string,
+            informalTaxonGroupPersistenceKey: PropTypes.string
+        }).isRequired,
+        uiSchema: PropTypes.object
+    }).isRequired,
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["object"])
+    }).isRequired,
+    formData: PropTypes.object.isRequired
+};

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

@@ -0,0 +1,41 @@
+export default class CombinedValueDisplayField extends React.Component<any, any, any> {
+    static propTypes: {
+        uiSchema: PropTypes.Validator<PropTypes.InferProps<{
+            "ui:options": PropTypes.Requireable<PropTypes.InferProps<{
+                combined: PropTypes.Requireable<PropTypes.InferProps<{
+                    firstField: PropTypes.Validator<string>;
+                    secondField: PropTypes.Validator<string>;
+                    name: PropTypes.Requireable<string>;
+                    title: PropTypes.Requireable<string>;
+                    combineType: PropTypes.Requireable<string>;
+                    delimiter: PropTypes.Requireable<string>;
+                }> | (PropTypes.InferProps<{
+                    firstField: PropTypes.Validator<string>;
+                    secondField: PropTypes.Validator<string>;
+                    name: PropTypes.Requireable<string>;
+                    title: PropTypes.Requireable<string>;
+                    combineType: PropTypes.Requireable<string>;
+                    delimiter: PropTypes.Requireable<string>;
+                }> | null | undefined)[]>;
+            }>>;
+            uiSchema: PropTypes.Requireable<object>;
+        }>>;
+        schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        formData: PropTypes.Validator<object>;
+    };
+    static getName(): string;
+    constructor(props: any);
+    constructor(props: any, context: any);
+    getStateFromProps(props: any): {
+        schema: any;
+        idSchema: any;
+        formData: any;
+        onChange: (formData: any) => void;
+    };
+    toMinutes: (time: any) => number;
+    onChange: (formData: any) => void;
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";

package/lib/components/fields/CombinedValueDisplayField.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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const PropTypes = require("prop-types");
+const utils_1 = require("../../utils");
+const VirtualSchemaField_1 = require("../VirtualSchemaField");
+/**
+ * Combines values of two fields into one value which can be used for displaying (editing that value doesn't change formData)
+ * Combine types:
+ * timeDifference: combines the values by calculating their time difference
+ * stringJoin (default): combines the values by joining them. delimiter is added between if given
+ */
+const combinedPropType = PropTypes.shape({
+    firstField: PropTypes.string.isRequired,
+    secondField: PropTypes.string.isRequired,
+    name: PropTypes.string,
+    title: PropTypes.string,
+    combineType: PropTypes.string,
+    delimiter: PropTypes.string
+});
+let CombinedValueDisplayField = class CombinedValueDisplayField extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.toMinutes = (time) => {
+            const parts = time.split(":");
+            return Number(parts[0]) * 60 + Number(parts[1]);
+        };
+        this.onChange = (formData) => {
+            const uiOptions = this.getUiOptions();
+            const combined = Array.isArray(uiOptions.combined) ? uiOptions.combined : [uiOptions.combined];
+            const combinedFields = combined.map(options => {
+                return options.name || "";
+            }, []);
+            combinedFields.forEach(field => {
+                formData = utils_1.immutableDelete(formData, field);
+            });
+            this.props.onChange(formData);
+        };
+    }
+    static getName() { return "CombinedValueDisplayField"; }
+    getStateFromProps(props) {
+        const uiOptions = this.getUiOptions();
+        let { schema, idSchema, formData } = props;
+        const combined = Array.isArray(uiOptions.combined) ? uiOptions.combined : [uiOptions.combined];
+        combined.forEach(options => {
+            const { name, title, combineType, firstField, secondField } = options;
+            schema = Object.assign(Object.assign({}, schema), { properties: Object.assign(Object.assign({}, schema.properties), { [name || ""]: { title: title || "", type: "string" } }) });
+            idSchema = this.props.registry.schemaUtils.toIdSchema(schema, idSchema.$id);
+            let value = undefined;
+            const firstValue = firstField[0] === "/" ? utils_1.parseJSONPointer(formData, firstField, !!"safely") : formData[firstField];
+            const secondValue = secondField[0] === "/" ? utils_1.parseJSONPointer(formData, secondField, !!"safely") : formData[secondField];
+            if (combineType === "timeDifference") {
+                if (firstValue && secondValue) {
+                    const difference = this.toMinutes(secondValue) - this.toMinutes(formData[firstField]);
+                    if (difference >= 0) {
+                        const hours = Math.floor(difference / 60);
+                        const minutes = difference % 60;
+                        value = hours + " h " + minutes + " min";
+                    }
+                }
+            }
+            else {
+                const delimiter = options.delimiter || "";
+                value = [];
+                if (firstValue)
+                    value.push(firstValue);
+                if (secondValue)
+                    value.push(secondValue);
+                value = value.join(delimiter);
+            }
+            formData = Object.assign(Object.assign({}, formData), { [name]: value });
+        });
+        return { schema, idSchema, formData, onChange: this.onChange };
+    }
+};
+CombinedValueDisplayField.propTypes = {
+    uiSchema: PropTypes.shape({
+        "ui:options": PropTypes.shape({
+            combined: PropTypes.oneOfType([
+                combinedPropType,
+                PropTypes.arrayOf(combinedPropType)
+            ])
+        }),
+        uiSchema: PropTypes.object
+    }).isRequired,
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["object"])
+    }).isRequired,
+    formData: PropTypes.object.isRequired
+};
+CombinedValueDisplayField = __decorate([
+    VirtualSchemaField_1.default
+], CombinedValueDisplayField);
+exports.default = CombinedValueDisplayField;

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

@@ -0,0 +1,42 @@
+/**
+ * Changes formData on onChange event according to conditional rules.
+ * uiSchema = {
+ *   "ui:options": {
+ *     rules: { // Can also be an array of rules
+ *       transformations: {
+ *        <field name to change if conditions met>: <new value>
+ *       },
+ *       conditions: {
+ *         <conditional field name>: { // Note that regexp and length must both pass for this rule to pass.
+ *           regexp: <string> <if the conditional field value matches this regexp, this condition will pass>
+ *           length: <number> <if the conditional field value length is equal or more, this conndition will pass>
+ *           reverse: <boolean> <Reverses the passing value>
+ *         }
+ *       }
+ *     }
+ *   }
+ * }
+ */
+export default class ConditionalOnChangeField extends React.Component<any, any, any> {
+    static propTypes: {
+        uiSchema: PropTypes.Validator<PropTypes.InferProps<{
+            "ui:options": PropTypes.Validator<PropTypes.InferProps<{
+                rules: PropTypes.Validator<PropTypes.InferProps<PropTypes.ValidationMap<any>> | PropTypes.InferProps<PropTypes.ValidationMap<any>>[]>;
+            }>>;
+            uiSchema: PropTypes.Requireable<object>;
+        }>>;
+        schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        formData: PropTypes.Validator<object>;
+    };
+    static getName(): string;
+    constructor(props: any);
+    constructor(props: any, context: any);
+    getStateFromProps(): {
+        onChange: (formData: any) => void;
+    };
+    onChange: (formData: any) => void;
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";