@luomus/laji-form 15.1.4 → 15.1.6

package/lib/components/fields/UiFieldApplierField.js

@@ -0,0 +1,106 @@
+"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");
+const functionPropType = PropTypes.shape({
+    "ui:field": PropTypes.string.isRequired,
+    "ui:options": PropTypes.object
+});
+let UiFieldApplierField = class UiFieldApplierField extends React.Component {
+    constructor(props) {
+        super(props);
+        this.getFunctions = () => {
+            let { functions } = this.getUiOptions();
+            if (!Array.isArray(functions)) {
+                functions = [functions];
+            }
+            return functions;
+        };
+        this.onChange = (formData) => {
+            const { field } = this.getUiOptions();
+            this.onChangeFormData = formData;
+            this.functions[this.functions.length - 1].fn.onChange(utils_1.parseJSONPointer(formData, field));
+        };
+        this.functions = [];
+    }
+    static getName() { return "UiFieldApplierField"; }
+    getStateFromProps(props) {
+        if (this.functions.length !== this.getFunctions().length) {
+            this.functions = this.functions.slice(0, this.getFunctions().length);
+        }
+        let { field } = this.getUiOptions();
+        const state = this.getFunctions().reduce((props, options, idx) => {
+            let { "ui:field": uiField, "ui:options": uiOptions } = options;
+            const uiSchemaForField = utils_1.parseJSONPointer(props.uiSchema, utils_1.uiSchemaJSONPointer(props.schema, field));
+            const propsForField = {
+                schema: utils_1.parseJSONPointer(props.schema, utils_1.schemaJSONPointer(props.schema, field)),
+                uiSchema: Object.assign(Object.assign({}, uiSchemaForField), { "ui:options": Object.assign(Object.assign({}, utils_1.getUiOptions(uiSchemaForField)), uiOptions) }),
+                formData: utils_1.parseJSONPointer(props.formData, field, !!"safe"),
+                idSchema: utils_1.parseJSONPointer(props.idSchema, field),
+                errorSchema: utils_1.parseJSONPointer(props.errorSchema, field, !!"safe") || {},
+                registry: props.registry,
+                formContext: props.formContext,
+                onChange: this.functions[idx] && this.functions[idx].uiField === uiField
+                    ? this.functions[idx].fn.props.onChange
+                    : (formData) => {
+                        idx === 0
+                            ? this.combinedOnChange(formData)
+                            : this.functions[idx - 1].fn.onChange(formData);
+                    }
+            };
+            let fn, state;
+            if (this.functions[idx] && this.functions[idx].uiField === uiField) {
+                fn = this.functions[idx].fn;
+                state = fn.getStateFromProps(propsForField);
+            }
+            else {
+                fn = new props.registry.fields[uiField](propsForField);
+                this.functions[idx] = { uiField, fn };
+                state = fn.state || {};
+            }
+            let computedProps = {};
+            if ("schema" in state) {
+                computedProps.schema = utils_1.updateSafelyWithJSONPointer(props.schema, state.schema, utils_1.schemaJSONPointer(props.schema, field));
+            }
+            if ("uiSchema" in state) {
+                computedProps.uiSchema = utils_1.updateSafelyWithJSONPointer(props.uiSchema, state.uiSchema, utils_1.uiSchemaJSONPointer(props.schema, field));
+            }
+            ["formData", "idSchema", "errorSchema"].forEach(prop => {
+                if (prop in state) {
+                    computedProps[prop] = utils_1.updateSafelyWithJSONPointer(props[prop] || {}, state[prop], field);
+                }
+            });
+            return Object.assign(Object.assign({}, props), computedProps);
+        }, props);
+        state.onChange = this.onChange;
+        return state;
+    }
+    combinedOnChange(formData) {
+        const { field } = this.getUiOptions();
+        this.props.onChange(utils_1.updateSafelyWithJSONPointer(this.onChangeFormData, formData, field));
+    }
+};
+UiFieldApplierField.propTypes = {
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["object"])
+    }).isRequired,
+    uiSchema: PropTypes.shape({
+        "ui:options": PropTypes.shape({
+            field: PropTypes.string,
+            functions: PropTypes.oneOfType([functionPropType, PropTypes.arrayOf(functionPropType)])
+        })
+    }),
+    formData: PropTypes.object
+};
+UiFieldApplierField = __decorate([
+    VirtualSchemaField_1.default
+], UiFieldApplierField);
+exports.default = UiFieldApplierField;

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

