npm
/
react-native-webview
Watch 11
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 141 Wiki Activity
Browse Source

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

Tom Underhill 5 years ago
parent
290c68a819
commit
fca2ba5d48
3 changed files with 139 additions and 9 deletions
Split View Show Diff Stats
  1. 15
    6
      example/App.js
  2. 88
    0
      example/examples/Alerts.js
  3. 36
    3
      ios/RNCWebView.m

+ 15
- 6
example/App.js View File 

@@ -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 View File 

@@ -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 View File 

@@ -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