@luomus/laji-form 15.1.9 → 15.1.11

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/ApiClient.js

@@ -47,6 +47,9 @@ class ApiClient {
             if (!failSilently && response.status >= 400) {
                 throw new Error("Request failed");
             }
+            if (response.status === 204) {
+                return undefined;
+            }
             return response.json();
         }).catch(() => {
             if (this.cache[path])

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 = () => {
@@ -118,7 +118,7 @@ function MediaArrayField(ComposedComponent) {
                     if (!medias || !medias[item])
                         return null;
                     return (React.createElement("div", { key: i, className: "media-container" },
-                        React.createElement("a", null, this.renderLoadingMedia(medias[item]))));
+                        React.createElement("div", { className: "media-container-link" }, this.renderLoadingMedia(medias[item]))));
                 });
             };
             this.openModalFor = (i) => () => {
@@ -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

@@ -14,8 +14,7 @@ export default class PdfArrayField extends React.Component<FieldProps, MediaArra
     CONTAINER_CLASS: string;
     METADATA_FORM_ID: string;
     renderMedia: (id: string) => JSX.Element;
-    renderLoadingMedia: (id: string) => JSX.Element;
-    onMediaClick: (i: number) => any;
-    renderModalMedia: () => JSX.Element;
+    renderLoadingMedia: () => 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 = () => React.createElement(ImageArrayField_1.Thumbnail, { loading: true, apiClient: this.props.formContext.apiClient, apiEndpoint: this.ENDPOINT, downloadLink: true });
+        this.onMediaClick = () => null;
     }
     formatValue(value, options, props) {
         const { translations } = props.formContext;

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

@@ -56,7 +56,11 @@ export default class DateTimeWidget extends React.Component<any, any, any> {
     setToday: () => void;
     setYesterday: () => void;
     setSameAsToday: () => void;
+    setPlusSixMonths: () => void;
+    setPlusYear: () => void;
     formatValue(value: any, options: any, props: any): any;
+    getCurrentDateOrNow(): moment.Moment;
 }
 import * as React from "react";
+import * as moment from "moment";
 import * as PropTypes from "prop-types";

package/lib/components/widgets/DateTimeWidget.js

@@ -102,6 +102,12 @@ let DateTimeWidget = DateTimeWidget_1 = class DateTimeWidget extends React.Compo
                 this.onChange(today);
             }
         };
+        this.setPlusSixMonths = () => {
+            this.onChange(this.getCurrentDateOrNow().add(6, "M").format("YYYY-MM-DD"));
+        };
+        this.setPlusYear = () => {
+            this.onChange(this.getCurrentDateOrNow().add(1, "y").format("YYYY-MM-DD"));
+        };
         momentLocalizer(moment);
     }
     componentDidMount() {
@@ -192,6 +198,16 @@ let DateTimeWidget = DateTimeWidget_1 = class DateTimeWidget extends React.Compo
                 className: "same",
                 label: translations.Same,
                 onClick: this.setSameAsToday
+            },
+            plusSixMonths: {
+                className: "plus-six-months",
+                label: translations.plusSixMonths,
+                onClick: this.setPlusSixMonths
+            },
+            plusYear: {
+                className: "plus-year",
+                label: translations.plusYear,
+                onClick: this.setPlusYear
             }
         };
         const options = showButtons === true
@@ -209,6 +225,13 @@ let DateTimeWidget = DateTimeWidget_1 = class DateTimeWidget extends React.Compo
         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);
     }
+    getCurrentDateOrNow() {
+        const date = moment(this.props.value);
+        if (date.isValid()) {
+            return date;
+        }
+        return moment();
+    }
 };
 DateTimeWidget.contextType = ReactContext_1.default;
 DateTimeWidget.propTypes = {

package/lib/translations.json

@@ -19,6 +19,16 @@
         "en": "Yesterday",
         "sv": "Igår"
     },
+    "plusSixMonths": {
+        "fi": "+6k",
+        "en": "+6m",
+        "sv": "+6m"
+    },
+    "plusYear": {
+        "fi": "+1v",
+        "en": "+1y",
+        "sv": "+1å"
+    },
     "dd/mm/yyyy": {
         "fi": "pp/kk/vvvv",
         "en": "dd/mm/yyyy",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luomus/laji-form",
-  "version": "15.1.9",
+  "version": "15.1.11",
   "description": "React module capable of building dynamic forms from Laji form json schemas",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/test-export/test-utils.d.ts

@@ -21,6 +21,8 @@ export interface DateWidgetPO {
         $same: Locator;
         $date: Locator;
         $time: Locator;
+        $plusSixMonths: Locator;
+        $plusYear: Locator;
     };
     calendar: {
         $today: Locator;
@@ -118,6 +120,8 @@ export declare class Form {
             $same: Locator;
             $date: Locator;
             $time: Locator;
+            $plusSixMonths: Locator;
+            $plusYear: Locator;
         };
         calendar: {
             $today: Locator;

package/test-export/test-utils.js

@@ -223,7 +223,9 @@ class Form {
                 $yesterday: $widget.locator(".yesterday"),
                 $same: $widget.locator(".same"),
                 $date: $widget.locator(".rw-i-calendar"),
-                $time: $widget.locator(".rw-i-clock-o")
+                $time: $widget.locator(".rw-i-clock-o"),
+                $plusSixMonths: $widget.locator(".plus-six-months"),
+                $plusYear: $widget.locator(".plus-year"),
             },
             calendar: {
                 $today: $widget.locator(".rw-calendar-footer button"),