@luomus/laji-form 14.3.6 → 14.3.8

package/dist/styles.css

@@ -2559,7 +2559,8 @@ min-height: 20px;
 .laji-form .col-lg-1, .laji-form .col-lg-10, .laji-form .col-lg-11, .laji-form .col-lg-12, .laji-form .col-lg-2, .laji-form .col-lg-3, .laji-form .col-lg-4, .laji-form .col-lg-5, .laji-form .col-lg-6, .laji-form .col-lg-7, .laji-form .col-lg-8, .laji-form .col-lg-9,
 .laji-form .col-md-1, .laji-form .col-md-10, .laji-form .col-md-11, .laji-form .col-md-12, .laji-form .col-md-2, .laji-form .col-md-3, .laji-form .col-md-4, .laji-form .col-md-5, .laji-form .col-md-6, .laji-form .col-md-7, .laji-form .col-md-8, .laji-form .col-md-9,
 .laji-form .col-sm-1, .laji-form .col-sm-10, .laji-form .col-sm-11, .laji-form .col-sm-12, .laji-form .col-sm-2, .laji-form .col-sm-3, .laji-form .col-sm-4, .laji-form .col-sm-5, .laji-form .col-sm-6, .laji-form .col-sm-7, .laji-form .col-sm-8, .laji-form .col-sm-9,
