@luomus/laji-form 15.1.5 → 15.1.7

package/lib/components/templates/FieldTemplate.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const Context_1 = require("../../Context");
+const components_1 = require("../components");
+const utils_1 = require("../../utils");
+class _FieldTemplate extends React.Component {
+    constructor(props) {
+        super(props);
+        this.canFocus = () => {
+            const { formContext } = this.props;
+            const { uiSchema = {} } = (formContext.formRef.current || { props: {} }).props;
+            return uiSchema.autoFocus !== false;
+        };
+        this.receiveId = (id) => {
+            this.setState({ id }, () => {
+                const { idToFocus, idToScroll } = Context_1.default(this.props.formContext.contextId);
+                if (this.canFocus() && idToFocus === id) {
+                    this.props.formContext.utils.focusAndScroll(idToFocus, idToScroll);
+                }
+            });
+        };
+        if (utils_1.getUiOptions(props.uiSchema).reserveId === false) {
+            this.state = {};
+            return;
+        }
+        const id = this.props.formContext.services.DOMIds.reserve(this.props.id, this.receiveId);
+        if (id) {
+            this.state = { id };
+        }
+        else {
+            this.state = {};
+        }
+    }
+    componentDidMount() {
+        const { formContext } = this.props;
+        const contextId = formContext.contextId;
+        const _context = Context_1.default(contextId);
+        const { idToFocus, idToScroll } = _context;
+        if (this.canFocus() && idToFocus !== undefined && this.state.id === idToFocus) {
+            if (this.props.formContext.utils.focusAndScroll(idToFocus, idToScroll)) {
+                _context.idToFocus = undefined;
+                _context.idToScroll = undefined;
+            }
+        }
+    }
+    UNSAFE_componentWillReceiveProps(props) {
+        if (utils_1.getUiOptions(props.uiSchema).reserveId !== false && this.props.id !== props.id) {
+            this.props.formContext.services.DOMIds.release(this.props.id, this.receiveId);
+            const id = props.formContext.services.DOMIds.reserve(props.id, this.receiveId);
+            id && this.receiveId(id);
+        }
+    }
+    componentWillUnmount() {
+        if (utils_1.getUiOptions(this.props.uiSchema).reserveId === false) {
+            return;
+        }
+        this.props.formContext.services.DOMIds.release(this.props.id, this.receiveId);
+    }
+    render() {
+        const { id, classNames: _classNames, children, rawErrors, description, hidden, required, displayLabel, schema, uiSchema, label: _label, forceDisplayLabel } = this.props;
+        const label = "ui:title" in uiSchema
+            ? uiSchema["ui:title"]
+            : "title" in schema
+                ? schema.title
+                : _label;
+        if (hidden || uiSchema["ui:field"] === "HiddenField" || uiSchema["ui:widget"] === "HiddenWidget") {
+            return children;
+        }
+        const inlineHelp = uiSchema["ui:inlineHelp"];
+        const belowHelp = uiSchema["ui:belowHelp"];
+        const htmlId = this.state.id ? `_laji-form_${this.state.id}` : undefined;
+        const _displayLabel = forceDisplayLabel ||
+            ((schema.items && schema.items.enum && !utils_1.isMultiSelect(schema, uiSchema)) ? false : displayLabel);
+        let warnings = [];
+        const errors = (rawErrors || []).reduce((arr, err) => {
+            if (err.includes("[warning]")) {
+                warnings.push(utils_1.formatErrorMessage(err));
+            }
+            else {
+                arr.push(utils_1.formatErrorMessage(err));
+            }
+            return arr;
+        }, []);
+        const warningClassName = (warnings.length > 0 && errors.length === 0) && "laji-form-warning-container";
+        const { Label, errorsAsPopup } = this.props.formContext;
+        const component = (errorsComponent) => (React.createElement("div", { className: utils_1.classNames(_classNames, warningClassName), id: htmlId },
+            label && _displayLabel ? React.createElement(Label, { label: label, uiSchema: uiSchema, id: id, required: required || uiSchema["ui:required"], registry: this.props.registry }) : null,
+            _displayLabel && description ? description : null,
+            React.createElement("div", null,
+                inlineHelp ? React.createElement("div", { className: "pull-left" }, children) : children,
+                inlineHelp
+                    ? (React.createElement("div", { className: "pull-left" },
+                        React.createElement(components_1.Help, { help: inlineHelp, id: `${htmlId}-inline-help` }))) : null),
+            belowHelp ?
+                React.createElement("div", { className: "small text-muted", dangerouslySetInnerHTML: { __html: belowHelp } }) :
+                null,
+            errorsComponent));
+        const errorsComponent = (React.createElement(React.Fragment, null,
+            errors.length > 0 ?
+                React.createElement("ul", { id: `laji-form-error-container-${id}`, className: "laji-form-error-container" }, errors.map((error, i) => (React.createElement("li", { key: i }, error))))
+                : null,
+            warnings.length > 0 ?
+                React.createElement("ul", { id: `laji-form-warning-container-${id}`, className: "laji-form-warning-container" }, warnings.map((warning, i) => (React.createElement("li", { key: i }, warning))))
+                : null));
+        if (errorsAsPopup && (rawErrors || []).length) {
+            return React.createElement(components_1.TooltipComponent, { placement: "bottom", tooltip: errorsComponent, className: "location-chooser-errors" }, component());
+        }
+        return component(errorsComponent);
+    }
+}
+exports.default = _FieldTemplate;

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

