浏览代码

fix(feedback): Scroll to the top when opening feedback dialog

master
Vlad Piersec 4 年前
父节点
当前提交
380ef3da0b

+ 14
- 11
react/features/base/dialog/components/web/StatelessDialog.js 查看文件

28
  *
28
  *
29
  * @static
29
  * @static
30
  */
30
  */
31
-type Props = {
32
-    ...DialogProps,
31
+type Props = DialogProps & {
33
 
32
 
34
     /**
33
     /**
35
      * Custom dialog header that replaces the standard heading.
34
      * Custom dialog header that replaces the standard heading.
77
      */
76
      */
78
     onDecline?: Function,
77
     onDecline?: Function,
79
 
78
 
79
+    /**
80
+     * Callback invoked when setting the ref of the Dialog.
81
+     */
82
+    onDialogRef?: Function,
83
+
80
     /**
84
     /**
81
      * Disables rendering of the submit button.
85
      * Disables rendering of the submit button.
82
      */
86
      */
127
         this._onKeyPress = this._onKeyPress.bind(this);
131
         this._onKeyPress = this._onKeyPress.bind(this);
128
         this._onSubmit = this._onSubmit.bind(this);
132
         this._onSubmit = this._onSubmit.bind(this);
129
         this._renderFooter = this._renderFooter.bind(this);
133
         this._renderFooter = this._renderFooter.bind(this);
130
-        this._setDialogElement = this._setDialogElement.bind(this);
134
+        this._onDialogRef = this._onDialogRef.bind(this);
131
     }
135
     }
132
 
136
 
133
     /**
137
     /**
166
                 width = { width || 'medium' }>
170
                 width = { width || 'medium' }>
167
                 <div
171
                 <div
168
                     onKeyPress = { this._onKeyPress }
172
                     onKeyPress = { this._onKeyPress }
169
-                    ref = { this._setDialogElement }>
173
+                    ref = { this._onDialogRef }>
170
                     <form
174
                     <form
171
                         className = 'modal-dialog-form'
175
                         className = 'modal-dialog-form'
172
                         id = 'modal-dialog-form'
176
                         id = 'modal-dialog-form'
319
         );
323
         );
320
     }
324
     }
321
 
325
 
322
-    _setDialogElement: (?HTMLElement) => void;
326
+    _onDialogRef: (?Element) => void;
323
 
327
 
324
     /**
328
     /**
325
-     * Sets the instance variable for the div containing the component's dialog
326
-     * element so it can be accessed directly.
329
+     * Callback invoked when setting the ref of the dialog's child passing the Modal ref.
330
+     * It is done this way because we cannot directly access the ref of the Modal component.
327
      *
331
      *
328
-     * @param {HTMLElement} element - The DOM element for the component's
329
-     * dialog.
332
+     * @param {HTMLElement} element - The DOM element for the dialog.
330
      * @private
333
      * @private
331
      * @returns {void}
334
      * @returns {void}
332
      */
335
      */
333
-    _setDialogElement(element: ?HTMLElement) {
334
-        this._dialogElement = element;
336
+    _onDialogRef(element: ?Element) {
337
+        this.props.onDialogRef && this.props.onDialogRef(element && element.parentNode);
335
     }
338
     }
336
 
339
 
337
     _onKeyPress: (Object) => void;
340
     _onKeyPress: (Object) => void;

+ 13
- 0
react/features/feedback/components/FeedbackDialog.web.js 查看文件

36
     'feedback.veryGood'
36
     'feedback.veryGood'
37
 ];
37
 ];
38
 
38
 
39
+type Scrollable = {
40
+    scroll: Function
41
+}
42
+
39
 /**
43
 /**
40
  * The type of the React {@code Component} props of {@link FeedbackDialog}.
44
  * The type of the React {@code Component} props of {@link FeedbackDialog}.
41
  */
45
  */
171
         this._onScoreContainerMouseLeave
175
         this._onScoreContainerMouseLeave
172
             = this._onScoreContainerMouseLeave.bind(this);
176
             = this._onScoreContainerMouseLeave.bind(this);
173
         this._onSubmit = this._onSubmit.bind(this);
177
         this._onSubmit = this._onSubmit.bind(this);
178
+
179
+        // On some mobile browsers opening Feedback dialog scrolls down the whole content because of the keyboard.
180
+        // By scrolling to the top we prevent hiding the feedback stars so the user knows those exist.
181
+        this._onScrollTop = (node: ?Scrollable) => {
182
+            node && node.scroll && node.scroll(0, 0);
183
+        };
174
     }
184
     }
175
 
185
 
176
     /**
186
     /**
244
             <Dialog
254
             <Dialog
245
                 okKey = 'dialog.Submit'
255
                 okKey = 'dialog.Submit'
246
                 onCancel = { this._onCancel }
256
                 onCancel = { this._onCancel }
257
+                onDialogRef = { this._onScrollTop }
247
                 onSubmit = { this._onSubmit }
258
                 onSubmit = { this._onSubmit }
248
                 titleKey = 'feedback.rateExperience'>
259
                 titleKey = 'feedback.rateExperience'>
249
                 <div className = 'feedback-dialog'>
260
                 <div className = 'feedback-dialog'>
364
 
375
 
365
         return true;
376
         return true;
366
     }
377
     }
378
+
379
+    _onScrollTop: (node: ?Scrollable) => void;
367
 }
380
 }
368
 
381
 
369
 /**
382
 /**

正在加载...
取消
保存