@luomus/laji-form 15.1.4 → 15.1.6

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

@@ -0,0 +1,43 @@
+export function getInformalGroups(apiClient: any): any;
+export default class InformalTaxonGroupChooserWidget extends React.Component<any, any, any> {
+    static contextType: React.Context<import("../../ReactContext").ContextProps>;
+    static propTypes: {
+        schema: PropTypes.Requireable<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        value: PropTypes.Requireable<string>;
+    };
+    constructor(props: any);
+    mounted: boolean | undefined;
+    getDefaultOptions: (props: any) => {
+        button: any;
+        rootOnly: any;
+        grid: any;
+    };
+    onSelected: (id: any) => void;
+    show: () => void;
+    hide: () => void;
+    onClear: (e: any) => void;
+}
+export class InformalTaxonGroupChooser extends React.Component<any, any, any> {
+    static contextType: React.Context<import("../../ReactContext").ContextProps>;
+    static propTypes: {
+        onSelected: PropTypes.Validator<(...args: any[]) => any>;
+        formContext: PropTypes.Validator<object>;
+    };
+    constructor(props: any);
+    mounted: boolean | undefined;
+    onSelected: (id: any) => () => void;
+    onSubgroupSelected: (id: any) => () => void;
+    Container: ({ children }: {
+        children: any;
+    }) => JSX.Element;
+    getButtonGroup: (id: any) => JSX.Element;
+    getLabel: (id: any) => JSX.Element;
+    GroupsContainer: ({ children }: {
+        children: any;
+    }) => JSX.Element;
+    Item: (id: any) => JSX.Element;
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";

package/lib/components/widgets/InformalTaxonGroupChooserWidget.js

@@ -0,0 +1,237 @@
+"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 });
+exports.InformalTaxonGroupChooser = exports.getInformalGroups = void 0;
+const React = require("react");
+const PropTypes = require("prop-types");
+const components_1 = require("../components");
+const Context_1 = require("../../Context");
+const ReactContext_1 = require("../../ReactContext");
+const Spinner = require("react-spinner");
+const BaseComponent_1 = require("../BaseComponent");
+const utils_1 = require("../../utils");
+let InformalTaxonGroupChooserWidget = class InformalTaxonGroupChooserWidget extends React.Component {
+    constructor(props) {
+        super(props);
+        this.getDefaultOptions = (props) => {
+            const { button = true, rootOnly = false, grid = { lg: 1, md: 2, sm: 3, xs: 12 } } = utils_1.getUiOptions(props);
+            return { button, rootOnly, grid };
+        };
+        this.onSelected = (id) => {
+            this.props.onChange(id);
+            const { button } = this.getDefaultOptions(this.props);
+            if (button)
+                this.hide();
+            if (this.state.informalTaxonGroupsById && id)
+                this.setState({ informalTaxonGroup: this.state.informalTaxonGroupsById[id] });
+        };
+        this.show = () => {
+            this.setState({ show: true });
+        };
+        this.hide = () => {
+            this.setState({ show: false });
+        };
+        this.onClear = (e) => {
+            e.stopPropagation();
+            this.onSelected(undefined);
+        };
+        this.state = {};
+    }
+    componentDidMount() {
+        this.mounted = true;
+        getInformalGroups(this.props.formContext.apiClient).then(state => {
+            if (!this.mounted)
+                return;
+            this.setState(state);
+        });
+        this.UNSAFE_componentWillReceiveProps(this.props);
+    }
+    UNSAFE_componentWillReceiveProps(props) {
+        if (props.value !== this.state.informalTaxonGroup) {
+            if (!props.value)
+                this.setState({ name: undefined });
+            getInformalGroups(props.formContext.apiClient).then(({ informalTaxonGroupsById }) => {
+                if (!this.mounted)
+                    return;
+                this.setState({ informalTaxonGroup: informalTaxonGroupsById[this.props.value] });
+            });
+        }
+    }
+    componentWillUnmount() {
+        this.mounted = false;
+    }
+    render() {
+        let imageID = this.props.value;
+        const { disabled, readonly } = this.props;
+        const { button, rootOnly, grid } = this.getDefaultOptions(this.props);
+        const { informalTaxonGroupsById = {} } = this.state;
+        if (informalTaxonGroupsById[this.props.value] && informalTaxonGroupsById[this.props.value].parent) {
+            imageID = informalTaxonGroupsById[this.props.value].parent.id;
+        }
+        const InformalTaxonGroupChooserComponent = (React.createElement(InformalTaxonGroupChooser, { modal: button, onHide: this.hide, activeId: this.props.value, onSelected: this.onSelected, formContext: this.props.formContext, lang: this.props.formContext.lang, rootOnly: rootOnly, grid: grid }));
+        const { Button } = this.context.theme;
+        if (button) {
+            const title = !this.props.value
+                ? React.createElement("div", { className: "informal-group-chooser-button-content" },
+                    React.createElement("span", null, this.props.formContext.translations.PickInformalTaxonGroup))
+                : (React.createElement("div", { className: "informal-group-chooser-button-content" },
+                    React.createElement("div", { className: `informal-group-image ${imageID}` }),
+                    this.state.informalTaxonGroup ? React.createElement("span", null, this.state.informalTaxonGroup.name) : React.createElement(Spinner, null),
+                    React.createElement("div", { className: "close", onClick: this.onClear }, "\u00D7")));
+            return (React.createElement(components_1.TooltipComponent, { tooltip: this.state.informalTaxonGroup && this.state.informalTaxonGroup.name },
+                React.createElement("div", { className: "informal-taxon-groups-list" },
+                    React.createElement(Button, { onClick: this.show, disabled: disabled || readonly }, title),
+                    this.state.show && InformalTaxonGroupChooserComponent)));
+        }
+        else {
+            return InformalTaxonGroupChooserComponent;
+        }
+    }
+};
+InformalTaxonGroupChooserWidget.contextType = ReactContext_1.default;
+InformalTaxonGroupChooserWidget.propTypes = {
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["string"])
+    }),
+    value: PropTypes.string
+};
+InformalTaxonGroupChooserWidget = __decorate([
+    BaseComponent_1.default
+], InformalTaxonGroupChooserWidget);
+exports.default = InformalTaxonGroupChooserWidget;
+function walk(allGroups, _group, parent) {
+    _group.forEach(group => {
+        allGroups[group.id] = group;
+        if (parent)
+            group.parent = parent;
+        if (group.hasSubGroup) {
+            allGroups = walk(allGroups, group.hasSubGroup, parent || group);
+        }
+    });
+    return allGroups;
+}
+const mapGroupsById = _groups => _groups.reduce((groups, group) => {
+    groups[group.id] = group;
+    return groups;
+}, {});
+let informalTaxonGroups, informalTaxonGroupsById;
+function getInformalGroups(apiClient) {
+    if (informalTaxonGroups) {
+        return Promise.resolve({ informalTaxonGroups, informalTaxonGroupsById });
+    }
+    return apiClient.fetchCached("/informal-taxon-groups/tree").then(response => {
+        // Contains the current taxon group.
+        const informalTaxonGroups = mapGroupsById(response.results);
+        // Contains all groups in flat object.
+        const informalTaxonGroupsById = walk({}, response.results);
+        Context_1.default().informalTaxonGroupsById = informalTaxonGroupsById;
+        return Promise.resolve({ informalTaxonGroups, informalTaxonGroupsById });
+    });
+}
+exports.getInformalGroups = getInformalGroups;
+class InformalTaxonGroupChooser extends React.Component {
+    constructor(props) {
+        super(props);
+        this.onSelected = (id) => () => {
+            this.props.onSelected(id);
+        };
+        this.onSubgroupSelected = (id) => () => {
+            let path;
+            const existingIdx = this.state.path.indexOf(id);
+            path = (existingIdx >= 0)
+                ? this.state.path.slice(0, existingIdx + 1)
+                : [...this.state.path, id];
+            this.setState({
+                informalTaxonGroups: id
+                    ? mapGroupsById(this.state.informalTaxonGroupsById[id].hasSubGroup)
+                    : this.state.root,
+                path
+            });
+        };
+        this.Container = ({ children }) => {
+            const { modal, onHide } = this.props;
+            const { translations } = this.props.formContext;
+            const { Modal } = this.context.theme;
+            return modal ? (React.createElement(Modal, { show: true, onHide: onHide, dialogClassName: "laji-form informal-taxon-group-chooser" },
+                React.createElement(Modal.Header, { closeButton: true },
+                    React.createElement(Modal.Title, null, translations.PickInformalTaxonGroup)),
+                React.createElement(Modal.Body, null, children))) : (React.createElement("div", { className: "informal-taxon-group-chooser" }, children));
+        };
+        this.getButtonGroup = (id) => {
+            const { translations } = this.props.formContext;
+            const { informalTaxonGroupsById } = this.state;
+            const { Button, ButtonGroup } = this.context.theme;
+            return (React.createElement(ButtonGroup, null,
+                informalTaxonGroupsById[id].hasSubGroup && React.createElement(Button, { key: "subgroups", onClick: this.onSubgroupSelected(id) }, translations.ShowSubgroups),
+                React.createElement(Button, { key: "select", onClick: this.onSelected(id) }, translations.Select)));
+        };
+        this.getLabel = (id) => {
+            const { path, informalTaxonGroupsById } = this.state;
+            const name = informalTaxonGroupsById[id].name;
+            return path.length <= 1 ? React.createElement("h5", null, name) : React.createElement("span", null, name);
+        };
+        this.GroupsContainer = ({ children }) => {
+            const { rootOnly } = this.props;
+            const { Row } = this.context.theme;
+            const { ListGroup } = this.context.theme;
+            return rootOnly ? React.createElement(Row, null, children) : React.createElement(ListGroup, null, children);
+        };
+        this.Item = (id) => {
+            const { path } = this.state;
+            const { rootOnly, grid, activeId } = this.props;
+            const { Panel, Col, ListGroupItem } = this.context.theme;
+            return !rootOnly ? (React.createElement(ListGroupItem, { key: id, className: path.length > 1 ? "not-root" : "" },
+                path.length === 1 ? React.createElement("div", { className: `informal-group-image ${id}` }) : null,
+                this.getLabel(id),
+                this.getButtonGroup(id))) : (React.createElement(Col, Object.assign({ key: id }, grid),
+                React.createElement(Panel, { onClick: this.onSelected(id), variant: id === activeId ? "primary" : undefined },
+                    React.createElement(Panel.Heading, null, this.getLabel(id)),
+                    React.createElement(Panel.Body, null,
+                        React.createElement("div", { className: `informal-group-image ${id}` })))));
+        };
+        this.state = { path: [undefined] };
+    }
+    componentDidMount() {
+        this.mounted = true;
+        getInformalGroups(this.props.formContext.apiClient).then(state => {
+            if (!this.mounted)
+                return;
+            this.setState(Object.assign(Object.assign({}, state), { root: state.informalTaxonGroups }));
+        });
+    }
+    UNSAFE_componentWillReceiveProps(props) {
+        if (this.props.lang === props.lang)
+            return;
+        getInformalGroups(this.props.formContext.apiClient).then(state => {
+            if (!this.mounted)
+                return;
+            this.setState(Object.assign(Object.assign({}, state), { root: state.informalTaxonGroups }));
+        });
+    }
+    componentWillUnmount() {
+        this.mounted = false;
+    }
+    render() {
+        const { path, informalTaxonGroupsById, informalTaxonGroups } = this.state;
+        const { rootOnly } = this.props;
+        const { translations } = this.props.formContext;
+        const { Container, GroupsContainer, Item } = this;
+        const { Breadcrumb } = this.context.theme;
+        return (React.createElement(Container, null,
+            !rootOnly && (React.createElement(Breadcrumb, null, path.map(id => React.createElement(Breadcrumb.Item, { key: id === undefined ? "root" : id, onClick: this.onSubgroupSelected(id) }, id === undefined ? translations.All : informalTaxonGroupsById[id].name)))),
+            informalTaxonGroups
+                ? React.createElement(GroupsContainer, null, Object.keys(informalTaxonGroups).map(Item))
+                : React.createElement(Spinner, null)));
+    }
+}
+exports.InformalTaxonGroupChooser = InformalTaxonGroupChooser;
+InformalTaxonGroupChooser.contextType = ReactContext_1.default;
+InformalTaxonGroupChooser.propTypes = {
+    onSelected: PropTypes.func.isRequired,
+    formContext: PropTypes.object.isRequired
+};

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

