Browse Source

feat(focus): Add functionality to imperatively focus webview (#567)

*  - add focus functionality for devices without touch screen
 (faced problem while developing for android TV, cause there only remote controller for device)

* Reimplement as a ref method.

*  - remove redundant requestFocus
DemMarcupan 4 years ago
parent
commit
6f053bad7b

+ 7
- 1
android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java View File

@@ -110,6 +110,7 @@ public class RNCWebViewManager extends SimpleViewManager<WebView> {
110 110
   public static final int COMMAND_POST_MESSAGE = 5;
111 111
   public static final int COMMAND_INJECT_JAVASCRIPT = 6;
112 112
   public static final int COMMAND_LOAD_URL = 7;
113
+  public static final int COMMAND_FOCUS = 8;
113 114
   protected static final String REACT_CLASS = "RNCWebView";
114 115
   protected static final String HTML_ENCODING = "UTF-8";
115 116
   protected static final String HTML_MIME_TYPE = "text/html";
@@ -511,7 +512,7 @@ public class RNCWebViewManager extends SimpleViewManager<WebView> {
511 512
   @Override
512 513
   public @Nullable
513 514
   Map<String, Integer> getCommandsMap() {
514
-    return MapBuilder.of(
515
+    Map map = MapBuilder.of(
515 516
       "goBack", COMMAND_GO_BACK,
516 517
       "goForward", COMMAND_GO_FORWARD,
517 518
       "reload", COMMAND_RELOAD,
@@ -520,6 +521,8 @@ public class RNCWebViewManager extends SimpleViewManager<WebView> {
520 521
       "injectJavaScript", COMMAND_INJECT_JAVASCRIPT,
521 522
       "loadUrl", COMMAND_LOAD_URL
522 523
     );
524
+    map.put("requestFocus", COMMAND_FOCUS);
525
+    return map;
523 526
   }
524 527
 
525 528
   @Override
@@ -567,6 +570,9 @@ public class RNCWebViewManager extends SimpleViewManager<WebView> {
567 570
         }
568 571
         root.loadUrl(args.getString(0));
569 572
         break;
573
+      case COMMAND_FOCUS:
574
+        root.requestFocus();
575
+        break;
570 576
     }
571 577
   }
572 578
 

+ 5
- 0
index.d.ts View File

@@ -34,6 +34,11 @@ declare class WebView extends Component<WebViewProps> {
34 34
      * Executes the JavaScript string.
35 35
      */
36 36
     injectJavaScript: (script: string) => void;
37
+
38
+    /**
39
+     * Focuses on WebView redered page.
40
+     */
41
+    requestFocus: () => void;
37 42
 }
38 43
 
39 44
 export {WebView};

+ 8
- 0
src/WebView.android.tsx View File

@@ -105,6 +105,14 @@ class WebView extends React.Component<AndroidWebViewProps, State> {
105 105
     );
106 106
   };
107 107
 
108
+  requestFocus = () => {
109
+    UIManager.dispatchViewManagerCommand(
110
+        this.getWebViewHandle(),
111
+        this.getCommands().requestFocus,
112
+        null,
113
+    );
114
+  };
115
+
108 116
   postMessage = (data: string) => {
109 117
     UIManager.dispatchViewManagerCommand(
110 118
       this.getWebViewHandle(),

+ 11
- 0
src/WebView.ios.tsx View File

@@ -164,6 +164,17 @@ class WebView extends React.Component<IOSWebViewProps, State> {
164 164
     );
165 165
   };
166 166
 
167
+  /**
168
+   * Request focus on WebView rendered page.
169
+   */
170
+  requestFocus = () => {
171
+    UIManager.dispatchViewManagerCommand(
172
+        this.getWebViewHandle(),
173
+        this.getCommands().requestFocus,
174
+        null,
175
+    );
176
+  };
177
+
167 178
   /**
168 179
    * Posts a message to the web view, which will emit a `message` event.
169 180
    * Accepts one argument, `data`, which must be a string.

+ 1
- 0
src/WebViewTypes.ts View File

@@ -18,6 +18,7 @@ export interface WebViewCommands {
18 18
   postMessage: Function;
19 19
   injectJavaScript: Function;
20 20
   loadUrl: Function;
21
+  requestFocus: Function;
21 22
 }
22 23
 
23 24
 export interface CustomUIManager extends UIManagerStatic {