Browse Source

Fix errors and add missing events

Kai Guo 4 years ago
parent
commit
bad02d2413

+ 15
- 9
src/WebView.windows.js View File

@@ -14,15 +14,18 @@
14 14
 
15 15
 'use strict';
16 16
 
17
-var React = require('react');
18
-var ReactNative = require('ReactNative');
19
-var StyleSheet = require('../../StyleSheet/StyleSheet');
20
-var UIManager = require('../../ReactNative/UIManager');
21
-var View = require('../View/View');
17
+import React from 'react';
18
+import {
19
+  UIManager,
20
+  View,
21
+  requireNativeComponent,
22
+  StyleSheet,
23
+  Image,
24
+  findNodeHandle
25
+} from 'react-native';
22 26
 
23 27
 var keyMirror = require('fbjs/lib/keyMirror');
24
-var requireNativeComponent = require('../../ReactNative/requireNativeComponent');
25
-var resolveAssetSource = require('../../Image/resolveAssetSource');
28
+const { resolveAssetSource } = Image;
26 29
 
27 30
 const createReactClass = require('create-react-class');
28 31
 
@@ -52,7 +55,7 @@ var WebView = createReactClass({
52 55
     };
53 56
   },
54 57
 
55
-  componentWillMount: function() {
58
+  componentDidMount: function() {
56 59
     if (this.props.startInLoadingState) {
57 60
       this.setState({viewState: WebViewState.LOADING});
58 61
     }
@@ -110,6 +113,9 @@ var WebView = createReactClass({
110 113
         onLoadingStart={this.onLoadingStart}
111 114
         onLoadingFinish={this.onLoadingFinish}
112 115
         onLoadingError={this.onLoadingError}
116
+        goBack={this.goBack}
117
+        goForward={this.goForward}
118
+        reload={this.reload}
113 119
         testID={this.props.testID}
114 120
       />
115 121
     );
@@ -158,7 +164,7 @@ var WebView = createReactClass({
158 164
 
159 165
   getWebViewHandle: function() {
160 166
     // eslint-disable-next-line react/no-string-refs
161
-    return ReactNative.findNodeHandle(this.refs[RCT_WEBVIEW_REF]);
167
+    return findNodeHandle(this.refs[RCT_WEBVIEW_REF]);
162 168
   },
163 169
 
164 170
   onLoadingStart: function(event) {

+ 32
- 32
windows/ReactNativeWebView/ReactNativeWebView.filters View File

@@ -1,33 +1,33 @@
1
-<?xml version="1.0" encoding="utf-8"?>
2
-<Project ToolsVersion="15.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
3
-  <ItemGroup>
4
-    <Filter Include="Resources">
5
-      <UniqueIdentifier>accd3aa8-1ba0-4223-9bbe-0c431709210b</UniqueIdentifier>
6
-      <Extensions>rc;ico;cur;bmp;dlg;rc2;rct;bin;rgs;gif;jpg;jpeg;jpe;resx;tga;tiff;tif;png;wav;mfcribbon-ms</Extensions>
7
-    </Filter>
8
-    <Filter Include="Generated Files">
9
-      <UniqueIdentifier>{926ab91d-31b4-48c3-b9a4-e681349f27f0}</UniqueIdentifier>
10
-    </Filter>
11
-  </ItemGroup>
12
-  <ItemGroup>
13
-    <ClCompile Include="pch.cpp" />
14
-    <ClCompile Include="$(GeneratedFilesDir)module.g.cpp" />
15
-    <ClCompile Include="ReactPackageProvider.cpp" />
16
-    <ClCompile Include="WebViewManager.cpp" />
17
-  </ItemGroup>
18
-  <ItemGroup>
19
-    <ClInclude Include="pch.h" />
20
-    <ClInclude Include="ReactPackageProvider.h" />
21
-    <ClInclude Include="WebViewManager.h" />
22
-  </ItemGroup>
23
-  <ItemGroup>
24
-    <None Include="ReactNativeWebView.def" />
25
-    <None Include="packages.config" />
26
-  </ItemGroup>
27
-  <ItemGroup>
28
-    <None Include="PropertySheet.props" />
29
-  </ItemGroup>
30
-  <ItemGroup>
31
-    <Midl Include="ReactPackageProvider.idl" />
32
-  </ItemGroup>
1
+<?xml version="1.0" encoding="utf-8"?>
2
+<Project ToolsVersion="15.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
3
+  <ItemGroup>
4
+    <Filter Include="Resources">
5
+      <UniqueIdentifier>accd3aa8-1ba0-4223-9bbe-0c431709210b</UniqueIdentifier>
6
+      <Extensions>rc;ico;cur;bmp;dlg;rc2;rct;bin;rgs;gif;jpg;jpeg;jpe;resx;tga;tiff;tif;png;wav;mfcribbon-ms</Extensions>
7
+    </Filter>
8
+    <Filter Include="Generated Files">
9
+      <UniqueIdentifier>{926ab91d-31b4-48c3-b9a4-e681349f27f0}</UniqueIdentifier>
10
+    </Filter>
11
+  </ItemGroup>
12
+  <ItemGroup>
13
+    <ClCompile Include="pch.cpp" />
14
+    <ClCompile Include="$(GeneratedFilesDir)module.g.cpp" />
15
+    <ClCompile Include="ReactPackageProvider.cpp" />
16
+    <ClCompile Include="WebViewManager.cpp" />
17
+  </ItemGroup>
18
+  <ItemGroup>
19
+    <ClInclude Include="pch.h" />
20
+    <ClInclude Include="ReactPackageProvider.h" />
21
+    <ClInclude Include="WebViewManager.h" />
22
+  </ItemGroup>
23
+  <ItemGroup>
24
+    <None Include="ReactNativeWebView.def" />
25
+    <None Include="packages.config" />
26
+  </ItemGroup>
27
+  <ItemGroup>
28
+    <None Include="PropertySheet.props" />
29
+  </ItemGroup>
30
+  <ItemGroup>
31
+    <Midl Include="ReactPackageProvider.idl" />
32
+  </ItemGroup>
33 33
 </Project>

+ 85
- 21
windows/ReactNativeWebView/ReactWebViewManager.cpp View File

@@ -20,7 +20,19 @@ namespace winrt::ReactNativeWebView::implementation {
20 20
     }
21 21
 
22 22
     winrt::FrameworkElement ReactWebViewManager::CreateView() noexcept {
23
-        return winrt::WebView();
23
+        auto webView = winrt::WebView();
24
+        m_webView = winrt::make_weak(webView);
25
+        RegisterEvents();
26
+        return webView;
27
+    }
28
+
29
+    void ReactWebViewManager::RegisterEvents() {
30
+        if (auto webView = m_webView.get()) {
31
+            m_navigationCompletedRevoker = webView.NavigationCompleted(
32
+                winrt::auto_revoke, [=](auto const& sender, auto const& args) {
33
+                    OnNavigationCompleted(sender, args);
34
+                });
35
+        }
24 36
     }
25 37
 
26 38
     // IViewManagerWithReactContext
@@ -48,44 +60,49 @@ namespace winrt::ReactNativeWebView::implementation {
48 60
             for (auto const& pair : propertyMap) {
49 61
                 auto const& propertyName = pair.first;
50 62
                 auto const& propertyValue = pair.second;
63
+
51 64
                 if (propertyName == "source") {
52 65
                     if (!propertyValue.IsNull()) {
53 66
                         auto const& srcMap = propertyValue.Object();
54
-                        auto uriString = srcMap.at("uri").String();
55
-                        auto const isPackagerAsset = srcMap.at("__packager_asset").Boolean();
56 67
 
68
+                        auto uriString = srcMap.at("uri").String();
57 69
                         // non-uri sources not yet supported
58 70
                         if (uriString.length() == 0) {
59 71
                             continue;
60 72
                         }
61 73
 
74
+                        bool isPackagerAsset = false;
75
+                        if (srcMap.find("__packager_asset") != srcMap.end()) {
76
+                            isPackagerAsset = srcMap.at("__packager_asset").Boolean();
77
+                        }
78
+
62 79
                         if (isPackagerAsset && uriString.find("assets") == 0) {
63 80
                             uriString.replace(0, 6, "ms-appx://");
64 81
                         }
65
-                        auto const uri = winrt::Uri(to_hstring(uriString));
66 82
 
67
-                        SetSource(webView, uri);
83
+                        SetSource(winrt::Uri(to_hstring(uriString)));
68 84
                     }
69 85
                 }
70 86
             }
71 87
         }
72 88
     }
73 89
 
74
-    void ReactWebViewManager::SetSource(winrt::WebView const& webView, winrt::Uri const& uri) {
75
-        auto const tag = webView.GetValue(winrt::FrameworkElement::TagProperty()).as<winrt::IPropertyValue>().GetInt64();
76
-
77
-        m_reactContext.DispatchEvent(
78
-            webView,
79
-            L"topLoadStart",
80
-            [tag](winrt::IJSValueWriter const& eventDataWriter) noexcept {
81
-                eventDataWriter.WriteObjectBegin();
82
-                {
83
-                    WriteProperty(eventDataWriter, L"target", tag);
84
-                }
85
-                eventDataWriter.WriteObjectEnd();
86
-            });
90
+    void ReactWebViewManager::SetSource(winrt::Uri const& uri) {
91
+        if (auto webView = m_webView.get()) {
92
+            auto tag = webView.GetValue(winrt::FrameworkElement::TagProperty()).as<winrt::IPropertyValue>().GetInt64();
93
+            m_reactContext.DispatchEvent(
94
+                webView,
95
+                L"topLoadingStart",
96
+                [tag](winrt::IJSValueWriter const& eventDataWriter) noexcept {
97
+                    eventDataWriter.WriteObjectBegin();
98
+                    {
99
+                        WriteProperty(eventDataWriter, L"target", tag);
100
+                    }
101
+                    eventDataWriter.WriteObjectEnd();
102
+                });
87 103
 
88
-        webView.Navigate(uri);
104
+            webView.Navigate(uri);
105
+        }
89 106
     }
90 107
 
91 108
     // IViewManagerWithExportedEventTypeConstants
@@ -95,10 +112,57 @@ namespace winrt::ReactNativeWebView::implementation {
95 112
 
96 113
     ConstantProvider ReactWebViewManager::ExportedCustomDirectEventTypeConstants() noexcept {
97 114
         return [](winrt::Microsoft::ReactNative::IJSValueWriter const& constantWriter) {
98
-            WriteCustomDirectEventTypeConstant(constantWriter, "onLoadStart");
115
+            WriteCustomDirectEventTypeConstant(constantWriter, "onLoadingStart");
99 116
             WriteCustomDirectEventTypeConstant(constantWriter, "onLoad");
100
-            WriteCustomDirectEventTypeConstant(constantWriter, "onLoadEnd");
117
+            WriteCustomDirectEventTypeConstant(constantWriter, "onLoadingFinish");
101 118
         };
102 119
     }
103 120
 
121
+    // IViewManagerWithCommands
122
+    IMapView<hstring, int64_t> ReactWebViewManager::Commands() noexcept {
123
+        auto commands = winrt::single_threaded_map<hstring, int64_t>();
124
+        commands.Insert(L"goForward", 0);
125
+        commands.Insert(L"goBack", 1);
126
+        commands.Insert(L"reload", 2);
127
+        return commands.GetView();
128
+    }
129
+
130
+    void ReactWebViewManager::DispatchCommand(
131
+        FrameworkElement const& view,
132
+        int64_t commandId,
133
+        winrt::Microsoft::ReactNative::IJSValueReader const& commandArgsReader) noexcept {
134
+        if (auto webView = view.try_as<winrt::WebView>()) {
135
+            switch (commandId) {
136
+            case 0: // goForward
137
+                webView.GoForward();
138
+                break;
139
+            case 1: // goBack
140
+                webView.GoBack();
141
+                break;
142
+            case 2: // reload
143
+                webView.Refresh();
144
+                break;
145
+            }
146
+        }
147
+    }
148
+
149
+    void ReactWebViewManager::OnNavigationCompleted(winrt::WebView const& webView, winrt::WebViewNavigationCompletedEventArgs const& args) {
150
+        m_reactContext.DispatchEvent(
151
+            webView,
152
+            L"topLoadingFinish",
153
+            [webView, args](winrt::IJSValueWriter const& eventDataWriter) noexcept {
154
+                eventDataWriter.WriteObjectBegin();
155
+                {
156
+                    auto tag = webView.GetValue(winrt::FrameworkElement::TagProperty()).as<winrt::IPropertyValue>().GetInt64();
157
+                    WriteProperty(eventDataWriter, L"canGoBack", webView.CanGoBack());
158
+                    WriteProperty(eventDataWriter, L"canGoForward", webView.CanGoForward());
159
+                    WriteProperty(eventDataWriter, L"loading", false);
160
+                    WriteProperty(eventDataWriter, L"target", tag);
161
+                    WriteProperty(eventDataWriter, L"title", webView.DocumentTitle());
162
+                    WriteProperty(eventDataWriter, L"url", args.Uri().ToString());
163
+                }
164
+                eventDataWriter.WriteObjectEnd();
165
+            });
166
+    }
167
+
104 168
 } // namespace winrt::ReactWebView::implementation

+ 15
- 3
windows/ReactNativeWebView/ReactWebViewManager.h View File

@@ -3,7 +3,6 @@
3 3
 
4 4
 #pragma once
5 5
 #include "winrt/Microsoft.ReactNative.h"
6
-#include <winrt/Windows.UI.Xaml.Media.h>
7 6
 #include "NativeModules.h"
8 7
 
9 8
 namespace winrt::ReactNativeWebView::implementation {
@@ -12,7 +11,8 @@ namespace winrt::ReactNativeWebView::implementation {
12 11
         winrt::Microsoft::ReactNative::IViewManager,
13 12
         winrt::Microsoft::ReactNative::IViewManagerWithReactContext,
14 13
         winrt::Microsoft::ReactNative::IViewManagerWithNativeProperties,
15
-        winrt::Microsoft::ReactNative::IViewManagerWithExportedEventTypeConstants> {
14
+        winrt::Microsoft::ReactNative::IViewManagerWithExportedEventTypeConstants,
15
+        winrt::Microsoft::ReactNative::IViewManagerWithCommands> {
16 16
     public:
17 17
         ReactWebViewManager();
18 18
         // IViewManager
@@ -36,9 +36,21 @@ namespace winrt::ReactNativeWebView::implementation {
36 36
         winrt::Microsoft::ReactNative::ConstantProvider ExportedCustomBubblingEventTypeConstants() noexcept;
37 37
         winrt::Microsoft::ReactNative::ConstantProvider ExportedCustomDirectEventTypeConstants() noexcept;
38 38
 
39
+        // IViewManagerWithCommands
40
+        winrt::Windows::Foundation::Collections::IMapView<winrt::hstring, int64_t> Commands() noexcept;
41
+
42
+        void DispatchCommand(
43
+            winrt::Windows::UI::Xaml::FrameworkElement const& view,
44
+            int64_t commandId,
45
+            winrt::Microsoft::ReactNative::IJSValueReader const& commandArgsReader) noexcept;
46
+
39 47
     private:
48
+        winrt::weak_ref<winrt::Windows::UI::Xaml::Controls::WebView> m_webView;
40 49
         winrt::Microsoft::ReactNative::IReactContext m_reactContext{ nullptr };
50
+        winrt::Windows::UI::Xaml::Controls::WebView::NavigationCompleted_revoker m_navigationCompletedRevoker{};
41 51
 
42
-        void SetSource(winrt::Windows::UI::Xaml::Controls::WebView const& webView, winrt::Windows::Foundation::Uri const& uri);
52
+        void RegisterEvents();
53
+        void SetSource(winrt::Windows::Foundation::Uri const& uri);
54
+        void OnNavigationCompleted(winrt::Windows::UI::Xaml::Controls::WebView const& sender, winrt::Windows::UI::Xaml::Controls::WebViewNavigationCompletedEventArgs const& args);
43 55
     };
44 56
 } // namespace winrt::ReactWebView::implementation

+ 1
- 0
windows/ReactNativeWebView/pch.h View File

@@ -4,4 +4,5 @@
4 4
 #include <winrt/Windows.Foundation.Collections.h>
5 5
 #include <winrt/Windows.UI.Xaml.h>
6 6
 #include <winrt/Windows.UI.Xaml.Controls.h>
7
+#include <winrt/Windows.UI.Xaml.Navigation.h>
7 8
 #include <winrt/Microsoft.ReactNative.h>