Update to version 1.1

Author: JelteMX

.gitignore

@@ -2,3 +2,4 @@ dist/
 node_modules/
 *.log
 .DS_Store
+.env

package-lock.json

@@ -1,15 +1,13 @@
 {
   "name": "filedropper",
   "widgetName": "FileDropper",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Drop files in your Mendix Application",
   "copyright": "Mendix 2019",
   "author": "Jelte Lagendijk",
   "config": {
-    "_widgetPath": "./dist/MxTestProject/widgets",
-    "_projectPath": "./dist/MxTestProject/",
-    "widgetPath": "/Volumes/[C] Windows 10.hidden/Projects/MendixProjects/FileDropperTestProject-main/widgets",
-    "projectPath": "/Volumes/[C] Windows 10.hidden/Projects/MendixProjects/FileDropperTestProject-main/",
+    "widgetPath": "./dist/MxTestProject/widgets",
+    "projectPath": "./dist/MxTestProject/",
     "mendixHost": "http://10.211.55.3:8080",
     "developmentPort": "3000"
   },
@@ -31,7 +29,7 @@
   },
   "license": "Apache-2.0",
   "devDependencies": {
-    "@mendix/pluggable-widgets-tools": "^8.0.4",
+    "@mendix/pluggable-widgets-tools": "^8.4.0",
     "@types/big.js": "^4.0.5",
     "@types/enzyme": "^3.1.10",
     "@types/enzyme-adapter-react-16": "^1.0.2",
@@ -49,6 +47,7 @@
   },
   "dependencies": {
     "@bem-react/classname": "^1.5.4",
+    "@jeltemx/mendix-react-widget-utils": "^0.3.1",
     "axios": "^0.19.0",
     "core-js": "^3.2.1",
     "filesize": "^5.0.2",

package.json

@@ -1,27 +1,28 @@
 import { Component, ReactNode, createElement } from "react";
 import { findDOMNode } from "react-dom";
-import { FileDropper } from "./components/FileDropper";
 import { hot } from "react-hot-loader/root";
-import { FileDropperContainerProps, Nanoflow } from "../typings/FileDropperProps";
-
-import "./ui/FileDropper.scss";
-import { FileDropperStore, FileDropperGuids } from "./store/fileDropperStore";
-import { FileDropperFile } from "./store/fileDropperFile";
+import mime from "mime";
 import {
     createObject,
-    saveDocument,
-    commitObject,
     deleteObjectGuid,
-    savePostMethod,
-    getObject,
-    entityIsImage,
-    entityIsFileDocument,
-    entityIsPersistable
-} from "./util/data";
+    commitObject,
+    getObject
+} from "@jeltemx/mendix-react-widget-utils/lib/objects";
+import { entityIsFileDocument, entityIsImage, entityIsPersistable } from "@jeltemx/mendix-react-widget-utils";
+import { saveDocument } from "@jeltemx/mendix-react-widget-utils/lib/documents";
+
+import { FileDropper } from "./components/FileDropper";
+import { FileDropperContainerProps, Nanoflow } from "../typings/FileDropperProps";
+import { FileDropperStore, FileDropperGuids } from "./store/fileDropperStore";
+import { FileDropperFile } from "./store/fileDropperFile";
+
+import { savePostMethod } from "./util/data";
+
 import { UIProps } from "./components/FileList";
 import { getTexts } from "./util/texts";
 import { validateProps, ValidationMessage, ValidateExtraProps } from "./util/validation";
-import mime from "mime";
+
+import "./ui/FileDropper.scss";
 
 export interface Action {
     microflow?: string;
@@ -126,7 +127,8 @@ class FileDropperContainer extends Component<FileDropperContainerProps, {}> {
             uiErrorButtonGlyph,
             uiErrorButtonStyle,
             uiShowPreviewLabel,
-            uiShowImagePreviews
+            uiShowImagePreviews,
+            uiHideProgressOnComplete
         } = this.props;
 
         const deleteButtonStyle =
@@ -141,7 +143,8 @@ class FileDropperContainer extends Component<FileDropperContainerProps, {}> {
             saveButtonStyle,
             errorButtonStyle,
             uiShowPreviewLabel,
-            uiShowImagePreviews
+            uiShowImagePreviews,
+            uiHideProgressOnComplete
         };
 
         return <FileDropper store={this.store} uiProps={ui} />;

src/FileDropper.tsx

@@ -71,7 +71,8 @@ export class preview extends Component<FileDropperContainerProps> {
             uiErrorButtonGlyph,
             uiErrorButtonStyle,
             uiShowPreviewLabel,
-            uiShowImagePreviews
+            uiShowImagePreviews,
+            uiHideProgressOnComplete
         } = props;
 
         const deleteButtonStyle =
@@ -86,7 +87,8 @@ export class preview extends Component<FileDropperContainerProps> {
             saveButtonStyle,
             errorButtonStyle,
             uiShowPreviewLabel,
-            uiShowImagePreviews
+            uiShowImagePreviews,
+            uiHideProgressOnComplete
         };
     }
 

src/FileDropper.webmodeler.tsx