@@ -0,0 +1,42 @@
+export default class UiFieldMapperArrayField extends React.Component<any, any, any> {
+    static propTypes: {
+        uiSchema: PropTypes.Validator<PropTypes.InferProps<{
+            "ui:options": PropTypes.Requireable<PropTypes.InferProps<{
+                functions: PropTypes.Requireable<PropTypes.InferProps<{
+                    "ui:field": PropTypes.Validator<string>;
+                    "ui:options": PropTypes.Requireable<object>;
+                }> | (PropTypes.InferProps<{
+                    "ui:field": PropTypes.Validator<string>;
+                    "ui:options": PropTypes.Requireable<object>;
+                }> | null | undefined)[]>;
+            }>>;
+            uiSchema: PropTypes.Requireable<object>;
+        }>>;
+        schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        formData: PropTypes.Requireable<any[]>;
+    };
+    static getName(): string;
+    constructor(props: any);
+    childProps: any[];
+    functionOutputProps: any[];
+    updateChildProps: (props: any) => void;
+    getFieldPropsForIdx: (props: any, idx: any) => any;
+    tmpItemFormData: any;
+    applyFunctionsToChildProps: (props: any, childProps: any) => any;
+    getFunctionOutputForIdx: (props: any, idx: any) => any;
+    getStateFromProps(props: any, origProps: any): {
+        schema: any;
+        uiSchema: any;
+        formData: any;
+        idSchema: any;
+        errorSchema: any;
+        formContext: any;
+        registry: any;
+        onChange: (formData: any) => void;
+    };
+    onChange: (formData: any) => void;
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";

package/lib/components/fields/UiFieldMapperArrayField.js

@@ -0,0 +1,121 @@
+"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 PropTypes = require("prop-types");
+const utils_1 = require("@rjsf/utils");
+const utils_2 = require("../../utils");
+const VirtualSchemaField_1 = require("../VirtualSchemaField");
+const functionPropType = PropTypes.shape({
+    "ui:field": PropTypes.string.isRequired,
+    "ui:options": PropTypes.object
+});
+let UiFieldMapperArrayField = class UiFieldMapperArrayField extends React.Component {
+    constructor(props) {
+        super(props);
+        this.updateChildProps = (props) => {
+            (props.formData || []).forEach((item, idx) => {
+                const currentFieldProps = this.childProps[idx];
+                const nextFieldProps = this.getFieldPropsForIdx(props, idx);
+                if (!utils_1.deepEquals([currentFieldProps, nextFieldProps])) {
+                    this.functionOutputProps[idx] = this.applyFunctionsToChildProps(props, nextFieldProps);
+                    this.childProps[idx] = nextFieldProps;
+                }
+            });
+        };
+        this.getFieldPropsForIdx = (props, idx) => {
+            return Object.assign(Object.assign({}, props), { schema: props.schema.items, uiSchema: (props.uiSchema.uiSchema || props.uiSchema).items, idSchema: props.idSchema, formData: (props.formData || [])[idx], errorSchema: (props.errorSchema || {})[idx] || {}, onChange: formData => {
+                    this.tmpItemFormData = formData;
+                } });
+        };
+        this.applyFunctionsToChildProps = (props, childProps) => {
+            let { functions } = utils_2.getUiOptions(props.uiSchema);
+            return ((Array.isArray(functions)) ? functions : [functions]).reduce((_props, { "ui:field": uiField, "ui:options": uiOptions }) => {
+                const _a = _props.uiSchema || {}, { "ui:functions": uiFunctions, uiSchema, "ui:field": origUiField, "ui:options": origUiOptions, "ui:settings": origUiSettings } = _a, _propsUiSchema = __rest(_a, ["ui:functions", "uiSchema", "ui:field", "ui:options", "ui:settings"]);
+                _props = Object.assign(Object.assign({}, _props), { uiSchema: Object.assign(Object.assign({}, _propsUiSchema), { "ui:field": uiField, "ui:options": uiOptions }) });
+                const { state = {} } = new props.registry.fields[uiField](_props);
+                return Object.assign(Object.assign(Object.assign({}, _props), state), { uiSchema: Object.assign(Object.assign(Object.assign({}, _props.uiSchema), state.uiSchema), { "ui:functions": uiFunctions, "ui:field": origUiField, "ui:options": origUiOptions, "ui:settings": origUiSettings, uiSchema }) });
+            }, childProps);
+        };
+        this.getFunctionOutputForIdx = (props, idx) => {
+            return this.applyFunctionsToChildProps(props, this.getFieldPropsForIdx(props, idx));
+        };
+        this.onChange = (formData) => {
+            this.props.onChange(formData.map((item, idx) => {
+                if (!utils_1.deepEquals(item, (this.props.formData || [])[idx])) {
+                    const output = this.functionOutputProps[idx] || this.getFunctionOutputForIdx(this.props, idx);
+                    output.onChange(item); // Will trigger child instance onChange, which will set this.tmpItemFormData.
+                    return this.tmpItemFormData;
+                }
+                return item;
+            }));
+        };
+        this.childProps = [];
+        this.functionOutputProps = [];
+        this.updateChildProps(props);
+    }
+    static getName() { return "UiFieldMapperArrayField"; }
+    UNSAFE_componentWillReceiveProps(props) {
+        this.updateChildProps(props);
+        this.setState(this.getStateFromProps(props));
+    }
+    getStateFromProps(props, origProps) {
+        const templateOutput = this.functionOutputProps && this.functionOutputProps.length ?
+            this.functionOutputProps[0] :
+            this.getFunctionOutputForIdx(origProps, undefined);
+        const addBaseErrors = (errorSchema) => (props.errorSchema || {}).__errors
+            ? Object.assign(Object.assign({}, errorSchema), { __errors: props.errorSchema.__errors }) : errorSchema;
+        const schema = Object.assign(Object.assign({}, props.schema), { items: templateOutput.schema });
+        const state = {
+            schema,
+            uiSchema: Object.assign(Object.assign({}, props.uiSchema), { items: Object.assign(Object.assign({}, props.uiSchema.items), templateOutput.uiSchema) }),
+            formData: (props.formData || []).map((item, idx) => this.functionOutputProps[idx].formData),
+            idSchema: templateOutput.idSchema,
+            errorSchema: addBaseErrors(Object.keys((props.errorSchema || {})).reduce((errorSchema, idx) => {
+                if (!this.functionOutputProps[idx])
+                    return errorSchema;
+                errorSchema[idx] = this.functionOutputProps[idx].errorSchema;
+                return errorSchema;
+            }, {})),
+            formContext: templateOutput.formContext,
+            registry: templateOutput.registry,
+            onChange: this.onChange
+        };
+        return state;
+    }
+};
+UiFieldMapperArrayField.propTypes = {
+    uiSchema: PropTypes.shape({
+        "ui:options": PropTypes.shape({
+            functions: PropTypes.oneOfType([
+                PropTypes.arrayOf(functionPropType),
+                functionPropType
+            ])
+        }),
+        uiSchema: PropTypes.object
+    }).isRequired,
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["array"])
+    }).isRequired,
+    formData: PropTypes.array
+};
+UiFieldMapperArrayField = __decorate([
+    VirtualSchemaField_1.default
+], UiFieldMapperArrayField);
+exports.default = UiFieldMapperArrayField;

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