-.laji-form .col-xs-1, .laji-form .col-xs-10, .laji-form .col-xs-11, .laji-form .col-xs-12, .laji-form .col-xs-2, .laji-form .col-xs-3, .laji-form .col-xs-4, .laji-form .col-xs-5, .laji-form .col-xs-6, .laji-form .col-xs-7, .laji-form .col-xs-8, .laji-form .col-xs-9 {
+.laji-form .col-xs-1, .laji-form .col-xs-10, .laji-form .col-xs-11, .laji-form .col-xs-12, .laji-form .col-xs-2, .laji-form .col-xs-3, .laji-form .col-xs-4, .laji-form .col-xs-5, .laji-form .col-xs-6, .laji-form .col-xs-7, .laji-form .col-xs-8, .laji-form .col-xs-9,
+.laji-form .col-1,    .laji-form .col-10,    .laji-form .col-11,    .laji-form .col-12,    .laji-form .col-2,    .laji-form .col-3,    .laji-form .col-4,    .laji-form .col-5,    .laji-form .col-6,    .laji-form .col-7,    .laji-form .col-8,    .laji-form .col-9 {
 	padding-right:3px;
 	padding-left:3px;
 }

package/lib/components/LajiForm.js

@@ -101,6 +101,8 @@ const fields = importLocalComponents("fields", [
     "SortArrayField",
     "InputWithDefaultValueButtonField",
     "MultiTagArrayField",
+    "PdfArrayField",
+    "AsArrayField",
     { "InputTransformerField": "ConditionalOnChangeField" },
     { "ConditionalField": "ConditionalUiSchemaField" },
     { "UnitRapidField": "UnitShorthandField" },

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

@@ -0,0 +1,292 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+import { FieldProps } from "../LajiForm";
+export default class AsArrayField extends React.Component<FieldProps> {
+    static propTypes: {
+        schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        formData: PropTypes.Requireable<string | number | boolean | object>;
+    };
+    static getName(): string;
+    getStateFromProps(props: FieldProps): {
+        formData: any[];
+        schema: {
+            title: any;
+            type: string;
+            items: any;
+            maxItems: number;
+        };
+        onChange: (formData: any[]) => void;
+        uiSchema: any;
+        errorSchema: any;
+        formContext: import("../LajiForm").FormContext;
+        idSchema: import("@rjsf/utils").IdSchema<any>;
+        onBlur: (id: string, value: any) => void;
+        onFocus: (id: string, value: any) => void;
+        autofocus?: boolean | undefined;
+        disabled: boolean;
+        hideError?: boolean | undefined;
+        readonly: boolean;
+        required?: boolean | undefined;
+        name: string;
+        idPrefix?: string | undefined;
+        idSeparator?: string | undefined;
+        rawErrors?: string[] | undefined;
+        registry: import("@rjsf/utils").Registry<any, any, import("../LajiForm").FormContext>;
+        hidden?: boolean | undefined;
+        dir?: string | undefined;
+        slot?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        title?: string | undefined;
+        color?: string | undefined;
+        translate?: "yes" | "no" | undefined;
+        prefix?: string | undefined;
+        children?: React.ReactNode;
+        id?: string | undefined;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        className?: string | undefined;
+        contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
+        contextMenu?: string | undefined;
+        draggable?: (boolean | "false" | "true") | undefined;
+        lang?: string | undefined;
+        placeholder?: string | undefined;
+        spellCheck?: (boolean | "false" | "true") | undefined;
+        tabIndex?: number | undefined;
+        radioGroup?: string | undefined;
+        role?: React.AriaRole | undefined;
+        about?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        property?: string | undefined;
+        resource?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCapitalize?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputMode?: "search" | "numeric" | "none" | "text" | "tel" | "url" | "email" | "decimal" | undefined;
+        is?: string | undefined;
+        'aria-activedescendant'?: string | undefined;
+        'aria-atomic'?: boolean | "false" | "true" | undefined;
+        'aria-autocomplete'?: "both" | "none" | "inline" | "list" | undefined;
+        'aria-busy'?: boolean | "false" | "true" | undefined;
+        'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
+        'aria-colcount'?: number | undefined;
+        'aria-colindex'?: number | undefined;
+        'aria-colspan'?: number | undefined;
+        'aria-controls'?: string | undefined;
+        'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
+        'aria-describedby'?: string | undefined;
+        'aria-details'?: string | undefined;
+        'aria-disabled'?: boolean | "false" | "true" | undefined;
+        'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+        'aria-errormessage'?: string | undefined;
+        'aria-expanded'?: boolean | "false" | "true" | undefined;
+        'aria-flowto'?: string | undefined;
+        'aria-grabbed'?: boolean | "false" | "true" | undefined;
+        'aria-haspopup'?: boolean | "dialog" | "menu" | "listbox" | "grid" | "false" | "true" | "tree" | undefined;
+        'aria-hidden'?: boolean | "false" | "true" | undefined;
+        'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+        'aria-keyshortcuts'?: string | undefined;
+        'aria-label'?: string | undefined;
+        'aria-labelledby'?: string | undefined;
+        'aria-level'?: number | undefined;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined;
+        'aria-modal'?: boolean | "false" | "true" | undefined;
+        'aria-multiline'?: boolean | "false" | "true" | undefined;
+        'aria-multiselectable'?: boolean | "false" | "true" | undefined;
+        'aria-orientation'?: "horizontal" | "vertical" | undefined;
+        'aria-owns'?: string | undefined;
+        'aria-placeholder'?: string | undefined;
+        'aria-posinset'?: number | undefined;
+        'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
+        'aria-readonly'?: boolean | "false" | "true" | undefined;
+        'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+        'aria-required'?: boolean | "false" | "true" | undefined;
+        'aria-roledescription'?: string | undefined;
+        'aria-rowcount'?: number | undefined;
+        'aria-rowindex'?: number | undefined;
+        'aria-rowspan'?: number | undefined;
+        'aria-selected'?: boolean | "false" | "true" | undefined;
+        'aria-setsize'?: number | undefined;
+        'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+        'aria-valuemax'?: number | undefined;
+        'aria-valuemin'?: number | undefined;
+        'aria-valuenow'?: number | undefined;
+        'aria-valuetext'?: string | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string;
+        } | undefined;
+        onCopy?: React.ClipboardEventHandler<HTMLElement> | undefined;
+        onCopyCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+        onCut?: React.ClipboardEventHandler<HTMLElement> | undefined;
+        onCutCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+        onPaste?: React.ClipboardEventHandler<HTMLElement> | undefined;
+        onPasteCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+        onCompositionEnd?: React.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionEndCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionStart?: React.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionStartCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionUpdate?: React.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+        onFocusCapture?: React.FocusEventHandler<HTMLElement> | undefined;
+        onBlurCapture?: React.FocusEventHandler<HTMLElement> | undefined;
+        onChangeCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onBeforeInput?: React.FormEventHandler<HTMLElement> | undefined;
+        onBeforeInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onInput?: React.FormEventHandler<HTMLElement> | undefined;
+        onInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onReset?: React.FormEventHandler<HTMLElement> | undefined;
+        onResetCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onSubmit?: React.FormEventHandler<HTMLElement> | undefined;
+        onSubmitCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onInvalid?: React.FormEventHandler<HTMLElement> | undefined;
+        onInvalidCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onLoad?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onError?: React.ReactEventHandler<HTMLElement> | undefined;
+        onErrorCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onKeyDown?: React.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyDownCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyPress?: React.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyPressCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyUp?: React.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyUpCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+        onAbort?: React.ReactEventHandler<HTMLElement> | undefined;
+        onAbortCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onCanPlay?: React.ReactEventHandler<HTMLElement> | undefined;
+        onCanPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onCanPlayThrough?: React.ReactEventHandler<HTMLElement> | undefined;
+        onCanPlayThroughCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onDurationChange?: React.ReactEventHandler<HTMLElement> | undefined;
+        onDurationChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onEmptied?: React.ReactEventHandler<HTMLElement> | undefined;
+        onEmptiedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onEncrypted?: React.ReactEventHandler<HTMLElement> | undefined;
+        onEncryptedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onEnded?: React.ReactEventHandler<HTMLElement> | undefined;
+        onEndedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadedData?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadedDataCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadedMetadata?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadedMetadataCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadStart?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadStartCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onPause?: React.ReactEventHandler<HTMLElement> | undefined;
+        onPauseCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onPlay?: React.ReactEventHandler<HTMLElement> | undefined;
+        onPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onPlaying?: React.ReactEventHandler<HTMLElement> | undefined;
+        onPlayingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onProgress?: React.ReactEventHandler<HTMLElement> | undefined;
+        onProgressCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onRateChange?: React.ReactEventHandler<HTMLElement> | undefined;
+        onRateChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSeeked?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSeekedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSeeking?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSeekingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onStalled?: React.ReactEventHandler<HTMLElement> | undefined;
+        onStalledCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSuspend?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSuspendCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onTimeUpdate?: React.ReactEventHandler<HTMLElement> | undefined;
+        onTimeUpdateCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onVolumeChange?: React.ReactEventHandler<HTMLElement> | undefined;
+        onVolumeChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onWaiting?: React.ReactEventHandler<HTMLElement> | undefined;
+        onWaitingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onAuxClick?: React.MouseEventHandler<HTMLElement> | undefined;
+        onAuxClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onClick?: React.MouseEventHandler<HTMLElement> | undefined;
+        onClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onContextMenu?: React.MouseEventHandler<HTMLElement> | undefined;
+        onContextMenuCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onDoubleClick?: React.MouseEventHandler<HTMLElement> | undefined;
+        onDoubleClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onDrag?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragEnd?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragEndCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragEnter?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragEnterCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragExit?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragExitCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragLeave?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragLeaveCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragOver?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragOverCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragStart?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragStartCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDrop?: React.DragEventHandler<HTMLElement> | undefined;
+        onDropCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onMouseDown?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseDownCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseEnter?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseLeave?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseMove?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseMoveCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseOut?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseOutCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseOver?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseOverCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseUp?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseUpCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onSelect?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSelectCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onTouchCancel?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchCancelCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchEnd?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchEndCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchMove?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchMoveCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchStart?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchStartCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+        onPointerDown?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerDownCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerMove?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerMoveCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerUp?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerUpCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerCancel?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerCancelCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerEnter?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerEnterCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerLeave?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerLeaveCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerOver?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerOverCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerOut?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerOutCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onGotPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onLostPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onScroll?: React.UIEventHandler<HTMLElement> | undefined;
+        onScrollCapture?: React.UIEventHandler<HTMLElement> | undefined;
+        onWheel?: React.WheelEventHandler<HTMLElement> | undefined;
+        onWheelCapture?: React.WheelEventHandler<HTMLElement> | undefined;
+        onAnimationStart?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationStartCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationEnd?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationIteration?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onTransitionEnd?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+    };
+    onChange: (formData: any[]) => void;
+}

package/lib/components/fields/AsArrayField.js

@@ -0,0 +1,39 @@
+"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");
+let AsArrayField = class AsArrayField extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.onChange = (formData) => {
+            this.props.onChange(formData === null || formData === void 0 ? void 0 : formData[0]);
+        };
+    }
+    static getName() { return "AsArrayField"; }
+    getStateFromProps(props) {
+        var _a;
+        return Object.assign(Object.assign({}, props), { formData: ((_a = props.formData) === null || _a === void 0 ? void 0 : _a.length) ? [props.formData[0]] : [], schema: {
+                title: props.schema.title,
+                type: "array",
+                items: Object.assign(Object.assign({}, props.schema), { title: undefined }),
+                maxItems: 1
+            }, onChange: this.onChange });
+    }
+};
+AsArrayField.propTypes = {
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["array", "object", "string", "integer", "number", "boolean"])
+    }).isRequired,
+    formData: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.string, PropTypes.number, PropTypes.bool])
+};
+AsArrayField = __decorate([
+    VirtualSchemaField_1.default
+], AsArrayField);
+exports.default = AsArrayField;

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