@@ -0,0 +1,7 @@
+export default function ObjectFieldTemplate(props: any): JSX.Element;
+export function getGlyphButtons(props: any): any;
+export function getObjectTemplateClassNames(props: any, buttons: any): {
+    containerClassName: string | undefined;
+    schemaClassName: string | undefined;
+    buttonsClassName: string | undefined;
+};

package/lib/components/templates/ObjectFieldTemplate.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getObjectTemplateClassNames = exports.getGlyphButtons = void 0;
+const React = require("react");
+const utils_1 = require("@rjsf/utils");
+const utils_2 = require("../../utils");
+const ArrayFieldTemplate_1 = require("./ArrayFieldTemplate");
+const ReactContext_1 = require("../../ReactContext");
+function ObjectFieldTemplate(props) {
+    const TitleFieldTemplate = utils_1.getTemplate("TitleFieldTemplate", props.registry, utils_2.getUiOptions(props.uiSchema));
+    const DescriptionFieldTemplate = utils_1.getTemplate("DescriptionFieldTemplate", props.registry, utils_2.getUiOptions(props.uiSchema));
+    const { ButtonToolbar } = React.useContext(ReactContext_1.default).theme;
+    let buttons = getGlyphButtons(props);
+    const [topButtons, bottomButtons, leftButtons, rightButtons] = ["top", "bottom", "left", "right"].map(pos => {
+        const buttons = ArrayFieldTemplate_1.getButtonsForPosition(props, utils_2.getUiOptions(props.uiSchema).buttons, pos, "no default");
+        return buttons
+            ? (React.createElement(ButtonToolbar, { key: `buttons-${pos}` }, buttons))
+            : null;
+    });
+    const { containerClassName, schemaClassName, buttonsClassName } = getObjectTemplateClassNames(props, buttons);
+    buttons = React.createElement("div", { className: buttonsClassName }, buttons);
+    const titleUiSchema = Object.assign(Object.assign({}, (props.uiSchema || {})), { "_ui:renderedButtons": buttons });
+    return (React.createElement("div", { className: containerClassName },
+        React.createElement("fieldset", { className: schemaClassName },
+            props.title &&
+                React.createElement(TitleFieldTemplate, { id: `${props.idSchema.$id}__title`, title: props.title, required: props.required || props.uiSchema["ui:required"], schema: props.schema, uiSchema: titleUiSchema, registry: props.registry }),
+            topButtons,
+            props.description &&
+                React.createElement(DescriptionFieldTemplate, { id: `${props.idSchema.$id}__description`, description: props.description, registry: props.registry, schema: props.schema }),
+            leftButtons && (React.createElement("div", { className: "pull-left" }, leftButtons)),
+            props.properties.map(({ content }) => content),
+            rightButtons && (React.createElement("div", { className: "pull-right" }, rightButtons)),
+            bottomButtons),
+        !props.title && buttons ? buttons : undefined));
+}
+exports.default = ObjectFieldTemplate;
+function getGlyphButtons(props) {
+    const { uiSchema } = props;
+    let buttons = uiSchema["ui:buttons"] || [];
+    const buttonDescriptions = (utils_2.getUiOptions(uiSchema).buttons || []).filter(buttonDef => !buttonDef.position);
+    if (buttonDescriptions) {
+        buttons = [
+            ...buttons,
+            ...buttonDescriptions.map(buttonDescription => ArrayFieldTemplate_1.getButton(buttonDescription, props))
+        ];
+    }
+    return buttons
+        ? props.title
+            ? buttons.reverse()
+            : buttons
+        : null;
+}
+exports.getGlyphButtons = getGlyphButtons;
+function getObjectTemplateClassNames(props, buttons) {
+    const vertical = props.uiSchema["ui:buttonsVertical"];
+    let containerClassName, schemaClassName, buttonsClassName;
+    if (buttons && buttons.length) {
+        containerClassName = "laji-form-field-template-item" + (vertical ? " keep-vertical" : "");
+        schemaClassName = "laji-form-field-template-schema";
+        buttonsClassName = "laji-form-field-template-buttons";
+        if (props.title)
+            buttonsClassName += " pull-right";
+    }
+    return { containerClassName, schemaClassName, buttonsClassName };
+}
+exports.getObjectTemplateClassNames = getObjectTemplateClassNames;

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

