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
   public static final int COMMAND_POST_MESSAGE = 5;
110
   public static final int COMMAND_POST_MESSAGE = 5;
111
   public static final int COMMAND_INJECT_JAVASCRIPT = 6;
111
   public static final int COMMAND_INJECT_JAVASCRIPT = 6;
112
   public static final int COMMAND_LOAD_URL = 7;
112
   public static final int COMMAND_LOAD_URL = 7;
113
+  public static final int COMMAND_FOCUS = 8;
113
   protected static final String REACT_CLASS = "RNCWebView";
114
   protected static final String REACT_CLASS = "RNCWebView";
114
   protected static final String HTML_ENCODING = "UTF-8";
115
   protected static final String HTML_ENCODING = "UTF-8";
115
   protected static final String HTML_MIME_TYPE = "text/html";
116
   protected static final String HTML_MIME_TYPE = "text/html";
511
   @Override
512
   @Override
512
   public @Nullable
513
   public @Nullable
513
   Map<String, Integer> getCommandsMap() {
514
   Map<String, Integer> getCommandsMap() {
514
-    return MapBuilder.of(
515
+    Map map = MapBuilder.of(
515
       "goBack", COMMAND_GO_BACK,
516
       "goBack", COMMAND_GO_BACK,
516
       "goForward", COMMAND_GO_FORWARD,
517
       "goForward", COMMAND_GO_FORWARD,
517
       "reload", COMMAND_RELOAD,
518
       "reload", COMMAND_RELOAD,
520
       "injectJavaScript", COMMAND_INJECT_JAVASCRIPT,
521
       "injectJavaScript", COMMAND_INJECT_JAVASCRIPT,
521
       "loadUrl", COMMAND_LOAD_URL
522
       "loadUrl", COMMAND_LOAD_URL
522
     );
523
     );
524
+    map.put("requestFocus", COMMAND_FOCUS);
525
+    return map;
523
   }
526
   }
524
 
527
 
525
   @Override
528
   @Override
567
         }
570
         }
568
         root.loadUrl(args.getString(0));
571
         root.loadUrl(args.getString(0));
569
         break;
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
      * Executes the JavaScript string.
34
      * Executes the JavaScript string.
35
      */
35
      */
36
     injectJavaScript: (script: string) => void;
36
     injectJavaScript: (script: string) => void;
37
+
38
+    /**
39
+     * Focuses on WebView redered page.
40
+     */
41
+    requestFocus: () => void;
37
 }
42
 }
38
 
43
 
39
 export {WebView};
44
 export {WebView};

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

105
     );
105
     );
106
   };
106
   };
107
 
107
 
108
+  requestFocus = () => {
109
+    UIManager.dispatchViewManagerCommand(
110
+        this.getWebViewHandle(),
111
+        this.getCommands().requestFocus,
112
+        null,
113
+    );
114
+  };
115
+
108
   postMessage = (data: string) => {
116
   postMessage = (data: string) => {
109
     UIManager.dispatchViewManagerCommand(
117
     UIManager.dispatchViewManagerCommand(
110
       this.getWebViewHandle(),
118
       this.getWebViewHandle(),

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

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
    * Posts a message to the web view, which will emit a `message` event.
179
    * Posts a message to the web view, which will emit a `message` event.
169
    * Accepts one argument, `data`, which must be a string.
180
    * Accepts one argument, `data`, which must be a string.

+ 1
- 0
src/WebViewTypes.ts View File

18
   postMessage: Function;
18
   postMessage: Function;
19
   injectJavaScript: Function;
19
   injectJavaScript: Function;
20
   loadUrl: Function;
20
   loadUrl: Function;
21
+  requestFocus: Function;
21
 }
22
 }
22
 
23
 
23
 export interface CustomUIManager extends UIManagerStatic {
24
 export interface CustomUIManager extends UIManagerStatic {