Copy notifications code to sample (#147)

* Copy notifications code to sample

* Button is not needed

Author: dunhor

samples/RNWinRTTestApp/App.tsx

@@ -1,4 +1,4 @@
-// Copyright (c) Microsoft Corporation. 
+// Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
 import React from "react";
@@ -10,18 +10,21 @@ import {
     View,
     Text,
     StatusBar,
+    Pressable,
 } from "react-native";
 
 import {
     Colors,
     Header,
 } from "react-native/Libraries/NewAppScreen";
 
+import {showNotification} from './Notifications'
+
 async function updateJumpListAsync(): Promise<void> {
     try {
         const StartScreenApi = Windows.UI.StartScreen;
         const jumplist = await StartScreenApi.JumpList.loadCurrentAsync();
-        
+
         jumplist.systemGroupKind = StartScreenApi.JumpListSystemGroupKind.recent;
 
         const items = jumplist.items;
@@ -97,7 +100,7 @@ async function getPictureThumbnailAsync(): Promise<string> {
 
         const library = StorageApi.KnownFolders.picturesLibrary;
         let files = await library.getFilesAsync();
-        
+
         let file: StorageApi.StorageFile | null = null;
         if (files.size > 0) {
             file = files.getAt(0);
@@ -199,6 +202,27 @@ const App = () => {
                             </Text>
                         </View>
                     </View>
+                    <View style={styles.body}>
+                        <View style={styles.sectionContainer}>
+                            <Text style={styles.sectionTitle}>Windows.UI.Notifications Example</Text>
+                            <View style={{ flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center' }}>
+                                <Text style={[{ paddingRight: 10 }, styles.sectionDescription]}>Click the button to show a notification: </Text>
+                                <Pressable style={styles.sectionDescriptionButton} onPress={() => {
+                                    showNotification({
+                                        template: Windows.UI.Notifications.ToastTemplateType.toastImageAndText01,
+                                        // The template schema can be found at https://docs.microsoft.com/previous-versions/windows/apps/hh761494(v=win.10)
+                                        text: "hello world",
+                                        image: {
+                                            src: "https://microsoft.github.io/react-native-windows/img/header_logo.svg",
+                                            alt: "React logo",
+                                        }
+                                    });
+                                }}>
+                                    <Text style={styles.sectionDescriptionButtonText}>Press</Text>
+                                </Pressable>
+                            </View>
+                        </View>
+                    </View>
                     <View style={styles.body}>
                         <View style={styles.sectionContainer}>
                             <Text style={styles.sectionTitle}>Windows.Storage API + picturesLibrary capability Example</Text>
@@ -241,6 +265,19 @@ const styles = StyleSheet.create({
         fontWeight: "400",
         color: Colors.dark,
     },
+    sectionDescriptionButton: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 4,
+        paddingHorizontal: 24,
+        borderRadius: 1,
+        backgroundColor: Colors.light,
+    },
+    sectionDescriptionButtonText: {
+        fontSize: 18,
+        fontWeight: "400",
+        color: Colors.dark,
+    },
     highlight: {
         fontWeight: "700",
     },

samples/RNWinRTTestApp/Notifications.js

@@ -0,0 +1,56 @@
+
+const Notifications = Windows.UI.Notifications;
+const ToastTemplateType = Notifications.ToastTemplateType;
+const ToastNotificationManager = Notifications.ToastNotificationManager;
+const ToastNotification = Notifications.ToastNotification;
+
+export function showNotification(notification) {
+  var type = ToastTemplateType.toastText01;
+
+  var obj = {};
+  if (typeof(notification) == 'string') {
+    obj['text'] = notification;
+  } else {
+    obj = notification;
+  }
+
+  if (obj.template != undefined) {
+    type = obj.template;
+  }
+
+  var xml = ToastNotificationManager.getTemplateContent(type);
+  for (var tagName in obj) {
+    var xmlElements = xml.getElementsByTagName(tagName);
+    var value = obj[tagName];
+    if (typeof(value) == 'string') {
+      fillXmlElements(xml, xmlElements, [value]);
+    } else if (Array.isArray(value)) {
+      fillXmlElements(xml, xmlElements, value);
+    } else if (typeof(value) == 'object') {
+      fillXmlElements(xml, xmlElements, [value]);
+    }
+  }
+
+  var toast = new ToastNotification(xml);
+  ToastNotificationManager.createToastNotifier().show(toast);
+}
+
+function fillXmlElements(xml, xmlElements, arr) {
+  var i = 0;
+  for (var arrValue of arr) {
+    var node = xmlElements[i++];
+    if (typeof(arrValue) == 'string') {
+      node.appendChild(xml.createTextNode(arrValue));
+    } else if (typeof(arrValue) == 'object') {
+      for (var attrName in arrValue) {
+        var attr = node.attributes.getNamedItem(attrName);
+        if (!attr) {
+          attr = xml.createAttribute(attrName);
+          node.attributes.setNamedItem(attr);
+        }
+
+        attr.nodeValue = arrValue[attrName];
+      }
+    }
+  }
+}

samples/RNWinRTTestApp/windows/WinRTTurboModule/WinRTTurboModule.vcxproj

@@ -21,7 +21,7 @@
     <CppWinRTRootNamespaceAutoMerge>true</CppWinRTRootNamespaceAutoMerge>
     <CppWinRTGenerateWindowsMetadata>true</CppWinRTGenerateWindowsMetadata>
     <CppWinRTParameters>-base</CppWinRTParameters>
-    <RnWinRTParameters>-include Windows.Foundation -include Windows.UI.StartScreen -include Windows.UI.ViewManagement -include Windows.Storage -include Windows.Security.Cryptography.CryptographicBuffer -include Windows.Security.Cryptography.ICryptographicBufferStatics -include Windows.Security.Cryptography.BinaryStringEncoding</RnWinRTParameters>
+    <RnWinRTParameters>-include Windows.Foundation -include Windows.UI.StartScreen -include Windows.UI.ViewManagement -include Windows.Storage -include Windows.Security.Cryptography.CryptographicBuffer -include Windows.Security.Cryptography.ICryptographicBufferStatics -include Windows.Security.Cryptography.BinaryStringEncoding -include Windows.UI.Notifications -include Windows.Data.Xml.Dom</RnWinRTParameters>
   </PropertyGroup>
   <PropertyGroup Label="ReactNativeWindowsProps">
     <ReactNativeWindowsDir Condition="'$(ReactNativeWindowsDir)' == ''">$([MSBuild]::GetDirectoryNameOfFileAbove($(SolutionDir), 'node_modules\react-native-windows\package.json'))\node_modules\react-native-windows\</ReactNativeWindowsDir>