@@ -0,0 +1,9 @@
+export default TitleField;
+declare function TitleField({ title, id, formData, style, uiSchema, registry }: {
+    title: any;
+    id: any;
+    formData: any;
+    style: any;
+    uiSchema?: {} | undefined;
+    registry?: {} | undefined;
+}): JSX.Element | null;

package/lib/components/templates/TitleField.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const components_1 = require("../components");
+const utils_1 = require("../../utils");
+const Context_1 = require("../../Context");
+const ReactContext_1 = require("../../ReactContext");
+const TitleField = ({ title, id, formData, style, uiSchema = {}, registry = {} }) => {
+    const { "ui:help": help, "ui:helpHoverable": helpHoverable, "_ui:renderedButtons": buttons } = uiSchema;
+    const { titleClassName: className, titleFormatters = [] } = utils_1.getUiOptions(uiSchema);
+    const renderedFormatters = titleFormatters.map((titleFormatter) => {
+        const { renderer } = titleFormatter;
+        return _titleFormatters[renderer](Object.assign(Object.assign({}, titleFormatter), { formData }));
+    }).filter(i => i);
+    const { Tooltip } = React.useContext(ReactContext_1.default).theme;
+    if (renderedFormatters.length === 0 && utils_1.isEmptyString(title)) {
+        return null;
+    }
+    const helpComponent = help ? React.createElement(components_1.Help, null) : null;
+    let titleTextContent = React.createElement("span", null,
+        React.createElement("span", { dangerouslySetInnerHTML: { __html: title } }),
+        " ",
+        helpComponent);
+    if (help) {
+        const tooltipElem = (React.createElement(Tooltip, { id: id + "-tooltip" },
+            React.createElement("span", null,
+                React.createElement("strong", { dangerouslySetInnerHTML: { __html: title } }),
+                React.createElement("br", null),
+                React.createElement("span", { dangerouslySetInnerHTML: { __html: help } }))));
+        titleTextContent = (React.createElement(components_1.OverlayTrigger, { placement: "right", overlay: tooltipElem, hoverable: helpHoverable, formContext: registry.formContext }, titleTextContent));
+    }
+    return (React.createElement("legend", { className: utils_1.classNames(className, help && "has-help"), style: style },
+        React.createElement("span", null,
+            React.createElement("span", null, renderedFormatters),
+            " ",
+            titleTextContent,
+            " ",
+            buttons)));
+};
+exports.default = TitleField;
+const _titleFormatters = {
+    informalTaxonGroup: ({ formData, value, renderer }) => {
+        const informalTaxonGroup = utils_1.parseJSONPointer(formData, value, !!"safely");
+        const { informalTaxonGroupsById = {} } = Context_1.default();
+        const name = informalTaxonGroupsById[informalTaxonGroup] ? informalTaxonGroupsById[informalTaxonGroup].name : "";
+        return informalTaxonGroup ? React.createElement("span", { key: renderer },
+            React.createElement("div", { className: `informal-group-image ${informalTaxonGroup}` }),
+            " ",
+            name) : undefined;
+    }
+};

package/lib/components/widgets/AnyToBooleanWidget.d.ts

@@ -0,0 +1,20 @@
+export function AnyToBoolean(props: any): JSX.Element;
+export default _anyToBoolean;
+declare function _anyToBoolean(props: any): JSX.Element;
+declare namespace _anyToBoolean {
+    namespace propTypes {
+        export const uiSchema: PropTypes.Requireable<PropTypes.InferProps<{
+            "ui:options": PropTypes.Requireable<PropTypes.InferProps<{
+                trueValue: PropTypes.Validator<string | number | boolean>;
+                falseValue: PropTypes.Requireable<string | number | boolean>;
+                allowUndefined: PropTypes.Requireable<boolean>;
+            }>>;
+        }>>;
+        export const schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        export { valuePropType as formData };
+    }
+}
+import * as PropTypes from "prop-types";
+declare const valuePropType: PropTypes.Requireable<string | number | boolean>;