@@ -17,6 +17,7 @@ export interface UIProps {
     errorButtonStyle: null | string;
     uiShowPreviewLabel: boolean;
     uiShowImagePreviews: boolean;
+    uiHideProgressOnComplete: boolean;
 }
 export interface FileListProps {
     uiProps?: UIProps;
@@ -31,6 +32,7 @@ export class FileList extends Component<FileListProps, {}> {
         super(props);
 
         this.renderDeleteButton = this.renderDeleteButton.bind(this);
+        this.renderProgress = this.renderProgress.bind(this);
     }
 
     render(): ReactNode {
@@ -170,6 +172,9 @@ export class FileList extends Component<FileListProps, {}> {
     private renderProgress(file: IFileDropperFile): ReactNode {
         const strokeColor = file.status === "error" ? "#F00" : "#a5a5a5";
         const percent = file.status === "error" ? 0 : file.loadProgress;
+        if (this.props.uiProps && this.props.uiProps.uiHideProgressOnComplete && file.status === "saved") {
+            return null;
+        }
         return (
             <div className={classes("item-progress")}>
                 <ProgressLine className={classes("item-progress__bar")} percent={percent} strokeColor={strokeColor} />

src/FileDropper.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="FileDropper" version="1.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="FileDropper" version="1.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="FileDropper.xml"/>
         </widgetFiles>

src/components/FileList.tsx

@@ -2,7 +2,6 @@ import { observable, action, flow, configure, computed } from "mobx";
 import { FileDropperTexts } from "../util/texts";
 import { ValidationMessage } from "../util/validation";
 import { IFileDropperFile, FileDropperFile } from "./fileDropperFile";
-// import { CancellablePromise } from "mobx/lib/api/flow";
 
 configure({ enforceActions: "observed" });
 
@@ -31,39 +30,6 @@ export interface FileDropperStoreOptions {
     saveBase64?: boolean;
 }
 
-// export interface IFileDropperStore {
-//     accept?: string;
-//     maxNumber: number;
-//     maxSize?: number;
-//     texts: FileDropperTexts;
-
-//     files: IFileDropperFile[];
-//     contextObject: mendix.lib.MxObject | null;
-//     validationMessages: ValidationMessage[];
-
-//     saveFile: (file: IFileDropperFile) => CancellablePromise<void>;
-//     deleteFile: (file: IFileDropperFile) => CancellablePromise<void>;
-//     deleteFileShallow: (guid: string) => CancellablePromise<void>;
-
-//     saveMethod: ((file: IFileDropperFile) => Promise<boolean>) | null;
-//     deleteMethod: ((file: IFileDropperFile) => Promise<boolean>) | null;
-//     verifyMethod: ((file: IFileDropperFile) => Promise<boolean>) | null;
-//     subscriptionHandler: (guids: FileDropperGuids) => void;
-
-//     autoLoad: boolean;
-//     autoSave: boolean;
-//     saveBase64: boolean;
-
-//     setContext(obj: mendix.lib.MxObject | null): void;
-//     maxFilesReached: boolean;
-//     disabled: boolean;
-//     filesGuids: FileDropperGuids;
-
-//     addFile(file: File): void;
-//     addValidationMessage(message: ValidationMessage): void;
-//     removeValidationMessage(id: string): void;
-// }
-
 export class FileDropperStore implements FileDropperStoreProps {
     public accept: string | undefined;
     public maxNumber: number;

src/package.xml

@@ -3,48 +3,11 @@ import { FileDropperFile } from "../store/fileDropperFile";
 
 let requestNumber = 0;
 
-export const createObject = (entity: string): Promise<mendix.lib.MxObject> =>
-    new Promise((resolve: (value: mendix.lib.MxObject) => void, reject) => {
-        mx.data.create({ entity, callback: resolve, error: reject });
-    });
-
-export const commitObject = (mxobj: mendix.lib.MxObject): Promise<void> =>
-    new Promise((resolve, reject) => {
-        mx.data.commit({ mxobj, callback: resolve, error: reject });
-    });
-
-export const deleteObjectGuid = (guid: string): Promise<void> =>
-    new Promise((resolve, reject) => {
-        mx.data.remove({ guid, callback: resolve, error: reject });
-    });
-
-export const getObject = (guid: string): Promise<mendix.lib.MxObject | null> =>
-    new Promise((resolve, reject) => {
-        mx.data.get({ guid, callback: resolve, error: reject });
-    });
-
-export const saveDocument = (name: string, file: Blob, obj: mendix.lib.MxObject): Promise<void> =>
-    new Promise((resolve, reject) => {
-        mx.data.saveDocument(obj.getGuid(), name, {}, file, resolve, reject);
-    });
-
 interface Progress {
     loaded: number;
     total: number;
 }
 
-export const entityIsImage = (entity: string): boolean => {
-    return mx.meta.getEntity(entity).isA("System.Image");
-};
-
-export const entityIsFileDocument = (entity: string): boolean => {
-    return mx.meta.getEntity(entity).isA("System.FileDocument");
-};
-
-export const entityIsPersistable = (entity: string): boolean => {
-    return mx.meta.getEntity(entity).isPersistable();
-};
-
 export const savePostMethod = (
     dropperFile: FileDropperFile,
     obj: mendix.lib.MxObject