@luomus/laji-form 15.1.5 → 15.1.7

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

@@ -0,0 +1,37 @@
+export default class CheckboxWidget 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<{
+                allowUndefined: PropTypes.Requireable<boolean>;
+                showUndefined: PropTypes.Requireable<boolean>;
+                invert: PropTypes.Requireable<boolean>;
+                trueLabel: PropTypes.Requireable<string>;
+                falseLabel: PropTypes.Requireable<string>;
+                unknownLabel: PropTypes.Requireable<string>;
+            }>>;
+        }>>;
+        schema: PropTypes.Requireable<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        value: PropTypes.Requireable<boolean>;
+    };
+    constructor(props: any);
+    trueRef: React.RefObject<any>;
+    falseRef: React.RefObject<any>;
+    undefinedRef: React.RefObject<any>;
+    groupRef: React.RefObject<any>;
+    rmInputTabIndices: () => void;
+    onChange: (value: any) => void;
+    onButtonGroupChange: (value: any) => void;
+    getOptions: (props: any) => any;
+    getToggleMode: (props: any) => boolean;
+    onGroupKeyDown: any;
+    onTrueKeyDown: any;
+    onFalseKeyDown: any;
+    onUndefinedKeyDown: any;
+    toggle: (e: any) => void;
+    formatValue(value: any, options: any, props: any): any;
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";