@@ -0,0 +1,22 @@
+export default class UnitCountShorthandField extends React.Component<any, any, any> {
+    static propTypes: {
+        uiSchema: PropTypes.Validator<PropTypes.InferProps<{
+            "ui:options": PropTypes.Validator<PropTypes.InferProps<{
+                shorthandField: PropTypes.Validator<string>;
+                pairCountField: PropTypes.Validator<string>;
+                taxonIDField: PropTypes.Validator<string>;
+            }>>;
+        }>>;
+        schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        formData: PropTypes.Validator<object>;
+    };
+    static getName(): string;
+    constructor(props: any);
+    parseCode(value: any, taxonId: any): Promise<any>;
+    getStateFromProps(props: any): any;
+    promiseTimestamp: number | undefined;
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";

package/lib/components/fields/UnitCountShorthandField.js

@@ -0,0 +1,149 @@
+"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");
+const BaseComponent_1 = require("../BaseComponent");
+const components_1 = require("../components");
+const merge = require("deepmerge");
+const ReactContext_1 = require("../../ReactContext");
+let UnitCountShorthandField = class UnitCountShorthandField extends React.Component {
+    constructor(props) {
+        super(props);
+        this.parseCode = this.parseCode.bind(this);
+    }
+    static getName() { return "UnitCountShorthandField"; }
+    getStateFromProps(props) {
+        const { uiSchema, formData } = props;
+        const { shorthandField, taxonIDField } = utils_1.getUiOptions(props.uiSchema);
+        const shortHandUiSchema = merge(utils_1.parseJSONPointer(props.uiSchema, shorthandField) || {}, {
+            "ui:widget": CodeReader,
+            "ui:options": {
+                parseCode: this.parseCode,
+                taxonID: utils_1.parseJSONPointer(formData, taxonIDField)
+            }
+        });
+        const _uiSchema = utils_1.updateSafelyWithJSONPointer(uiSchema, shortHandUiSchema, shorthandField);
+        return Object.assign(Object.assign({}, props), { uiSchema: _uiSchema });
+    }
+    parseCode(value, taxonId) {
+        const { apiClient } = this.props.formContext;
+        let formData = this.props.formData;
+        const { shorthandField, pairCountField } = utils_1.getUiOptions(this.props.uiSchema);
+        let timestamp = Date.now();
+        this.promiseTimestamp = timestamp;
+        return new Promise((resolve, reject) => {
+            if (!value || !taxonId) {
+                formData = utils_1.updateSafelyWithJSONPointer(formData, undefined, pairCountField);
+                this.props.onChange(formData);
+                resolve({ success: undefined });
+                return;
+            }
+            apiClient.fetchCached("/autocomplete/pairCount", { q: value, taxonID: taxonId }).then(suggestion => {
+                if (timestamp !== this.promiseTimestamp) {
+                    reject();
+                    return;
+                }
+                formData = utils_1.updateSafelyWithJSONPointer(formData, suggestion.key, shorthandField);
+                formData = utils_1.updateSafelyWithJSONPointer(formData, suggestion.value, pairCountField);
+                this.props.onChange(formData);
+                resolve({ success: suggestion.key ? true : undefined, value: suggestion.key });
+            }).catch(() => {
+                if (timestamp !== this.promiseTimestamp) {
+                    reject();
+                    return;
+                }
+                formData = utils_1.updateSafelyWithJSONPointer(formData, undefined, pairCountField);
+                this.props.onChange(formData);
+                resolve({ success: false, value: value });
+            });
+        });
+    }
+};
+UnitCountShorthandField.propTypes = {
+    uiSchema: PropTypes.shape({
+        "ui:options": PropTypes.shape({
+            shorthandField: PropTypes.string.isRequired,
+            pairCountField: PropTypes.string.isRequired,
+            taxonIDField: PropTypes.string.isRequired
+        }).isRequired
+    }).isRequired,
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["object"])
+    }).isRequired,
+    formData: PropTypes.object.isRequired
+};
+UnitCountShorthandField = __decorate([
+    VirtualSchemaField_1.default
+], UnitCountShorthandField);
+exports.default = UnitCountShorthandField;
+let CodeReader = class CodeReader extends React.Component {
+    constructor(props) {
+        super(props);
+        this.onChange = ({ target: { value } }) => {
+            this.props.onChange(value);
+        };
+        this.onKeyDown = (e) => {
+            if (e.key === "Enter") {
+                this.onBlur();
+            }
+        };
+        this.state = { loading: false };
+        this.onBlur = this.onBlur.bind(this);
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.options.taxonID !== this.props.options.taxonID) {
+            this.onBlur();
+        }
+    }
+    render() {
+        let validationState = null;
+        if (this.state.success === false) {
+            validationState = "error";
+        }
+        else if (this.state.success) {
+            validationState = "success";
+        }
+        const { formContext } = this.props;
+        const { translations } = formContext;
+        const inputElem = (React.createElement(components_1.FetcherInput, { id: this.props.id, loading: this.state.loading, value: this.props.value || "", validationState: validationState, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onChange: this.onChange }));
+        const { FormGroup, HelpBlock } = this.context.theme;
+        return (React.createElement(FormGroup, { validationState: this.state.success === false ? "error" : undefined },
+            inputElem,
+            this.state.success === false ? (React.createElement(HelpBlock, null, translations.InvalidUnitCode)) : null,
+            React.createElement("div", { className: "small text-muted", dangerouslySetInnerHTML: { __html: this.props.help } })));
+    }
+    onBlur() {
+        const { value, options } = this.props;
+        const { parseCode, taxonID } = options;
+        if (!(value === this.state.value && taxonID === this.state.taxonID)) {
+            this.setState({ value, taxonID, loading: true, success: undefined });
+            this.props.formContext.services.submitHooks.add(this.props, () => {
+                return parseCode(value, taxonID).then((result) => {
+                    this.setState({ loading: false, success: result.success, value: result.value });
+                });
+            });
+        }
+    }
+};
+CodeReader.contextType = ReactContext_1.default;
+CodeReader.propTypes = {
+    options: PropTypes.shape({
+        parseCode: PropTypes.func.isRequired,
+        taxonID: PropTypes.string
+    }).isRequired,
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["string"])
+    }),
+    value: PropTypes.string
+};
+CodeReader = __decorate([
+    BaseComponent_1.default
+], CodeReader);

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

