@luomus/laji-form 15.1.5 → 15.1.7

package/lib/components/fields/UnitShorthandField.js

@@ -0,0 +1,220 @@
+"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 BaseComponent_1 = require("../BaseComponent");
+const Context_1 = require("../../Context");
+const ReactContext_1 = require("../../ReactContext");
+const components_1 = require("../components");
+const AutosuggestWidget_1 = require("../widgets/AutosuggestWidget");
+const ArrayFieldTemplate_1 = require("../templates/ArrayFieldTemplate");
+const LINE_TRANSECT_IDS = ["MHL.1", "MHL.27", "MHL.28"];
+let UnitShorthandField = class UnitShorthandField extends React.Component {
+    constructor(props) {
+        super(props);
+        this.getStateFromProps = (props) => {
+            const { persistenceKey } = utils_1.getUiOptions(props.uiSchema);
+            let showSchema = undefined;
+            if (persistenceKey) {
+                const persistingContainer = Context_1.default(`${props.formContext.contextId}_UNIT_SHORTHAND_FIELD_PERSISTENCE_${persistenceKey}`);
+                if (persistingContainer && "value" in persistingContainer) {
+                    showSchema = persistingContainer.value;
+                }
+                else {
+                    showSchema = this.shouldShowSchema(props);
+                }
+            }
+            else {
+                showSchema = this.shouldShowSchema(props);
+            }
+            return { showSchema };
+        };
+        this.UNSAFE_componentWillReceiveProps = (props) => {
+            this.setState(this.getStateFromProps(props));
+        };
+        this.shouldShowSchema = (props) => {
+            let { showSchema } = this.state;
+            if (this.state.showSchema === undefined && !this.props.formContext.utils.formDataIsEmpty(props)) {
+                showSchema = true;
+            }
+            return showSchema;
+        };
+        this.onToggleButtonClick = () => () => {
+            const { persistenceKey } = utils_1.getUiOptions(this.props.uiSchema);
+            this.setState({ showSchema: !this.state.showSchema }, () => {
+                this.props.formContext.utils.focusById(this.props.idSchema.$id);
+                Context_1.default(`${this.props.formContext.contextId}_UNIT_SHORTHAND_FIELD_PERSISTENCE_${persistenceKey}`).value = this.state.showSchema;
+            });
+        };
+        this.getToggleButton = () => {
+            return {
+                glyph: "resize-small",
+                fn: this.onToggleButtonClick,
+                tooltip: this.props.formContext.translations[this.state.showSchema ? "OpenShorthand" : "CloseShorthand"],
+                tooltipPlacement: "left",
+                active: !this.state.showSchema
+            };
+        };
+        this.onCodeChange = (formData = {}) => {
+            const { autocopy, autofocus } = utils_1.getUiOptions(this.props.uiSchema);
+            if (!autofocus)
+                this.props.formContext.globals.idToFocus = this.props.idSchema.$id;
+            this.onNextTick = () => {
+                if (autocopy) {
+                    this.props.formContext.services.customEvents.send(this.props.idSchema.$id, "copy");
+                }
+                else if (autofocus) {
+                    this.props.formContext.services.customEvents.send(this.props.idSchema.$id, "focus", "last");
+                }
+                this.setState({ showSchema: true });
+            };
+            this.props.onChange(utils_1.getDefaultFormState(this.props.schema, Object.assign(Object.assign({}, this.props.formData), formData)));
+        };
+        this.state = { showSchema: utils_1.getUiOptions(props.uiSchema).showSchema };
+        this.state = Object.assign(Object.assign({}, this.state), this.getStateFromProps(props));
+    }
+    componentDidUpdate() {
+        if (this.onNextTick) {
+            this.onNextTick();
+            this.onNextTick = undefined;
+        }
+    }
+    render() {
+        const { uiSchema, formContext, disabled, readonly } = this.props;
+        const { SchemaField } = this.props.registry.fields;
+        const shorthandFieldName = utils_1.getUiOptions(this.props.uiSchema).shorthandField;
+        const toggleButton = this.getToggleButton();
+        const tailUiSchema = utils_1.getNestedTailUiSchema(uiSchema);
+        let help = tailUiSchema && tailUiSchema[shorthandFieldName] && tailUiSchema[shorthandFieldName]["ui:belowHelp"];
+        const uiSchemaWithoutHelp = utils_1.isEmptyString(help) ? uiSchema : utils_1.updateTailUiSchema(uiSchema, { [shorthandFieldName]: { "ui:belowHelp": { $set: undefined } } });
+        const id = (shorthandFieldName && this.props.idSchema[shorthandFieldName]) ?
+            this.props.idSchema[shorthandFieldName].$id :
+            `${this.props.idSchema.$id}_shortHandField`;
+        let innerUiSchema = undefined;
+        if (this.state.showSchema) {
+            innerUiSchema = utils_1.getInnerUiSchema(Object.assign({}, uiSchemaWithoutHelp));
+            const innerOptions = utils_1.getUiOptions(innerUiSchema);
+            innerUiSchema = Object.assign(Object.assign({}, innerUiSchema), { "ui:options": Object.assign(Object.assign({}, innerOptions), { buttons: [...(innerOptions.buttons || []), toggleButton] }) });
+        }
+        return !this.state.showSchema ? (React.createElement("div", { className: "laji-form-field-template-item", id: `_laji-form_${id}` },
+            React.createElement(CodeReader, { translations: this.props.formContext.translations, onChange: this.onCodeChange, value: this.props.formData[shorthandFieldName], formID: utils_1.getUiOptions(this.props.uiSchema).formID || formContext.formID || formContext.uiSchemaContext.formID, help: help, id: id, formContext: formContext, disabled: disabled, readonly: readonly, className: "laji-form-field-template-schema" }),
+            React.createElement("div", { className: "laji-form-field-template-buttons" }, ArrayFieldTemplate_1.getButton(toggleButton)))) : (React.createElement(SchemaField, Object.assign({}, this.props, { uiSchema: innerUiSchema })));
+    }
+};
+UnitShorthandField.propTypes = {
+    uiSchema: PropTypes.shape({
+        "ui:options": PropTypes.shape({
+            shorthandField: PropTypes.string,
+            formID: PropTypes.string,
+            showSchema: PropTypes.bool,
+            persistenceKey: PropTypes.string
+        }).isRequired,
+        uiSchema: PropTypes.object
+    }),
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["object"])
+    }).isRequired,
+    formData: PropTypes.object.isRequired
+};
+UnitShorthandField = __decorate([
+    BaseComponent_1.default
+], UnitShorthandField);
+exports.default = UnitShorthandField;
+let CodeReader = class CodeReader extends React.Component {
+    constructor(props) {
+        super(props);
+        this.getStateFromProps = (props) => {
+            let state = this.state;
+            if (this.state.value === "" && !utils_1.isEmptyString(props.value)) {
+                state.value = props.value;
+            }
+            return state;
+        };
+        this.onKeyDown = (e) => {
+            if (e.key === "Enter") {
+                this.getCode();
+            }
+        };
+        this.onFetcherInputChange = ({ target: { value } }) => {
+            if (this.mounted)
+                this.setState({ value });
+        };
+        this.onAutosuggestChange = (formData) => {
+            this.props.onChange(formData);
+        };
+        this.onSuggestionSelected = ({ payload: { unit } }) => {
+            const { formContext } = this.props;
+            unit = utils_1.bringRemoteFormData(unit, formContext);
+            this.props.onChange(unit);
+        };
+        this.renderSuggestion = (suggestion) => {
+            const { translations } = this.props;
+            return suggestion.payload.isNonMatching
+                ? React.createElement("span", { className: "text-muted" },
+                    suggestion.value,
+                    " ",
+                    React.createElement("i", null,
+                        "(",
+                        translations.unknownSpeciesName,
+                        ")"))
+                : suggestion.value;
+        };
+        this.getCode = () => {
+            const { value } = this.state;
+            if (!utils_1.isEmptyString(this.props.value) && utils_1.isEmptyString(value) && (!this.value || this.value.length < 3)) {
+                this.mounted && this.setState({ loading: true });
+                this.mounted && this.setState({ failed: false, loading: false }, () => {
+                    utils_1.isEmptyString(this.value) && this.props.onChange(undefined);
+                });
+            }
+            else if (value.length >= 3) {
+                this.mounted && this.setState({ loading: true });
+                this.apiClient.fetchCached("/autocomplete/unit", { q: value, formID: this.props.formID, includePayload: true }).then(response => {
+                    this.props.onChange(response.payload.unit);
+                }).catch(() => {
+                    this.mounted && this.setState({ failed: true, loading: false });
+                });
+            }
+        };
+        this.state = { value: "" };
+        this.state = this.getStateFromProps(props);
+        this.apiClient = props.formContext.apiClient;
+    }
+    componentDidMount() {
+        this.mounted = true;
+    }
+    componentWillUnmount() {
+        this.mounted = false;
+    }
+    render() {
+        const { translations, readonly, disabled } = this.props;
+        let validationState = null;
+        if (this.state.failed === true)
+            validationState = "warning";
+        else if (!utils_1.isEmptyString(this.props.value) && this.props.value === this.state.value)
+            validationState = "success";
+        const { formID, formContext } = this.props;
+        const inputElem = LINE_TRANSECT_IDS.includes(formID) ? (React.createElement(components_1.FetcherInput, { id: this.props.id, loading: this.state.loading, value: this.state.value, validationState: validationState, onChange: this.onFetcherInputChange, onBlur: this.getCode, onKeyDown: this.onKeyDown, readonly: readonly, disabled: disabled })) : (React.createElement("div", { className: "unit-shorthand" },
+            React.createElement(AutosuggestWidget_1.Autosuggest, { autosuggestField: "unit", query: {
+                    formID,
+                    includeNonMatching: true
+                }, onSuggestionSelected: this.onSuggestionSelected, renderSuggestion: this.renderSuggestion, onChange: this.onAutosuggestChange, formContext: formContext, allowNonsuggestedValue: false })));
+        const { FormGroup, HelpBlock } = this.context.theme;
+        return (React.createElement(FormGroup, { validationState: this.state.failed ? "error" : undefined },
+            inputElem,
+            this.state.failed
+                ? (React.createElement(HelpBlock, null, translations.InvalidUnitCode)) : null,
+            React.createElement("div", { className: "small text-muted", dangerouslySetInnerHTML: { __html: this.props.help } })));
+    }
+};
+CodeReader.contextType = ReactContext_1.default;
+CodeReader = __decorate([
+    BaseComponent_1.default
+], CodeReader);

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

