瀏覽代碼

Implemented Alerts for macOS. Added an Alert test to test app.

Tom Underhill 5 年之前
父節點
當前提交
fca2ba5d48
共有 3 個文件被更改,包括 139 次插入9 次删除
  1. 15
    6
      example/App.js
  2. 88
    0
      example/examples/Alerts.js
  3. 36
    3
      ios/RNCWebView.m

+ 15
- 6
example/App.js 查看文件

@@ -20,6 +20,7 @@ import {
20 20
 } from 'react-native';
21 21
 
22 22
 import InlineWebView from './examples/InlineWebView';
23
+import Alerts from './examples/Alerts';
23 24
 
24 25
 const TESTS = {
25 26
   InlineWebView: {
@@ -30,6 +31,14 @@ const TESTS = {
30 31
       return <InlineWebView />;
31 32
     },
32 33
   },
34
+  Alerts: {
35
+    title: 'Alerts',
36
+    testId: 'alerts',
37
+    description: 'Alerts tests',
38
+    render() {
39
+      return <Alerts />;
40
+    },
41
+  },
33 42
 };
34 43
 
35 44
 type Props = {};
@@ -69,14 +78,14 @@ export default class App extends Component<Props, State> {
69 78
 
70 79
         <View style={styles.testPickerContainer}>
71 80
           <Button
72
-            testID="testType_getSetClear"
73
-            title="Get/Set/Clear"
74
-            onPress={() => this._changeTest('GetSetClear')}
81
+            testID="testType_inlineWebView"
82
+            title="InlineWebView"
83
+            onPress={() => this._changeTest('InlineWebView')}
75 84
           />
76 85
           <Button
77
-            testID="testType_mergeItem"
78
-            title="Merge Item"
79
-            onPress={() => this._changeTest('MergeItem')}
86
+            testID="testType_alerts"
87
+            title="Alerts"
88
+            onPress={() => this._changeTest('Alerts')}
80 89
           />
81 90
         </View>
82 91
 

+ 88
- 0
example/examples/Alerts.js 查看文件

@@ -0,0 +1,88 @@
1
+/**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @format
8
+ * @flow
9
+ */
10
+
11
+import React, {Component} from 'react';
12
+import {Text, View} from 'react-native';
13
+
14
+import WebView from 'react-native-webview';
15
+
16
+const HTML = `
17
+<!DOCTYPE html>\n
18
+<html>
19
+  <head>
20
+    <title>Alerts</title>
21
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
22
+    <meta name="viewport" content="width=320, user-scalable=no">
23
+    <style type="text/css">
24
+      body {
25
+        margin: 0;
26
+        padding: 0;
27
+        font: 62.5% arial, sans-serif;
28
+        background: #ccc;
29
+      }
30
+      h1 {
31
+        padding: 45px;
32
+        margin: 0;
33
+        text-align: center;
34
+        color: #33f;
35
+      }
36
+    </style>
37
+  </head>
38
+  <body>
39
+    <button onclick="showAlert()">Show alert</button>
40
+    <button onclick="showConfirm()">Show confirm</button>
41
+    <button onclick="showPrompt()">Show prompt</button>
42
+    <p id="demo"></p>    
43
+    <script>
44
+      function showAlert() {
45
+        alert("Hello! I am an alert box!");
46
+        document.getElementById("demo").innerHTML = "Alert dismissed!";
47
+      }
48
+      function showConfirm() {
49
+        var response;
50
+        if (confirm("Press a button!")) {
51
+          response = "You pressed OK on confirm!";
52
+        } else {
53
+          response = "You pressed Cancel on confirm!";
54
+        }
55
+        document.getElementById("demo").innerHTML = response;
56
+      }
57
+      function showPrompt() {
58
+        var message;
59
+        const name = prompt("Please enter your name", "Name");
60
+        if (name !== null) {
61
+          message = "Hello " + name;
62
+        } else {
63
+          message = "You pressed Cancel on prompt!";
64
+        }
65
+        document.getElementById("demo").innerHTML = message;
66
+      }
67
+    </script>
68
+  </body>
69
+</html>
70
+`;
71
+
72
+type Props = {};
73
+type State = {};
74
+
75
+export default class Alerts extends Component<Props, State> {
76
+  state = {};
77
+
78
+  render() {
79
+    return (
80
+      <View style={{ height: 120 }}>
81
+        <WebView
82
+          source={{html: HTML}}
83
+          automaticallyAdjustContentInsets={false}
84
+        />
85
+      </View>
86
+    );
87
+  }
88
+}

+ 36
- 3
ios/RNCWebView.m 查看文件

@@ -429,6 +429,8 @@ static NSDictionary* customCertificatesForHost;
429 429
   self.opaque = _webView.opaque = (alpha == 1.0);
430 430
   _webView.scrollView.backgroundColor = backgroundColor;
431 431
   _webView.backgroundColor = backgroundColor;
432
+#else
433
+  // TODO
432 434
 #endif // !TARGET_OS_OSX
433 435
 }