package/lib/components/widgets/CheckboxWidget.js

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_dom_1 = require("react-dom");
+const PropTypes = require("prop-types");
+const utils_1 = require("../../utils");
+const ReactContext_1 = require("../../ReactContext");
+class CheckboxWidget extends React.Component {
+    constructor(props) {
+        super(props);
+        this.rmInputTabIndices = () => {
+            [this.trueRef, this.falseRef, this.undefinedRef].forEach(node => {
+                const domNode = react_dom_1.findDOMNode(node.current);
+                if (!domNode) {
+                    return;
+                }
+                const input = domNode.getElementsByTagName("input")[0];
+                if (!input) {
+                    return;
+                }
+                input.setAttribute("tabindex", -1);
+            });
+        };
+        this.onChange = (value) => {
+            if (value !== undefined && this.getOptions(this.props).invert) {
+                value = !value;
+            }
+            this.props.onChange(value);
+        };
+        this.onButtonGroupChange = (value) => {
+            if (value === "undefined") {
+                value = undefined;
+            }
+            this.onChange(value);
+        };
+        this.getOptions = (props) => {
+            const { Yes, No, Unknown } = props.registry.formContext.translations;
+            return Object.assign({ allowUndefined: true, showUndefined: true, invert: false, trueLabel: Yes, falseLabel: No, unknownLabel: Unknown, required: this.props.required }, utils_1.getUiOptions(props));
+        };
+        this.getToggleMode = (props) => {
+            const { allowUndefined, showUndefined, falseLabel, trueLabel } = this.getOptions(props);
+            const displayUndefined = (allowUndefined && showUndefined);
+            const { Yes, No } = props.registry.formContext.translations;
+            return !displayUndefined && (trueLabel === Yes && falseLabel === No);
+        };
+        this.onGroupKeyDown = this.props.formContext.utils.keyboardClick((e) => {
+            this.getToggleMode(this.props) && this.toggle(e);
+        });
+        this.onTrueKeyDown = this.props.formContext.utils.keyboardClick(() => {
+            if (this.props.disabled || this.props.readonly) {
+                return;
+            }
+            this.onChange(true);
+        });
+        this.onFalseKeyDown = this.props.formContext.utils.keyboardClick(() => {
+            if (this.props.disabled || this.props.readonly) {
+                return;
+            }
+            this.onChange(false);
+        });
+        this.onUndefinedKeyDown = this.props.formContext.utils.keyboardClick(() => {
+            this.onChange(undefined);
+        });
+        this.toggle = (e) => {
+            if (this.props.disabled || this.props.readonly) {
+                return;
+            }
+            const nodes = [this.trueRef, this.falseRef, this.groupRef].map(r => react_dom_1.findDOMNode(r.current));
+            if (!nodes.includes(e.target)) {
+                return;
+            }
+            e.preventDefault();
+            this.props.onChange(!this.props.value);
+        };
+        this.trueRef = React.createRef();
+        this.falseRef = React.createRef();
+        this.undefinedRef = React.createRef();
+        this.groupRef = React.createRef();
+    }
+    componentDidMount() {
+        this.rmInputTabIndices();
+    }
+    componentDidUpdate() {
+        this.rmInputTabIndices();
+    }
+    render() {
+        const { value, disabled, readonly, label, id } = this.props;
+        const options = this.getOptions(this.props);
+        const { allowUndefined, showUndefined, invert, trueLabel, falseLabel, unknownLabel, required, label: uiOptionsLabel } = options;
+        const hasLabel = !utils_1.isEmptyString(label) && uiOptionsLabel !== false;
+        // "undefined" for silencing ToggleButton warning.
+        const _value = value === undefined
+            ? "undefined"
+            : invert
+                ? !value
+                : value;
+        const { ButtonToolbar, ToggleButton, ToggleButtonGroup } = this.context.theme;
+        const displayUndefined = (allowUndefined && showUndefined);
+        const toggleMode = this.getToggleMode(this.props);
+        const _disabled = disabled || readonly;
+        const commonProps = {
+            disabled: _disabled,
+            tabIndex: (toggleMode || _disabled) ? undefined : 0
+        };
+        const tabTargetClass = "laji-form-checkbox-widget-tab-target";
+        const checkbox = (React.createElement(ButtonToolbar, { className: utils_1.classNames(toggleMode && "desktop-layout") },
+            React.createElement(ToggleButtonGroup, Object.assign({ ref: this.groupRef, type: "radio", value: [_value], name: this.props.id, onChange: this.onButtonGroupChange, onKeyDown: this.onGroupKeyDown, className: utils_1.classNames(toggleMode && tabTargetClass) }, commonProps, { tabIndex: (toggleMode && !_disabled) ? 0 : undefined }),
+                React.createElement(ToggleButton, Object.assign({ id: `${id}-true`, ref: this.trueRef, value: true, onClick: toggleMode ? this.toggle : undefined, className: utils_1.classNames(toggleMode && _value === false && "laji-form-hide-btn-label", !toggleMode && tabTargetClass), onKeyDown: this.onTrueKeyDown }, commonProps), trueLabel),
+                React.createElement(ToggleButton, Object.assign({ id: `${id}-false`, ref: this.falseRef, value: false, onClick: toggleMode ? this.toggle : undefined, className: utils_1.classNames(toggleMode && _value === true && "laji-form-hide-btn-label"), onKeyDown: this.onFalseKeyDown }, commonProps), falseLabel),
+                (displayUndefined ? React.createElement(ToggleButton, Object.assign({ id: `${id}-undefined`, ref: this.undefinedRef, value: "undefined" }, commonProps, { onKeyDown: this.onUndefinedKeyDown }), unknownLabel) : null))));
+        const { Label } = this.props.formContext;
+        return !hasLabel ? checkbox : (React.createElement(Label, { label: label, required: required, uiSchema: options, contextId: this.props.formContext.contextId }, checkbox));
+    }
+    formatValue(value, options, props) {
+        return value === undefined
+            ? ""
+            : value === true
+                ? props.formContext.translations.Yes
+                : props.formContext.translations.No;
+    }
+}
+exports.default = CheckboxWidget;
+CheckboxWidget.contextType = ReactContext_1.default;
+CheckboxWidget.propTypes = {
+    uiSchema: PropTypes.shape({
+        "ui:options": PropTypes.shape({
+            allowUndefined: PropTypes.bool,
+            showUndefined: PropTypes.bool,
+            invert: PropTypes.bool,
+            trueLabel: PropTypes.string,
+            falseLabel: PropTypes.string,
+            unknownLabel: PropTypes.string
+        })
+    }),
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["boolean"])
+    }),
+    value: PropTypes.bool
+};

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