@@ -34,7 +34,7 @@ export default class ImageArrayField extends React.Component<FieldProps, ImageAr
     renderModalMedia: () => JSX.Element;
     formatValue(value: string[], options: any, props: FieldProps): string | null;
 }
-interface MediaArrayState {
+export interface MediaArrayState {
     tmpMedias: number[];
     addModal?: any;
     dragging?: boolean;
@@ -150,4 +150,23 @@ export declare function MediaArrayField<LFC extends Constructor<React.Component<
     };
     displayName: string;
 } & LFC;
+interface ThumbnailProps {
+    id?: string;
+    apiClient: ApiClient;
+    apiEndpoint?: string;
+    dataURL?: string;
+    loading?: boolean;
+}
+interface ThumbnailState {
+    url?: string;
+}
+export declare class Thumbnail extends React.PureComponent<ThumbnailProps, ThumbnailState> {
+    mounted: boolean;
+    constructor(props: ThumbnailProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    UNSAFE_componentWillReceiveProps(props: ThumbnailProps): void;
+    updateURL: ({ id, apiClient, apiEndpoint }: ThumbnailProps) => void;
+    render(): JSX.Element | null;
+}
 export {};

package/lib/components/fields/ImageArrayField.js

@@ -17,7 +17,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MediaArrayField = void 0;
+exports.Thumbnail = exports.MediaArrayField = void 0;
 const React = require("react");
 const PropTypes = require("prop-types");
 const immutability_helper_1 = require("immutability-helper");
@@ -505,6 +505,8 @@ function MediaArrayField(ComposedComponent) {
             const { dragging } = this.state;
             const { Row, Col } = this.context.theme;
             const { DescriptionFieldTemplate } = this.props.registry.templates;
+            const mediaCount = (this.props.formData || []).length + (this.state.tmpMedias || []).length;
+            const showAdd = utils_1.isNullOrUndefined(this.props.schema.maxItems) || mediaCount < this.props.schema.maxItems;
             return (React.createElement(Row, null,
                 React.createElement(Col, { xs: 12 },
                     React.createElement(TitleFieldTemplate, { title: title, schema: schema, uiSchema: uiSchema, id: idSchema.$id, registry: this.props.registry }),
@@ -512,7 +514,7 @@ function MediaArrayField(ComposedComponent) {
                     React.createElement("div", { className: `laji-form-medias ${this.CONTAINER_CLASS}` },
                         this.renderMedias(),
                         this.renderLoadingMedias(),
-                        React.createElement(OverlayTrigger, { overlay: tooltip },
+                        showAdd && React.createElement(OverlayTrigger, { overlay: tooltip },
                             React.createElement(react_dropzone_1.default, { accept: this.ACCEPT_FILE_TYPES, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, onDrop: this.onDrop, disabled: readonly || disabled, noKeyboard: true }, ({ getRootProps, getInputProps }) => {
                                 const _a = getRootProps(), { onClick: _onClick } = _a, rootProps = __rest(_a, ["onClick"]);
                                 const onClick = addModal ? this.defaultOnClick : _onClick;
@@ -663,10 +665,10 @@ exports.MediaArrayField = MediaArrayField;
 class Thumbnail extends React.PureComponent {
     constructor(props) {
         super(props);
-        this.updateURL = ({ id, apiClient }) => {
+        this.updateURL = ({ id, apiClient, apiEndpoint = "images" }) => {
             if (!id)
                 return;
-            apiClient.fetchCached(`/images/${id}`, undefined, { failSilently: true }).then((response) => {
+            apiClient.fetchCached(`/${apiEndpoint}/${id}`, undefined, { failSilently: true }).then((response) => {
                 if (!this.mounted)
                     return;
                 this.setState({ url: response.squareThumbnailURL });
@@ -694,3 +696,4 @@ class Thumbnail extends React.PureComponent {
             : img;
     }
 }
+exports.Thumbnail = Thumbnail;

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

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { FieldProps } from "../LajiForm";
+import { MediaArrayState } from "./ImageArrayField";
+export default class PdfArrayField extends React.Component<FieldProps, MediaArrayState> {
+    ALLOWED_FILE_TYPES: string[];
+    ACCEPT_FILE_TYPES: string[];
+    MAX_FILE_SIZE: number;
+    KEY: string;
+    ENDPOINT: string;
+    GLYPH: string;
+    TRANSLATION_TAKE_NEW: string;
+    TRANSLATION_SELECT_FILE: string;
+    TRANSLATION_NO_MEDIA: string;
+    CONTAINER_CLASS: string;
+    METADATA_FORM_ID: string;
+    renderMedia: (id: string) => JSX.Element;
+    renderLoadingMedia: (id: string) => JSX.Element;
+    onMediaClick: (i: number) => any;
+    renderModalMedia: () => JSX.Element;
+    formatValue(value: string[], options: any, props: FieldProps): string | null;
+}

package/lib/components/fields/PdfArrayField.js

@@ -0,0 +1,40 @@
+"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 ImageArrayField_1 = require("./ImageArrayField");
+let PdfArrayField = class PdfArrayField extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.ALLOWED_FILE_TYPES = ["application/pdf"];
+        this.ACCEPT_FILE_TYPES = ["application/pdf"];
+        this.MAX_FILE_SIZE = 20000000;
+        this.KEY = "PDF";
+        this.ENDPOINT = "pdf";
+        this.GLYPH = "paperclip";
+        this.TRANSLATION_TAKE_NEW = "";
+        this.TRANSLATION_SELECT_FILE = "";
+        this.TRANSLATION_NO_MEDIA = "";
+        this.CONTAINER_CLASS = "pdf-container";
+        this.METADATA_FORM_ID = "MHL.1070";
+        this.renderMedia = (id) => React.createElement(ImageArrayField_1.Thumbnail, { id: id, apiClient: this.props.formContext.apiClient, apiEndpoint: this.ENDPOINT });
+        this.renderLoadingMedia = (id) => React.createElement(ImageArrayField_1.Thumbnail, { dataURL: id, loading: true, apiClient: this.props.formContext.apiClient, apiEndpoint: this.ENDPOINT });
+        this.onMediaClick = (i) => this.openModalFor(i);
+        this.renderModalMedia = () => React.createElement("img", { src: this.state.modalMediaSrc });
+    }
+    formatValue(value, options, props) {
+        const { translations } = props.formContext;
+        return value && value.length
+            ? `${value.length} ${translations.HowManyFiles}`
+            : null;
+    }
+};
+PdfArrayField = __decorate([
+    ImageArrayField_1.MediaArrayField
+], PdfArrayField);
+exports.default = PdfArrayField;

package/lib/components/templates/ArrayFieldTemplate.js

@@ -244,7 +244,7 @@ function handlesArrayKeys(ComposedComponent) {
                 this.customEventListeners.forEach(params => customEvents.remove(props.idSchema.$id, ...params));
             }
         },
-        _a.displayName = utils_1.getReactComponentName(ComposedComponent),
+        _a.displayName = utils_1.getReactComponentName(ComposedComponent) + "_handlesArrayKeys",
         _a;
 }
 exports.handlesArrayKeys = handlesArrayKeys;

package/lib/components/templates/TitleField.js

@@ -17,10 +17,10 @@ const TitleField = ({ title, id, formData, style, uiSchema = {}, registry = {} }
         return null;
     }
     const helpComponent = help ? React.createElement(components_1.Help, null) : null;
-    let titleTextContent = (React.createElement(React.Fragment, null,
+    let titleTextContent = React.createElement("span", null,
         React.createElement("span", { dangerouslySetInnerHTML: { __html: title } }),
         " ",
-        helpComponent));
+        helpComponent);
     if (help) {
         const tooltipElem = (React.createElement(Tooltip, { id: id + "-tooltip" },
             React.createElement("span", null,

package/lib/themes/bs5.js

@@ -50,7 +50,7 @@ Panel.Collapse = React.forwardRef((_a, ref) => {
 Panel.Footer = react_bootstrap_5_1.Card.Footer;
 const Glyphicon = React.forwardRef((_a, ref) => {
     var { glyph } = _a, props = __rest(_a, ["glyph"]);
-    return (React.createElement(react_fontawesome_1.FontAwesomeIcon, Object.assign({ icon: glyphicon_fa_mapping_1.mapping[glyph] }, props, { ref: ref })));
+    return (React.createElement(react_fontawesome_1.FontAwesomeIcon, Object.assign({ className: "glyphicon", icon: glyphicon_fa_mapping_1.mapping[glyph] }, props, { ref: ref })));
 });
 const _Modal = react_bootstrap_5_1.Modal;
 const _InputGroup = react_bootstrap_5_1.InputGroup;

package/lib/translations.json

@@ -819,6 +819,11 @@
         "en": "photos",
         "sv": "foton"
     },
+    "howManyFiles": {
+        "fi": "tiedostoa",
+        "en": "files",
+        "sv": "filer"
+    },
     "sortStrategyDefault": {
         "fi": "Oletus",
         "en": "Default",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luomus/laji-form",
-  "version": "14.3.6",
+  "version": "14.3.8",
   "description": "React module capable of building dynamic forms from Laji form json schemas",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -18,7 +18,8 @@
     "test": "HOST=127.0.0.1 PORT=8083 protractor protractor.conf.js",
     "test:multi": "TEST_BROWSER=multi HOST=127.0.0.1 PORT=8083 protractor protractor.conf.js",
     "test:ffox": "TEST_BROWSER=firefox HOST=127.0.0.1 PORT=8083 protractor protractor.conf.js",
-    "test:debug": "HOST=127.0.0.1 PORT=8083 HEADLESS=false node --inspect-brk node_modules/protractor/bin/protractor protractor.conf.js"
+    "test:debug": "HOST=127.0.0.1 PORT=8083 HEADLESS=false node --inspect-brk node_modules/protractor/bin/protractor protractor.conf.js",
+    "patch": "patch-package"
   },
   "keywords": [
     "react-jsonschema-form",
@@ -69,6 +70,7 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "mini-css-extract-plugin": "^2.1.0",
     "notus": "^0.3.2",
+    "patch-package": "^8.0.0",
     "protractor": "^7.0.0",
     "protractor-console-plugin": "^0.1.1",
     "querystring": "^0.2.1",

package/cypress/fixtures/example.json

@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}

package/llol

@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<title>Error</title>
-</head>
-<body>
-<pre>Cannot POST /v0/html-to-pdf</pre>
-</body>
-</html>

package/llol.pdf

@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<title>Error</title>
-</head>
-<body>
-<pre>Cannot POST /v0/html-to-pdf</pre>
-</body>
-</html>