1
- import { Component , ReactNode , createElement } from "react" ;
1
+ import { Component , ReactNode , createElement , createRef } from "react" ;
2
2
import { findDOMNode } from "react-dom" ;
3
- import { hot } from "react-hot-loader/root" ;
4
3
import mime from "mime" ;
5
4
import {
6
5
createObject ,
7
6
deleteObjectGuid ,
8
7
commitObject ,
9
8
getObject
10
9
} from "@jeltemx/mendix-react-widget-utils/lib/objects" ;
11
- import { entityIsFileDocument , entityIsImage , entityIsPersistable } from "@jeltemx/mendix-react-widget-utils" ;
10
+ import { debug , entityIsFileDocument , entityIsImage , entityIsPersistable } from "@jeltemx/mendix-react-widget-utils" ;
12
11
import { saveDocument } from "@jeltemx/mendix-react-widget-utils/lib/documents" ;
13
12
14
13
import { FileDropper } from "./components/FileDropper" ;
@@ -31,6 +30,8 @@ export interface Action {
31
30
}
32
31
33
32
class FileDropperContainer extends Component < FileDropperContainerProps , { } > {
33
+ ref = createRef < HTMLDivElement > ( ) ;
34
+
34
35
store : FileDropperStore ;
35
36
private widgetId ?: string ;
36
37
private subscriptionHandles : number [ ] = [ ] ;
@@ -107,10 +108,17 @@ class FileDropperContainer extends Component<FileDropperContainerProps, {}> {
107
108
}
108
109
109
110
componentWillReceiveProps ( nextProps : FileDropperContainerProps ) : void {
110
- if ( ! this . widgetId ) {
111
- const domNode = findDOMNode ( this ) ;
112
- // @ts -ignore
113
- this . widgetId = domNode . getAttribute ( "widgetId" ) || undefined ;
111
+ if ( ! this . widgetId && this . ref . current ) {
112
+ try {
113
+ const domNode = findDOMNode ( this ) ;
114
+ // @ts -ignore
115
+ this . widgetId = domNode . getAttribute ( "widgetId" ) || undefined ;
116
+ } catch ( error ) {
117
+ const domNode = findDOMNode ( this . ref . current ) ;
118
+ // @ts -ignore
119
+ const alternativeID = domNode . getAttribute ( "data-mendix-id" ) || undefined ;
120
+ this . widgetId = alternativeID ;
121
+ }
114
122
}
115
123
this . store . setContext ( nextProps . mxObject || null ) ;
116
124
}
@@ -164,7 +172,11 @@ class FileDropperContainer extends Component<FileDropperContainerProps, {}> {
164
172
uiDeleteFileText
165
173
} ;
166
174
167
- return < FileDropper store = { this . store } uiProps = { ui } /> ;
175
+ return (
176
+ < div ref = { this . ref } >
177
+ < FileDropper store = { this . store } uiProps = { ui } />
178
+ </ div >
179
+ ) ;
168
180
}
169
181
170
182
async saveFile ( file : FileDropperFile ) : Promise < boolean > {
@@ -432,11 +444,9 @@ class FileDropperContainer extends Component<FileDropperContainerProps, {}> {
432
444
}
433
445
434
446
private debug ( ...args : any ) : void {
435
- const id = this . props . friendlyId || this . widgetId ;
436
- if ( window . logger ) {
437
- window . logger . debug ( `${ id } :` , ...args ) ;
438
- }
447
+ const id = this . props . friendlyId || this . widgetId || "mendix.filedropper.FileDropper" ;
448
+ debug ( id , ...args ) ;
439
449
}
440
450
}
441
451
442
- export default hot ( FileDropperContainer ) ;
452
+ export default FileDropperContainer ;
0 commit comments