Add classnames to main component

Author: JelteMX

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "filedropper",
   "widgetName": "FileDropper",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Drop files in your Mendix Application",
   "copyright": "Mendix 2020",
   "author": "Jelte Lagendijk",
@@ -31,6 +31,7 @@
   "devDependencies": {
     "@mendix/pluggable-widgets-tools": "^8.7.2",
     "@types/big.js": "^4.0.5",
+    "@types/classnames": "^2.2.10",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^25.2.1",
@@ -49,6 +50,7 @@
     "@bem-react/classname": "^1.5.8",
     "@jeltemx/mendix-react-widget-utils": "^0.6.2",
     "axios": "^0.19.2",
+    "classnames": "^2.2.6",
     "core-js": "^3.6.5",
     "filesize": "^6.1.0",
     "md5": "^2.2.1",

package.json

@@ -121,6 +121,7 @@ class FileDropperContainer extends Component<FileDropperContainerProps, {}> {
 
     render(): ReactNode {
         const {
+            class: mainClasses,
             uiDeleteButtonGlyph,
             uiDeleteButtonStyle,
             uiSaveButtonGlyph,
@@ -150,6 +151,7 @@ class FileDropperContainer extends Component<FileDropperContainerProps, {}> {
         const uiDeleteFileText = this.props.textDeleteFileConfirm;
 
         const ui: UIProps = {
+            mainClasses,
             deleteButtonStyle,
             saveButtonStyle,
             errorButtonStyle,

src/FileDropper.tsx

@@ -64,6 +64,7 @@ export class preview extends Component<FileDropperContainerProps> {
 
     private getUIProps(props: FileDropperContainerProps): UIProps {
         const {
+            class: mainClasses,
             uiDeleteButtonGlyph,
             uiDeleteButtonStyle,
             uiSaveButtonGlyph,
@@ -93,6 +94,7 @@ export class preview extends Component<FileDropperContainerProps> {
         const uiDeleteFileText = this.props.textDeleteFileConfirm;
 
         return {
+            mainClasses,
             deleteButtonStyle,
             saveButtonStyle,
             errorButtonStyle,

src/FileDropper.webmodeler.tsx

@@ -1,7 +1,7 @@
 import { Component, ReactNode, createElement } from "react";
 import { observer } from "mobx-react";
+import classNames from "classnames";
 
-import { classes } from "../util/classes";
 import { FileDropperStore } from "../store/fileDropperStore";
 
 import { FileList, UIProps } from "./FileList";
@@ -40,7 +40,7 @@ export class FileDropper extends Component<FileDropperProps, {}> {
         const deleteAction = deleteFile.bind(store);
 
         return (
-            <div className={classes()}>
+            <div className={classNames("filedropper", uiProps.mainClasses)}>
                 <FileDropZone
                     onDrop={this.onDrop}
                     accept={accept}

src/components/FileDropper.tsx

@@ -19,6 +19,7 @@ export interface UIProgressBarColors {
 }
 
 export interface UIProps {
+    mainClasses: null | string;
     deleteButtonStyle: null | string;
     saveButtonStyle: null | string;
     errorButtonStyle: null | string;

src/components/FileList.tsx

@@ -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.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="FileDropper" version="1.3.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="FileDropper.xml"/>
         </widgetFiles>