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
Unified 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 
 } from 'react-native';
 20 
 } from 'react-native';
21
21
22 
 import InlineWebView from './examples/InlineWebView';
 22 
 import InlineWebView from './examples/InlineWebView';
23 
+import Alerts from './examples/Alerts';
23
24
24 
 const TESTS = {
 25 
 const TESTS = {
25 
   InlineWebView: {
 26 
   InlineWebView: {
30 
       return <InlineWebView />;
 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 
 type Props = {};
 44 
 type Props = {};
69
78
70 
         <View style={styles.testPickerContainer}>
 79 
         <View style={styles.testPickerContainer}>
71 
           <Button
 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 
           <Button
 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 
         </View>
 90 
         </View>
82
91

+ 88
- 0
example/examples/Alerts.js View File

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 
   self.opaque = _webView.opaque = (alpha == 1.0);
 429 
   self.opaque = _webView.opaque = (alpha == 1.0);
430 
   _webView.scrollView.backgroundColor = backgroundColor;
 430 
   _webView.scrollView.backgroundColor = backgroundColor;
431 
   _webView.backgroundColor = backgroundColor;
 431 
   _webView.backgroundColor = backgroundColor;
432 
+#else
433 
+  // TODO
432 
 #endif // !TARGET_OS_OSX
 434 
 #endif // !TARGET_OS_OSX
433 
 }
 435 
 }
434
436
819 
     }]];
 821 
     }]];
820 
     [[self topViewController] presentViewController:alert animated:YES completion:NULL];
 822 
     [[self topViewController] presentViewController:alert animated:YES completion:NULL];
821 
 #else
 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 
 #endif // !TARGET_OS_OSX
 829 
 #endif // !TARGET_OS_OSX
824 
 }
 830 
 }
825
831
837 
     }]];
 843 
     }]];
838 
     [[self topViewController] presentViewController:alert animated:YES completion:NULL];
 844 
     [[self topViewController] presentViewController:alert animated:YES completion:NULL];
839 
 #else
 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 
 #endif // !TARGET_OS_OSX
 854 
 #endif // !TARGET_OS_OSX
842 
 }
 855 
 }
843
856
861 
     alert.preferredAction = okAction;
 874 
     alert.preferredAction = okAction;
862 
     [[self topViewController] presentViewController:alert animated:YES completion:NULL];
 875 
     [[self topViewController] presentViewController:alert animated:YES completion:NULL];
863 
 #else
 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 
 #endif // !TARGET_OS_OSX
 898 
 #endif // !TARGET_OS_OSX
866 
 }
 899 
 }
867
900