@@ -0,0 +1,26 @@
+/**
+ * Compatible only with unit array.
+ */
+export default class UnitListShorthandArrayField extends React.Component<any, any, any> {
+    static contextType: React.Context<import("../../ReactContext").ContextProps>;
+    static propTypes: {
+        schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        formData: PropTypes.Validator<any[]>;
+    };
+    constructor(props: any);
+    constructor(props: any, context: any);
+    getStateFromProps(props: any): {
+        uiSchema: any;
+    };
+    onButtonClick: () => () => void;
+    onHide: () => void;
+    onTagFieldChange: (tags: any) => void;
+    onSubmit: () => void;
+    onKeyDown: (e: any) => void;
+    setTagArrayRef: (ref: any) => void;
+    tagRef: any;
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";

package/lib/components/fields/UnitListShorthandArrayField.js

@@ -0,0 +1,108 @@
+"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 BaseComponent_1 = require("../BaseComponent");
+const utils_1 = require("../../utils");
+const components_1 = require("../components");
+const ReactContext_1 = require("../../ReactContext");
+const TagArrayField_1 = require("./TagArrayField");
+/**
+ * Compatible only with unit array.
+ */
+let UnitListShorthandArrayField = class UnitListShorthandArrayField extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.onButtonClick = () => () => {
+            this.setState({ show: !this.state.show });
+        };
+        this.onHide = () => {
+            this.setState({ show: false, value: "" });
+        };
+        this.onTagFieldChange = (tags) => {
+            this.setState({ value: tags.join(",") });
+        };
+        this.onSubmit = () => {
+            const value = this.state.value + (utils_1.isEmptyString(this.tagRef.state.value) ? "" : `,${this.tagRef.state.value}`);
+            this.onHide();
+            const { translations, notifier, apiClient } = this.props.formContext;
+            this.props.formContext.services.blocker.push();
+            apiClient.fetch("/autocomplete/unit", { q: value, list: true, includePayload: true }).then(({ payload: { units, nonMatchingCount } }) => {
+                units = units.map(unit => {
+                    unit = utils_1.getDefaultFormState(this.props.schema.items, unit);
+                    unit = utils_1.bringRemoteFormData(unit, this.props.formContext);
+                    unit = utils_1.assignUUID(unit);
+                    return unit;
+                });
+                const formData = this.props.formData;
+                const last = formData[formData.length - 1];
+                if (last && utils_1.isDefaultData(last, this.props.schema.items)) {
+                    formData.pop();
+                }
+                this.props.onChange([...formData, ...units]);
+                nonMatchingCount
+                    ? notifier.warning(`${translations.UnitListShorthandWarning} ${nonMatchingCount}`)
+                    : notifier.success(translations.UnitListShorthandSuccess);
+                this.props.formContext.services.blocker.pop();
+            });
+        };
+        this.onKeyDown = (e) => {
+            if (e.key === "Enter") {
+                this.onSubmit(e);
+            }
+        };
+        this.setTagArrayRef = (ref) => {
+            this.tagRef = ref;
+        };
+    }
+    getStateFromProps(props) {
+        const buttonDefinition = {
+            fn: this.onButtonClick,
+            fnName: "addUnitList",
+            glyph: "align-justify",
+            label: this.props.formContext.translations.AddUnitList,
+            id: this.props.idSchema.$id,
+            changesFormData: true,
+            rules: {
+                canAdd: true
+            }
+        };
+        const innerUiSchema = utils_1.getInnerUiSchema(props.uiSchema);
+        const options = utils_1.getUiOptions(innerUiSchema);
+        const uiSchema = Object.assign(Object.assign({}, innerUiSchema), { "ui:options": Object.assign(Object.assign({}, options), { buttons: [
+                    ...(options.buttons || []),
+                    buttonDefinition
+                ] }) });
+        return { uiSchema };
+    }
+    render() {
+        const { SchemaField } = this.props.registry.fields;
+        const { Modal } = this.context.theme;
+        return (React.createElement(React.Fragment, null,
+            React.createElement(SchemaField, Object.assign({}, this.props, { uiSchema: this.state.uiSchema })),
+            this.state.show && (React.createElement(Modal, { show: true, onHide: this.onHide, dialogClassName: "unit-list-shorthand-modal" },
+                React.createElement(Modal.Body, null,
+                    React.createElement(TagArrayField_1.TagInputComponent, { tags: utils_1.isEmptyString(this.state.value) ? [] : this.state.value.split(",").filter(s => !utils_1.isEmptyString(s)), onChange: this.onTagFieldChange, schema: {}, idSchema: {}, uiSchema: { "ui:options": { separatorKeys: [","] } }, inputProps: { autoFocus: true }, onKeyDown: this.onKeyDown, ref: this.setTagArrayRef, formContext: this.props.formContext }),
+                    React.createElement("span", { className: "text-muted" },
+                        React.createElement("i", null, this.props.formContext.translations.UnitListShorthandHelp)),
+                    React.createElement("br", null),
+                    React.createElement(components_1.Button, { type: "submit", disabled: utils_1.isEmptyString(this.state.value), onClick: this.onSubmit }, this.props.formContext.translations.Add))))));
+    }
+};
+UnitListShorthandArrayField.contextType = ReactContext_1.default;
+UnitListShorthandArrayField.propTypes = {
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["array"])
+    }).isRequired,
+    formData: PropTypes.array.isRequired
+};
+UnitListShorthandArrayField = __decorate([
+    BaseComponent_1.default
+], UnitListShorthandArrayField);
+exports.default = UnitListShorthandArrayField;

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

@@ -0,0 +1,32 @@
+export default class UnitShorthandField extends React.Component<any, any, any> {
+    static propTypes: {
+        uiSchema: PropTypes.Requireable<PropTypes.InferProps<{
+            "ui:options": PropTypes.Validator<PropTypes.InferProps<{
+                shorthandField: PropTypes.Requireable<string>;
+                formID: PropTypes.Requireable<string>;
+                showSchema: PropTypes.Requireable<boolean>;
+                persistenceKey: PropTypes.Requireable<string>;
+            }>>;
+            uiSchema: PropTypes.Requireable<object>;
+        }>>;
+        schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        formData: PropTypes.Validator<object>;
+    };
+    constructor(props: any);
+    getStateFromProps: (props: any) => any;
+    onNextTick: (() => void) | undefined;
+    shouldShowSchema: (props: any) => any;
+    onToggleButtonClick: () => () => void;
+    getToggleButton: () => {
+        glyph: string;
+        fn: () => () => void;
+        tooltip: any;
+        tooltipPlacement: string;
+        active: boolean;
+    };
+    onCodeChange: (formData?: {}) => void;
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";