@@ -0,0 +1,62 @@
+export const YEAR_MATCH: RegExp;
+export default class DateTimeWidget 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<{
+                showButtons: PropTypes.Requireable<boolean | PropTypes.InferProps<{
+                    today: PropTypes.Requireable<boolean>;
+                    yesterday: PropTypes.Requireable<boolean>;
+                    same: PropTypes.Requireable<boolean | PropTypes.InferProps<{
+                        path: PropTypes.Requireable<string>;
+                    }>>;
+                }>>;
+                showTimeList: PropTypes.Requireable<boolean>;
+                allowOnlyYear: PropTypes.Requireable<boolean>;
+                dateFormat: PropTypes.Requireable<string>;
+            }>>;
+        }>>;
+        schema: PropTypes.Requireable<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        value: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        type: string;
+        readonly: boolean;
+        disabled: boolean;
+        required: boolean;
+        calendar: boolean;
+        time: boolean;
+    };
+    constructor(props: any);
+    focus: () => void;
+    getStateFromProps(props: any): {
+        dateFormat: any;
+        timeFormat: string;
+        format: string;
+        inputFormat: any;
+        placeholder: string;
+    };
+    parse: (value: any) => any;
+    timeWritten: any;
+    onlyYearWritten: any;
+    onChange: (value: any) => void;
+    onToggle: (p: any) => void;
+    toggle: any;
+    setRef: (elem: any) => void;
+    dateTimePickerRef: any;
+    setContainerRef: (elem: any) => void;
+    containerRef: any;
+    onTextWidgetFocus: () => void;
+    onBlur: () => void;
+    onDateTimePickerChange: (value: any) => void;
+    renderButtons(showButtons: any): JSX.Element[];
+    getDateWithCurrentTime: (date: any) => any;
+    setToday: () => void;
+    setYesterday: () => void;
+    setSameAsToday: () => void;
+    formatValue(value: any, options: any, props: any): any;
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";

package/lib/components/widgets/DateTimeWidget.js