package/lib/components/widgets/AnyToBooleanWidget.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnyToBoolean = void 0;
+const React = require("react");
+const PropTypes = require("prop-types");
+const utils_1 = require("../../utils");
+const AnyToBoolean = (props) => React.createElement(_AnyToBoolean, Object.assign({}, props));
+exports.AnyToBoolean = AnyToBoolean;
+const _AnyToBoolean = (props) => {
+    const { widget } = props;
+    const options = utils_1.getUiOptions(widget ? props : props.uiSchema);
+    const { trueValue, falseValue, allowUndefined = true } = options;
+    const schema = Object.assign(Object.assign({}, props.schema), { type: "boolean", title: allowUndefined ? "" : props.schema.title });
+    const id = widget ? props.id : props.idSchema.$id;
+    const value = props.formContext.utils.formDataEquals(props[widget ? "value" : "formData"], trueValue, id)
+        ? true
+        : props.formContext.utils.formDataEquals(props[widget ? "value" : "formData"], falseValue, id)
+            ? false
+            : undefined;
+    const _onChange = props.onChange;
+    const onChange = React.useCallback((value) => {
+        const newValue = value === undefined
+            ? undefined
+            : value === true
+                ? trueValue
+                : falseValue;
+        _onChange(newValue);
+    }, [_onChange, trueValue, falseValue]);
+    const { CheckboxWidget } = props.registry.widgets;
+    const { SchemaField } = props.registry.fields;
+    return widget
+        ? (React.createElement(CheckboxWidget, Object.assign({}, props, { id: props.id, schema: schema, value: value, onChange: onChange, label: "", options: options }))) : (React.createElement(SchemaField, Object.assign({}, props, { schema: schema, uiSchema: utils_1.getInnerUiSchema(props.uiSchema), formData: value, onChange: onChange, label: "", options: options })));
+};
+const _anyToBoolean = (props) => React.createElement(_AnyToBoolean, Object.assign({ widget: true }, props));
+const valuePropType = PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]);
+_anyToBoolean.propTypes = {
+    uiSchema: PropTypes.shape({
+        "ui:options": PropTypes.shape({
+            trueValue: valuePropType.isRequired,
+            falseValue: valuePropType,
+            allowUndefined: PropTypes.bool
+        })
+    }),
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["string", "number", "boolean"])
+    }).isRequired,
+    formData: valuePropType
+};
+exports.default = _anyToBoolean;

package/lib/components/widgets/AutosuggestWidget.d.ts

@@ -0,0 +1,66 @@
+export default class _AutosuggestWidget extends React.Component<any, any, any> {
+    static propTypes: {
+        schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        value: PropTypes.Requireable<string>;
+    };
+    constructor(props: any);
+    constructor(props: any, context: any);
+    formatValue(value: any, options: any, parentProps: any): JSX.Element | undefined;
+}
+export class Autosuggest extends React.Component<any, any, any> {
+    static contextType: React.Context<import("../../ReactContext").ContextProps>;
+    static propTypes: {
+        autosuggestField: PropTypes.Requireable<string>;
+        allowNonsuggestedValue: PropTypes.Requireable<boolean>;
+        onSuggestionSelected: PropTypes.Requireable<(...args: any[]) => any>;
+        onUnsuggestedSelected: PropTypes.Requireable<(...args: any[]) => any>;
+        onInputChange: PropTypes.Requireable<(...args: any[]) => any>;
+        uiSchema: PropTypes.Requireable<object>;
+        informalTaxonGroups: PropTypes.Requireable<string>;
+        onInformalTaxonGroupSelected: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        allowNonsuggestedValue: boolean;
+        suggestionReceive: string;
+    };
+    constructor(props: any);
+    isValueSuggested: (props: any) => any;
+    wrapperRef: React.RefObject<any>;
+    apiClient: any;
+    mounted: boolean | undefined;
+    keyFunctions: {
+        autosuggestToggle: () => boolean;
+    };
+    triggerConvert: (props: any) => void;
+    getSuggestionValue: (suggestion: any) => any;
+    renderSuggestion: (suggestion: any) => JSX.Element;
+    selectSuggestion: (suggestion: any) => void;
+    selectUnsuggested: (value: any) => void;
+    onSuggestionSelected: (suggestion: any) => void;
+    onUnsuggestedSelected: (inputValue: any) => void;
+    findExactMatch: (suggestions: any, inputValue?: string) => any;
+    findTheOnlyOneMatch: (suggestions: any) => any;
+    findNonMatching: (suggestions: any) => any;
+    onInputChange: (e: any, reason: any, callback: any) => void;
+    onSuggestionsFetchRequested: ({ value }: {
+        value: any;
+    }, debounce?: boolean) => void;
+    promiseTimestamp: number | undefined;
+    timeout: any;
+    onFocus: (e: any) => void;
+    onBlur: (e: any) => void;
+    _valueForBlurAndFetch: any;
+    afterBlurAndFetch: (suggestions: any, callback: any) => void;
+    setRef: (elem: any) => void;
+    autosuggestRef: any;
+    onInformalTaxonGroupsOpened: (open: any) => void;
+    onInformalTaxonGroupSelected: (id: any) => void;
+    onInformalTaxonGroupHide: () => void;
+    onToggle: () => void;
+    isSuggested: () => any;
+    renderInput: (inputProps: any) => JSX.Element;
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";