@@ -0,0 +1,85 @@
+export function beforeAdd(props: any, addedIdx: any): void;
+export function getButton(button: any, props?: {}): JSX.Element | undefined;
+export function getButtons(buttons?: any[], props?: {}): any[];
+export function getButtonElems(buttons?: any[], props?: {}): JSX.Element | null;
+export function getButtonsForPosition(props: any, buttonDescriptions: any[] | undefined, position: any, defaultPosition?: string): (JSX.Element | undefined)[] | null;
+export function handlesArrayKeys(ComposedComponent: any): {
+    new (): {
+        [x: string]: any;
+        componentDidMount(): void;
+        componentDidUpdate(prevProps: any, prevState: any): void;
+        componentWillUnmount(): void;
+        addKeyHandlers(): void;
+        arrayKeyFunctions: any;
+        removeKeyHandlers(props: any): void;
+        getKeyHandlers(props: any): any[];
+        addChildKeyHandlers(props: any): void;
+        childKeyHandlers: any;
+        removeChildKeyHandlers(): void;
+        getChildKeyHandlers(props: any): any;
+        onFocus: (target: any) => void;
+        onCopy: (options?: {}) => void;
+        getCustomEventListeners(): (string | ((target: any) => void))[][];
+        addCustomEventListeners(props: any): void;
+        customEventListeners: any;
+        removeCustomEventListeners(props: any): void;
+    };
+    [x: string]: any;
+    displayName: string;
+};
+export class ArrayFieldTemplateWithoutKeyHandling extends React.Component<any, any, any> {
+    constructor(props: any);
+    constructor(props: any, context: any);
+    onSort: ({ oldIndex, newIndex }: {
+        oldIndex: any;
+        newIndex: any;
+    }) => void;
+    onFocuses: any[];
+    getOnFocus: (i: any) => () => void;
+    deleteButtonRefs: any[] | undefined;
+}
+declare var _default: {
+    new (): {
+        [x: string]: any;
+        componentDidMount(): void;
+        componentDidUpdate(prevProps: any, prevState: any): void;
+        componentWillUnmount(): void;
+        addKeyHandlers(): void;
+        arrayKeyFunctions: any;
+        removeKeyHandlers(props: any): void;
+        getKeyHandlers(props: any): any[];
+        addChildKeyHandlers(props: any): void;
+        childKeyHandlers: any;
+        removeChildKeyHandlers(): void;
+        getChildKeyHandlers(props: any): any;
+        onFocus: (target: any) => void;
+        onCopy: (options?: {}) => void;
+        getCustomEventListeners(): (string | ((target: any) => void))[][];
+        addCustomEventListeners(props: any): void;
+        customEventListeners: any;
+        removeCustomEventListeners(props: any): void;
+    };
+    [x: string]: any;
+    displayName: string;
+};
+export default _default;
+export namespace arrayKeyFunctions {
+    function navigateArray(e: any, { reverse, getProps, navigateCallforward, getCurrentIdx, focusByIdx, getIdToScrollAfterNavigate }: {
+        reverse: any;
+        getProps: any;
+        navigateCallforward: any;
+        getCurrentIdx: any;
+        focusByIdx: any;
+        getIdToScrollAfterNavigate: any;
+    }): boolean;
+    function insert(e: any, _props: any): boolean;
+}
+export namespace arrayItemKeyFunctions {
+    export function _delete(e: any, { getDeleteButton, id, getProps }: {
+        getDeleteButton: any;
+        id: any;
+        getProps: any;
+    }): true | undefined;
+    export { _delete as delete };
+}
+import * as React from "react";