@luomus/laji-form 14.3.6 → 14.3.7

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,7 @@ const fields = importLocalComponents("fields", [
     "SortArrayField",
     "InputWithDefaultValueButtonField",
     "MultiTagArrayField",
+    "PdfArrayField",
     { "InputTransformerField": "ConditionalOnChangeField" },
     { "ConditionalField": "ConditionalUiSchemaField" },
     { "UnitRapidField": "UnitShorthandField" },

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");
@@ -663,10 +663,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 +694,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.7",
   "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",