@@ -0,0 +1,21 @@
+export default class InputGroupWidget extends React.Component<any, any, any> {
+    static contextType: React.Context<import("../../ReactContext").ContextProps>;
+    static propTypes: {
+        uiSchema: PropTypes.Requireable<PropTypes.InferProps<{
+            "ui:options": PropTypes.Requireable<PropTypes.InferProps<{
+                inputGroupText: PropTypes.Requireable<string>;
+                inputType: PropTypes.Requireable<string>;
+                className: PropTypes.Requireable<string>;
+            }>>;
+        }>>;
+        schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        value: PropTypes.Requireable<string>;
+        required: PropTypes.Requireable<boolean>;
+    };
+    constructor(props: any);
+    constructor(props: any, context: any);
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";

package/lib/components/widgets/InputGroupWidget.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const PropTypes = require("prop-types");
+const BaseInputTemplate_1 = require("../templates/BaseInputTemplate");
+const ReactContext_1 = require("../../ReactContext");
+const utils_1 = require("../../utils");
+const TextareaWidget_1 = require("./TextareaWidget");
+class InputGroupWidget extends React.Component {
+    render() {
+        const { InputGroup } = this.context.theme;
+        const { inputGroupText = "", inputType = "basic", className = "" } = utils_1.getUiOptions(this.props);
+        const input = inputType === "textarea" ? React.createElement(TextareaWidget_1.default, Object.assign({}, this.props)) : React.createElement(BaseInputTemplate_1.default, Object.assign({}, this.props));
+        return (React.createElement(InputGroup, { key: inputGroupText, className: utils_1.classNames("input-group-widget", `input-group-${inputType}`, className) },
+            React.createElement(InputGroup.Addon, { className: "input-group-text" },
+                inputGroupText,
+                this.props.required && React.createElement("span", { className: "text-danger" }, "*")),
+            input));
+    }
+}
+exports.default = InputGroupWidget;
+InputGroupWidget.contextType = ReactContext_1.default;
+InputGroupWidget.propTypes = {
+    uiSchema: PropTypes.shape({
+        "ui:options": PropTypes.shape({
+            inputGroupText: PropTypes.string,
+            inputType: PropTypes.oneOf(["basic", "textarea"]),
+            className: PropTypes.string
+        })
+    }),
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["string", "number", "integer"]),
+    }).isRequired,
+    value: PropTypes.string,
+    required: PropTypes.bool
+};

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