@@ -0,0 +1,251 @@
+"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 DateTimeWidget_1;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YEAR_MATCH = void 0;
+const React = require("react");
+const react_dom_1 = require("react-dom");
+const PropTypes = require("prop-types");
+const DateTimePicker = require("react-widgets/lib/DateTimePicker");
+const moment = require("moment");
+const momentLocalizer = require("react-widgets-moment");
+const localizers_1 = require("react-widgets/lib/util/localizers");
+const utils_1 = require("../../utils");
+const BaseComponent_1 = require("../BaseComponent");
+const ReactContext_1 = require("../../ReactContext");
+const DATE_TIME_SEPARATOR = ", ";
+exports.YEAR_MATCH = /^\d{4}$/;
+let DateTimeWidget = DateTimeWidget_1 = class DateTimeWidget extends React.Component {
+    constructor(props) {
+        super(props);
+        this.focus = () => {
+            this.dateTimePickerRef.focus();
+        };
+        this.parse = (value) => {
+            if (!value)
+                value = "";
+            const { allowOnlyYear } = utils_1.getUiOptions(this.props);
+            const hasTime = value.includes(DATE_TIME_SEPARATOR) || this.state.time && !this.state.calendar;
+            const onlyYear = allowOnlyYear && this.state.calendar && value.match(exports.YEAR_MATCH);
+            let momentValue = moment(value, onlyYear ? "YYYY" : this.state.format);
+            if (!momentValue.isValid()) {
+                return "";
+            }
+            const isoValue = onlyYear
+                ? value
+                : hasTime
+                    ? momentValue.toISOString()
+                    : momentValue.format("YYYY-MM-DD");
+            this.timeWritten = hasTime;
+            this.onlyYearWritten = onlyYear;
+            return onlyYear ? isoValue : moment(isoValue).toDate();
+        };
+        this.onChange = (value) => {
+            this.props.onChange(value, !!"force");
+        };
+        this.onToggle = p => {
+            if (p !== false)
+                this.toggle = p; //"time" or "date"
+        };
+        this.setRef = (elem) => {
+            this.dateTimePickerRef = elem;
+        };
+        this.setContainerRef = (elem) => {
+            this.containerRef = elem;
+        };
+        this.onTextWidgetFocus = () => {
+            this.setState({ textInputFocused: true }, this.focus);
+        };
+        this.onBlur = () => {
+            !utils_1.isDescendant(react_dom_1.findDOMNode(this.containerRef), document.activeElement) && this.setState({ textInputFocused: false });
+        };
+        this.onDateTimePickerChange = (value) => {
+            const momentValue = moment(value);
+            let formattedValue = momentValue.format("YYYY-MM-DDTHH:mm");
+            if (this.onlyYearWritten) {
+                formattedValue = value;
+            }
+            else if (value !== null && !momentValue.isValid()) {
+                formattedValue = this.props.value;
+            }
+            else if ((!this.toggle && !this.timeWritten) ||
+                (this.toggle === "date" && (!this.props.value || !this.props.value.includes("T")))) {
+                formattedValue = momentValue.format("YYYY-MM-DD");
+            }
+            this.onChange(!value ? undefined : formattedValue);
+            this.toggle = undefined;
+            this.timeWritten = false;
+            this.onlyYearWritten = false;
+        };
+        this.getDateWithCurrentTime = (date) => {
+            const { value } = this.props;
+            const time = value !== undefined && value !== null ? value.split("T")[1] : false;
+            return time ? `${date}T${time}` : date;
+        };
+        this.setToday = () => {
+            this.onChange(this.getDateWithCurrentTime(moment().format("YYYY-MM-DD")));
+        };
+        this.setYesterday = () => {
+            this.onChange(this.getDateWithCurrentTime(moment().subtract(1, "d").format("YYYY-MM-DD")));
+        };
+        this.setSameAsToday = () => {
+            const formData = this.props.formContext.services.rootInstance.getFormData();
+            const sameOptions = utils_1.getUiOptions(this.props).showButtons.same || {};
+            const { path = "/gatheringEvent/dateBegin" } = sameOptions;
+            const today = utils_1.parseJSONPointer(formData, path, !!"safely");
+            if (today) {
+                this.onChange(today);
+            }
+        };
+        momentLocalizer(moment);
+    }
+    componentDidMount() {
+        this.props.formContext.services.focus.addFocusHandler(this.props.id, this.focus);
+    }
+    componentWillUnmount() {
+        this.props.formContext.services.focus.removeFocusHandler(this.props.id, this.focus);
+    }
+    getStateFromProps(props) {
+        const { lang, translations } = props.formContext;
+        const formatLang = lang === "sv" ? "fi" : lang === "en" ? "en-gb" : lang;
+        let localeFormats = moment().locale(formatLang)._locale._longDateFormat;
+        let { allowOnlyYear, dateFormat = "" } = utils_1.getUiOptions(props);
+        let timeFormat = "";
+        let placeholder = "";
+        if (props.calendar) {
+            if (!dateFormat)
+                dateFormat = localeFormats.L;
+            placeholder += translations[dateFormat.toLowerCase()] || dateFormat;
+        }
+        if (props.time) {
+            timeFormat = localeFormats.LT;
+            if (placeholder)
+                placeholder += DATE_TIME_SEPARATOR;
+            placeholder += translations[timeFormat.toLowerCase()] || timeFormat;
+        }
+        const format = `${dateFormat}${dateFormat ? DATE_TIME_SEPARATOR : ""}${timeFormat}`;
+        const splitted = props.value && props.value.split("T");
+        const hasTime = props.value && splitted.length > 1 && splitted[1] !== "";
+        let inputFormat = allowOnlyYear && props.value && props.value.match(exports.YEAR_MATCH)
+            ? "YYYY"
+            : hasTime
+                ? format
+                : dateFormat;
+        const state = {
+            dateFormat,
+            timeFormat,
+            format,
+            inputFormat,
+            placeholder
+        };
+        ["value", "disabled", "time", "calendar"].forEach(prop => {
+            if (prop in props) {
+                state[prop] = props[prop];
+                if (prop === "calendar") {
+                    state["date"] = props[prop];
+                }
+            }
+        });
+        return state;
+    }
+    render() {
+        const { value, readonly, disabled } = this.props;
+        const { translations, lang } = this.props.formContext;
+        const momentValue = moment(value);
+        if (!this.state.textInputFocused && value !== null && !momentValue.isValid()) {
+            const { TextWidget } = this.props.registry.widgets;
+            return React.createElement(TextWidget, Object.assign({}, this.props, { onFocus: this.onTextWidgetFocus }));
+        }
+        const options = utils_1.getUiOptions(this.props);
+        const showTimeList = options.showTimeList !== undefined ? options.showTimeList : true;
+        const culture = lang === "en" ? "en-gb" : lang;
+        const datePicker = (React.createElement(DateTimePicker, { ref: this.setRef, date: this.state.calendar, time: this.state.time && showTimeList, format: this.state.inputFormat, timeFormat: this.state.timeFormat, placeholder: this.state.placeholder, onToggle: this.onToggle, onChange: this.onDateTimePickerChange, value: value && momentValue.isValid() ? momentValue.toDate() : null, parse: this.parse, disabled: readonly || disabled, culture: culture, messages: {
+                calendarButton: translations.ChooseDate,
+                timeButton: translations.ChooseTime
+            }, onBlur: this.onBlur }));
+        const { showButtons } = options;
+        const { ButtonGroup } = this.context.theme;
+        return showButtons ? (React.createElement("div", { className: "date-widget", ref: this.setContainerRef },
+            React.createElement("div", { className: "date-picker" }, datePicker),
+            React.createElement(ButtonGroup, null, this.renderButtons(showButtons)))) : React.createElement("div", { className: "date-widget" }, datePicker);
+    }
+    renderButtons(showButtons) {
+        const { readonly, disabled } = this.props;
+        const { translations } = this.props.formContext;
+        const buttonDefinitions = {
+            today: {
+                className: "today",
+                label: translations.Today,
+                onClick: this.setToday
+            },
+            yesterday: {
+                className: "yesterday",
+                label: translations.Yesterday,
+                onClick: this.setYesterday
+            },
+            same: {
+                className: "same",
+                label: translations.Same,
+                onClick: this.setSameAsToday
+            }
+        };
+        const options = showButtons === true
+            ? { today: true, yesterday: true }
+            : showButtons;
+        const { Button } = this.context.theme;
+        return Object.keys(options)
+            .filter(name => options[name])
+            .map(name => buttonDefinitions[name])
+            .map(({ className, onClick, label }) => (React.createElement(Button, { key: className, className: className, onClick: onClick, disabled: readonly || disabled }, label)));
+    }
+    formatValue(value, options, props) {
+        if (!value)
+            return value;
+        const { inputFormat: format } = DateTimeWidget_1.prototype.getStateFromProps(Object.assign(Object.assign({}, props), { date: true, time: true, value }));
+        return localizers_1.date.format(value, format, props.formContext.lang);
+    }
+};
+DateTimeWidget.contextType = ReactContext_1.default;
+DateTimeWidget.propTypes = {
+    uiSchema: PropTypes.shape({
+        "ui:options": PropTypes.shape({
+            showButtons: PropTypes.oneOfType([
+                PropTypes.bool,
+                PropTypes.shape({
+                    today: PropTypes.bool,
+                    yesterday: PropTypes.bool,
+                    same: PropTypes.oneOfType([
+                        PropTypes.bool,
+                        PropTypes.shape({
+                            path: PropTypes.string
+                        })
+                    ])
+                })
+            ]),
+            showTimeList: PropTypes.bool,
+            allowOnlyYear: PropTypes.bool,
+            dateFormat: PropTypes.string
+        })
+    }),
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["string"])
+    }),
+    value: PropTypes.string
+};
+DateTimeWidget.defaultProps = {
+    type: "text",
+    readonly: false,
+    disabled: false,
+    required: false,
+    calendar: true,
+    time: true
+};
+DateTimeWidget = DateTimeWidget_1 = __decorate([
+    BaseComponent_1.default
+], DateTimeWidget);
+exports.default = DateTimeWidget;

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

