@@ -59,7 +59,8 @@ export interface IFrameDialogProps extends IDialogProps {
59
59
}
60
60
61
61
export interface IFrameDialogState {
62
- dialogId : string ;
62
+ dialogId : string | null ;
63
+ isStylingSet ?: boolean ;
63
64
}
64
65
65
66
/**
@@ -108,11 +109,21 @@ export class IFrameDialog extends React.Component<IFrameDialogProps, IFrameDialo
108
109
name,
109
110
sandbox,
110
111
scrolling,
111
- seamless
112
+ seamless,
113
+ modalProps,
114
+ className
112
115
} = this . props ;
116
+
117
+ let dlgModalProps = {
118
+ ...modalProps ,
119
+ onLayerDidMount : ( ) => { this . setDialogStyling ( ) ; }
120
+ } ;
121
+
113
122
return (
114
- < Dialog className = { `${ this . state . dialogId } ${ this . props . className } ` }
115
- { ...omit ( this . props , 'className' ) } >
123
+ < Dialog
124
+ className = { `${ this . state . dialogId } ${ className || '' } ` }
125
+ modalProps = { dlgModalProps }
126
+ { ...omit ( this . props , 'className' , 'modalProps' ) } >
116
127
< IFrameDialogContent src = { this . props . url }
117
128
iframeOnLoad = { iframeOnLoad }
118
129
close = { this . props . onDismiss }
@@ -133,12 +144,19 @@ export class IFrameDialog extends React.Component<IFrameDialogProps, IFrameDialo
133
144
* Set the dialog style
134
145
*/
135
146
private setDialogStyling ( ) : void {
136
- if ( ! this . props . hidden && this . state . dialogId ) {
147
+ if ( ! this . state . isStylingSet && ! this . props . hidden && this . state . dialogId ) {
137
148
const element = document . querySelector ( `.${ this . state . dialogId } .ms-Dialog-main` ) as HTMLElement ;
138
- if ( element && this . props . width ) {
139
- element . style . width = this . props . width ;
140
- element . style . minWidth = this . props . width ;
141
- element . style . maxWidth = this . props . width ;
149
+ const {
150
+ width
151
+ } = this . props ;
152
+ if ( element && width ) {
153
+ element . style . width = width ;
154
+ element . style . minWidth = width ;
155
+ element . style . maxWidth = width ;
156
+
157
+ this . setState ( {
158
+ isStylingSet : true
159
+ } ) ;
142
160
}
143
161
}
144
162
}
0 commit comments