@luomus/laji-form 15.1.8 → 15.1.10

package/dist/styles.css

@@ -2420,7 +2420,7 @@ min-height: 20px;
 	height: 120px;
 	float: left;
 }
-.laji-form .laji-form-medias a > img, .laji-form .audios-container a {
+.laji-form .laji-form-medias .media-container-link > img, .laji-form .audios-container .media-container-link {
 	cursor: pointer;
 }
 .laji-form .laji-form-medias img, .laji-form .media-loading {
@@ -2463,10 +2463,6 @@ min-height: 20px;
 	background-color: #d8fbc6;
 	border-color: #a7d490;
 }
-.laji-form .laji-form-medias a:hover, .laji-form .laji-form-medias a:active {
-	text-decoration: none;
-	color: #337ab7;
-}
 .laji-form .laji-form-drop-zone:hover:not(.disabled) span, .laji-form .laji-form-drop-zone.dragging:not(.disabled) span {
 	color: #a7d490;
 }
@@ -2474,13 +2470,16 @@ min-height: 20px;
 	cursor: not-allowed;
 }
 
-.laji-form .laji-form-medias a {
+.laji-form .laji-form-medias .media-container-link, .laji-form .laji-form-medias .media-container-link a {
 	text-align: center;
 	vertical-align: middle;
 	width: 100%;
 	height: 100%;
 }
-.laji-form .laji-form-medias .media-container > a > div > .glyphicon, .laji-form .laji-form-medias .laji-form-drop-zone .glyphicon {
+.laji-form .laji-form-medias .media-container-link a:focus {
+	outline: none;
+}
+.laji-form .laji-form-medias .media-container > .media-container-link > div > .glyphicon, .laji-form .laji-form-medias .laji-form-drop-zone .glyphicon {
 	font-size: 78px;
 	color: #dedede;
 	display: table-cell;
@@ -2494,12 +2493,12 @@ min-height: 20px;
 	padding-left: 12px;
 	padding-top: 19px;
 }
-.laji-form .audios-container .media-container > a > div > .glyphicon {
+.laji-form .audios-container .media-container > .media-container-link > div > .glyphicon {
 	padding-left: 2px;
 	padding-top: 0px;
 	color: #868686;
 }
-.laji-form .audios-container .media-container > a > div > .glyphicon-pause {
+.laji-form .audios-container .media-container > .media-container-link > div > .glyphicon-pause {
 	padding-left: 6px;
 }
 .laji-form .audio-container {

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

@@ -156,9 +156,11 @@ interface ThumbnailProps {
     apiEndpoint?: string;
     dataURL?: string;
     loading?: boolean;
+    downloadLink?: boolean;
 }
 interface ThumbnailState {
     url?: string;
+    linkUrl?: string;
 }
 export declare class Thumbnail extends React.PureComponent<ThumbnailProps, ThumbnailState> {
     mounted: boolean;

package/lib/components/fields/ImageArrayField.js

@@ -108,7 +108,7 @@ function MediaArrayField(ComposedComponent) {
                 const { disabled, readonly } = this.props;
                 const { deleteConfirmPlacement = "top" } = utils_1.getUiOptions(this.props.uiSchema);
                 return (this.props.formData || []).map((item, i) => (React.createElement("div", { key: i, className: "media-container" },
-                    React.createElement("a", { onClick: this.onMediaClick(i) }, this.renderMedia(item, i)),
+                    React.createElement("div", { className: "media-container-link", onClick: this.onMediaClick(i) }, this.renderMedia(item, i)),
                     React.createElement(components_1.DeleteButton, { corner: true, confirm: true, confirmPlacement: deleteConfirmPlacement, translations: this.props.formContext.translations, onClick: this.onMediaRmClick(i), disabled: disabled || readonly, id: `${this.props.idSchema.$id}_${i}` }))));
             };
             this.renderLoadingMedias = () => {
@@ -671,7 +671,7 @@ class Thumbnail extends React.PureComponent {
             apiClient.fetchCached(`/${apiEndpoint}/${id}`, undefined, { failSilently: true }).then((response) => {
                 if (!this.mounted)
                     return;
-                this.setState({ url: response.squareThumbnailURL });
+                this.setState({ url: response.squareThumbnailURL, linkUrl: response.originalURL });
             });
         };
         this.state = {};
@@ -688,7 +688,10 @@ class Thumbnail extends React.PureComponent {
     }
     render() {
         const url = this.state.url || this.props.dataURL;
-        const img = url ? React.createElement("img", { src: url }) : null;
+        const linkUrl = this.state.linkUrl;
+        const addLink = this.props.downloadLink && linkUrl;
+        let img = url ? React.createElement("img", { src: url }) : null;
+        img = addLink ? React.createElement("a", { href: linkUrl, target: "_blank", rel: "noopener noreferrer", download: true }, img) : img;
         return (!url || this.props.loading)
             ? React.createElement("div", { className: "media-loading" },
                 img,

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

@@ -15,7 +15,6 @@ export default class PdfArrayField extends React.Component<FieldProps, MediaArra
     METADATA_FORM_ID: string;
     renderMedia: (id: string) => JSX.Element;
     renderLoadingMedia: (id: string) => JSX.Element;
-    onMediaClick: (i: number) => any;
-    renderModalMedia: () => JSX.Element;
+    onMediaClick: () => null;
     formatValue(value: string[], options: any, props: FieldProps): string | null;
 }

package/lib/components/fields/PdfArrayField.js

@@ -21,11 +21,10 @@ let PdfArrayField = class PdfArrayField extends React.Component {
         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 });
+        this.METADATA_FORM_ID = "";
+        this.renderMedia = (id) => React.createElement(ImageArrayField_1.Thumbnail, { id: id, apiClient: this.props.formContext.apiClient, apiEndpoint: this.ENDPOINT, downloadLink: true });
+        this.renderLoadingMedia = (id) => React.createElement(ImageArrayField_1.Thumbnail, { dataURL: id, loading: true, apiClient: this.props.formContext.apiClient, apiEndpoint: this.ENDPOINT, downloadLink: true });
+        this.onMediaClick = () => null;
     }
     formatValue(value, options, props) {
         const { translations } = props.formContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luomus/laji-form",
-  "version": "15.1.8",
+  "version": "15.1.10",
   "description": "React module capable of building dynamic forms from Laji form json schemas",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -31,8 +31,8 @@
   "repository": "https://github.com/luomus/laji-form.git",
   "license": "MIT",
   "dependencies": {
-    "@luomus/laji-map": "^5.0.1",
-    "@luomus/laji-validate": "0.0.120",
+    "@luomus/laji-map": "^5.0.2",
+    "@luomus/laji-validate": "^0.0.121",
     "@rjsf/core": "~5.1.0",
     "@rjsf/utils": "~5.1.0",
     "@rjsf/validator-ajv6": "~5.1.0",