@@ -0,0 +1,21 @@
+export default class InputWithDefaultValueButtonWidget extends React.Component<any, any, any> {
+    static contextType: React.Context<import("../../ReactContext").ContextProps>;
+    static propTypes: {
+        uiSchema: PropTypes.Validator<PropTypes.InferProps<{
+            "ui:options": PropTypes.Validator<PropTypes.InferProps<{
+                buttonLabel: PropTypes.Validator<string>;
+                contextFieldForDefaultValue: PropTypes.Requireable<string>;
+                onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            }>>;
+        }>>;
+        schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        value: PropTypes.Requireable<string>;
+    };
+    constructor(props: any);
+    constructor(props: any, context: any);
+    onClick: () => void;
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";

package/lib/components/widgets/InputWithDefaultValueButtonWidget.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const PropTypes = require("prop-types");
+const BaseInputTemplate_1 = require("../templates/BaseInputTemplate");
+const ReactContext_1 = require("../../ReactContext");
+const utils_1 = require("../../utils");
+class InputWithDefaultValueButtonWidget extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.onClick = () => {
+            const { contextFieldForDefaultValue, onClick } = utils_1.getUiOptions(this.props);
+            if (contextFieldForDefaultValue) {
+                const uiSchemaContext = this.props.formContext.uiSchemaContext || {};
+                const defaultValue = uiSchemaContext[contextFieldForDefaultValue];
+                this.props.onChange(defaultValue);
+            }
+            if (onClick) {
+                onClick();
+            }
+        };
+    }
+    render() {
+        const { InputGroup, Button } = this.context.theme;
+        const { buttonLabel } = utils_1.getUiOptions(this.props);
+        const { disabled, readonly } = this.props;
+        return (React.createElement(InputGroup, null,
+            React.createElement(BaseInputTemplate_1.default, Object.assign({}, this.props)),
+            React.createElement(InputGroup.Button, { className: "input-group-button" },
+                React.createElement(Button, { onClick: this.onClick, disabled: disabled || readonly }, buttonLabel))));
+    }
+}
+exports.default = InputWithDefaultValueButtonWidget;
+InputWithDefaultValueButtonWidget.contextType = ReactContext_1.default;
+InputWithDefaultValueButtonWidget.propTypes = {
+    uiSchema: PropTypes.shape({
+        "ui:options": PropTypes.shape({
+            buttonLabel: PropTypes.string.isRequired,
+            contextFieldForDefaultValue: PropTypes.string,
+            onClick: PropTypes.func
+        }).isRequired
+    }).isRequired,
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["string", "number", "integer"]),
+    }).isRequired,
+    value: PropTypes.string
+};

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