@@ -0,0 +1,23 @@
+export default DateWidget;
+declare function DateWidget(props: any): JSX.Element;
+declare namespace DateWidget {
+    namespace propTypes {
+        const uiSchema: PropTypes.Requireable<PropTypes.InferProps<{
+            "ui:options": PropTypes.Requireable<PropTypes.InferProps<{
+                showButtons: PropTypes.Requireable<boolean | PropTypes.InferProps<{
+                    today: PropTypes.Requireable<boolean>;
+                    yesterday: PropTypes.Requireable<boolean>;
+                    same: PropTypes.Requireable<boolean | PropTypes.InferProps<{
+                        path: PropTypes.Requireable<string>;
+                    }>>;
+                }>>;
+                allowOnlyYear: PropTypes.Requireable<boolean>;
+            }>>;
+        }>>;
+        const schema: PropTypes.Requireable<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        const value: PropTypes.Requireable<string>;
+    }
+}
+import * as PropTypes from "prop-types";

package/lib/components/widgets/DateWidget.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const PropTypes = require("prop-types");
+const moment = require("moment");
+const DateTimeWidget_1 = require("./DateTimeWidget");
+const utils_1 = require("../../utils");
+const format = (allowOnlyYear, value) => moment(value).format(allowOnlyYear && value.match(DateTimeWidget_1.YEAR_MATCH)
+    ? "YYYY"
+    : "YYYY-MM-DD");
+const DateWidget = (props) => {
+    const { onChange } = props;
+    const { allowOnlyYear } = utils_1.getUiOptions(props);
+    const _onChange = React.useCallback((value) => onChange(utils_1.isEmptyString(value) ? undefined : format(allowOnlyYear, value)), [allowOnlyYear, onChange]);
+    return (React.createElement(DateTimeWidget_1.default, Object.assign({}, props, { onChange: _onChange, time: false, value: props.value ? format(allowOnlyYear, props.value) : null })));
+};
+DateWidget.propTypes = {
+    uiSchema: PropTypes.shape({
+        "ui:options": PropTypes.shape({
+            showButtons: PropTypes.oneOfType([
+                PropTypes.bool,
+                PropTypes.shape({
+                    today: PropTypes.bool,
+                    yesterday: PropTypes.bool,
+                    same: PropTypes.oneOfType([
+                        PropTypes.bool,
+                        PropTypes.shape({
+                            path: PropTypes.string
+                        })
+                    ])
+                })
+            ]),
+            allowOnlyYear: PropTypes.bool
+        })
+    }),
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["string"])
+    }),
+    value: PropTypes.string
+};
+exports.default = DateWidget;

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

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