434 436
 
@@ -819,7 +821,11 @@ static NSDictionary* customCertificatesForHost;
819 821
     }]];
820 822
     [[self topViewController] presentViewController:alert animated:YES completion:NULL];
821 823
 #else
822
-  // TODO
824
+  NSAlert *alert = [[NSAlert alloc] init];
825
+  [alert setMessageText:message];
826
+  [alert beginSheetModalForWindow:[NSApp keyWindow] completionHandler:^(__unused NSModalResponse response){
827
+    completionHandler();
828
+  }];
823 829
 #endif // !TARGET_OS_OSX
824 830
 }
825 831
 
@@ -837,7 +843,14 @@ static NSDictionary* customCertificatesForHost;
837 843
     }]];
838 844
     [[self topViewController] presentViewController:alert animated:YES completion:NULL];
839 845
 #else
840
-  // TODO
846
+  NSAlert *alert = [[NSAlert alloc] init];
847
+  [alert setMessageText:message];
848
+  [alert addButtonWithTitle:NSLocalizedString(@"OK", @"OK button")];
849
+  [alert addButtonWithTitle:NSLocalizedString(@"Cancel", @"Cancel button")];
850
+  void (^callbacksHandlers)(NSModalResponse response) = ^void(NSModalResponse response) {
851
+    completionHandler(response == NSAlertFirstButtonReturn);
852
+  };
853
+  [alert beginSheetModalForWindow:[NSApp keyWindow] completionHandler:callbacksHandlers];
841 854
 #endif // !TARGET_OS_OSX
842 855
 }
843 856
 
@@ -861,7 +874,27 @@ static NSDictionary* customCertificatesForHost;
861 874
     alert.preferredAction = okAction;
862 875
     [[self topViewController] presentViewController:alert animated:YES completion:NULL];
863 876
 #else
864
-  // TODO
877
+  NSAlert *alert = [[NSAlert alloc] init];
878
+  [alert setMessageText:prompt];
879
+  
880
+  const NSRect RCTSingleTextFieldFrame = NSMakeRect(0.0, 0.0, 275.0, 22.0);
881
+  NSTextField *textField = [[NSTextField alloc] initWithFrame:RCTSingleTextFieldFrame];
882
+  textField.cell.scrollable = YES;
883
+  if (@available(macOS 10.11, *)) {
884
+    textField.maximumNumberOfLines = 1;
885
+  }
886
+  textField.stringValue = defaultText;
887
+  [alert setAccessoryView:textField];
888
+
889
+  [alert addButtonWithTitle:NSLocalizedString(@"OK", @"OK button")];
890
+  [alert addButtonWithTitle:NSLocalizedString(@"Cancel", @"Cancel button")];
891
+  [alert beginSheetModalForWindow:[NSApp keyWindow] completionHandler:^(NSModalResponse response) {
892
+    if (response == NSAlertFirstButtonReturn) {
893
+      completionHandler([textField stringValue]);
894
+    } else {
895
+      completionHandler(nil);
896
+    }
897
+  }];
865 898
 #endif // !TARGET_OS_OSX
866 899
 }
867 900