@@ -0,0 +1,13 @@
+export default class NumberWidget 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) => any;
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";

package/lib/components/widgets/NumberWidget.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const PropTypes = require("prop-types");
+const BaseInputTemplate_1 = require("../templates/BaseInputTemplate");
+class NumberWidget extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.formatValue = (value) => !isNaN(value) ? value : null;
+    }
+    render() {
+        return React.createElement(BaseInputTemplate_1.default, Object.assign({}, this.props, { formatValue: this.formatValue }));
+    }
+}
+exports.default = NumberWidget;
+NumberWidget.propTypes = {
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["string"])
+    }).isRequired,
+    value: PropTypes.string
+};

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

@@ -0,0 +1,12 @@
+export default PlainTextWidget;
+declare function PlainTextWidget(props: any): JSX.Element;
+declare namespace PlainTextWidget {
+    namespace propTypes {
+        const id: PropTypes.Validator<string>;
+        const value: PropTypes.Requireable<string | number>;
+        const schema: PropTypes.Requireable<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+    }
+}
+import * as PropTypes from "prop-types";

package/lib/components/widgets/PlainTextWidget.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const PropTypes = require("prop-types");
+const utils_1 = require("../../utils");
+function PlainTextWidget(props) {
+    const { id, value } = props;
+    const { strong, "ui:widget": formatterWidget, "ui:options": formatterOptions, centered, tag } = utils_1.getUiOptions(props);
+    const formattedValue = utils_1.formatValue(Object.assign(Object.assign({}, props), { uiSchema: formatterWidget ? { "ui:widget": formatterWidget, options: formatterOptions } : props.uiSchema, schema: props.schema, formData: props.value }));
+    const Tag = tag || "span";
+    return (React.createElement(Tag, { className: `plainText${centered ? " horizontally-centered row-height" : ""}` },
+        strong ? React.createElement("strong", null, formattedValue) : formattedValue,
+        React.createElement("input", { type: "hidden", id: id, value: typeof value === "undefined" ? "" : value })));
+}
+if (process.env.NODE_ENV !== "production") {
+    PlainTextWidget.propTypes = {
+        id: PropTypes.string.isRequired,
+        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        schema: PropTypes.shape({
+            type: PropTypes.oneOf(["string", "number", "integer"])
+        })
+    };
+}
+exports.default = PlainTextWidget;

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