package/lib/components/widgets/HiddenWidget.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const PropTypes = require("prop-types");
+function HiddenWidget({ id, value }) {
+    return (React.createElement("input", { type: "hidden", id: id, value: typeof value === "undefined" ? "" : value }));
+}
+HiddenWidget.propTypes = {
+    id: PropTypes.string.isRequired,
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+        PropTypes.bool,
+    ]),
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["string", "number", "boolean", "integer"])
+    }).isRequired
+};
+exports.default = HiddenWidget;

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

@@ -0,0 +1,14 @@
+export default class ImageSelectWidget extends React.Component<any, any, any> {
+    static propTypes: {
+        options: PropTypes.Validator<object>;
+        schema: PropTypes.Requireable<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        value: PropTypes.Requireable<string>;
+    };
+    constructor(props: any);
+    _context: Record<string, unknown>;
+    renderImg: (enumName: any, fallback: any) => any;
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";

package/lib/components/widgets/ImageSelectWidget.js

@@ -0,0 +1,57 @@
+"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 Context_1 = require("../../Context");
+const utils_1 = require("../../utils");
+const react_inlinesvg_1 = require("react-inlinesvg");
+const SelectWidget_1 = require("./SelectWidget");
+const BaseComponent_1 = require("../BaseComponent");
+let ImageSelectWidget = class ImageSelectWidget extends React.Component {
+    constructor(props) {
+        super(props);
+        this.renderImg = (enumName, fallback) => {
+            const imgName = utils_1.getUiOptions(this.props).images[enumName];
+            if (imgName === undefined)
+                return fallback;
+            let path = this._context[enumName] || {};
+            try {
+                path.svg = `https://cdn.laji.fi/images/${imgName}.svg`;
+                path.png = `https://cdn.laji.fi/images/${imgName}.png`;
+            }
+            finally {
+                this._context[enumName] = path;
+                return React.createElement("span", { className: "select-icon" },
+                    React.createElement(react_inlinesvg_1.default, { key: enumName, src: path.svg, cacheGetRequests: true },
+                        React.createElement("img", { src: path.png })));
+            }
+        };
+        this._context = Context_1.default("IMAGES");
+    }
+    render() {
+        return (React.createElement(SelectWidget_1.default, Object.assign({}, this.props, { selectProps: {
+                renderValue: item => this.renderImg(item.value, item.label),
+                renderOption: item => React.createElement("div", null,
+                    this.renderImg(item.value, item.label),
+                    " ",
+                    React.createElement("span", null, item.label))
+            } })));
+    }
+};
+ImageSelectWidget.propTypes = {
+    options: PropTypes.object.isRequired,
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["string"])
+    }),
+    value: PropTypes.string
+};
+ImageSelectWidget = __decorate([
+    BaseComponent_1.default
+], ImageSelectWidget);
+exports.default = ImageSelectWidget;