@@ -0,0 +1,52 @@
+export default SelectWidget;
+declare class SelectWidget extends React.Component<any, any, any> {
+    static contextType: React.Context<import("../../ReactContext").ContextProps>;
+    constructor(props: any);
+    _context: Record<string, unknown>;
+    mounted: boolean | undefined;
+    getEnumOptions(props: any): any;
+    getStateFromProps(props: any): {
+        valsToItems: any;
+        enumOptions: any;
+        value: any;
+    };
+    multiSelectOnChange: (values: any) => void;
+    selectOnChange: (item: any) => void;
+    onClick: () => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    onSelect: (item: any) => void;
+    onToggle: () => void;
+    onKeyDown: (e: any) => void;
+    setRef: (elem: any) => void;
+    elemRef: any;
+    getEnum: (val: any) => any;
+}
+declare namespace SelectWidget {
+    namespace defaultProps {
+        const autofocus: boolean;
+    }
+    namespace propTypes {
+        export const schema: PropTypes.Requireable<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        export const id: PropTypes.Validator<string>;
+        export const uiSchema: PropTypes.Requireable<PropTypes.InferProps<{
+            "ui:options": PropTypes.Requireable<PropTypes.InferProps<{
+                enumOptions: PropTypes.Requireable<any[]>;
+                order: PropTypes.Requireable<any[]>;
+                filter: PropTypes.Requireable<any[]>;
+                filterType: PropTypes.Requireable<string>;
+                labels: PropTypes.Requireable<object>;
+            }>>;
+        }>>;
+        export const value: PropTypes.Requireable<string | any[]>;
+        export const required: PropTypes.Requireable<boolean>;
+        export const multiple: PropTypes.Requireable<boolean>;
+        const autofocus_1: PropTypes.Requireable<boolean>;
+        export { autofocus_1 as autofocus };
+        export const onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";