ViewManager Command Updates

change/react-native-windows-2019-11-06-16-45-50-vmcommands.json

@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "ViewManager Command Updates * Added command to CustomUserControlViewManagerCPP, #3600 * Added support for simpler C# view manager commands signatures * Added support for object properties for view managers, #3613 * Added documentation for C++ view manager * Added documentation for ViewManager commands, #3599",
+  "packageName": "react-native-windows",
+  "email": "jthysell@microsoft.com",
+  "commit": "529a95bf145b1f25511874776724082ab8032caa",
+  "date": "2019-11-07T00:45:50.666Z"
+}

packages/microsoft-reactnative-sampleapps/index.windows.js

@@ -36,11 +36,6 @@ var getCallback = function(prefix) {
 };
 
 class SampleApp extends Component {
-  constructor(props) {
-    super(props);
-    this._CustomUserControlCSRef = React.createRef();
-  }
-
   componentDidMount() {
     this._TimedEventCSSub = SampleModuleCSEmitter.addListener('TimedEventCS', getCallback('SampleModuleCS.TimedEventCS() => '));
     this._TimedEventCPPSub = SampleModuleCPPEmitter.addListener('TimedEventCPP', getCallback('SampleModuleCPP.TimedEventCPP() => '));
@@ -130,11 +125,26 @@ class SampleApp extends Component {
   onPressCustomUserControlCS() {
     log('SampleApp.onPressCustomUserControlCS()');
 
+    var strArg = 'Hello World!';
+
     if (this._CustomUserControlCSRef)
     {
       const tag = findNodeHandle(this._CustomUserControlCSRef);
-      log(`tag: ${tag}`);
-      UIManager.dispatchViewManagerCommand(tag, UIManager.CustomUserControlCS.Commands.CustomCommand, ['Hello World!']);
+      log(`UIManager.dispatchViewManagerCommand(${tag}, CustomUserControlCS.CustomCommand, "${strArg}")`);
+      UIManager.dispatchViewManagerCommand(tag, UIManager.getViewManagerConfig('CustomUserControlCS').Commands.CustomCommand, strArg);
+    }
+  }
+
+  onPressCustomUserControlCPP() {
+    log('SampleApp.onPressCustomUserControlCPP()');
+
+    var strArg = 'Hello World!';
+
+    if (this._CustomUserControlCPPRef)
+    {
+      const tag = findNodeHandle(this._CustomUserControlCPPRef);
+      log(`UIManager.dispatchViewManagerCommand(${tag}, CustomUserControlCPP.CustomCommand, "${strArg}")`);
+      UIManager.dispatchViewManagerCommand(tag, UIManager.getViewManagerConfig('CustomUserControlCPP').Commands.CustomCommand, strArg);
     }
   }
 
@@ -154,7 +164,9 @@ class SampleApp extends Component {
         <CustomUserControlCS style={styles.customcontrol} label="CustomUserControlCS!" ref={(ref) => { this._CustomUserControlCSRef = ref; }} />
         <Button onPress={() => { this.onPressCustomUserControlCS(); }} title="Call CustomUserControlCS Commands!" />
 
-        <CustomUserControlCPP style={styles.customcontrol} label="CustomUserControlCPP!" />
+        <CustomUserControlCPP style={styles.customcontrol} label="CustomUserControlCPP!" ref={(ref) => { this._CustomUserControlCPPRef = ref; }} />
+        <Button onPress={() => { this.onPressCustomUserControlCPP(); }} title="Call CustomUserControlCPP Commands!" />
+
         <Text style={styles.instructions}>
           Hello from Microsoft!
         </Text>

packages/microsoft-reactnative-sampleapps/windows/SampleAppCPP/DebugConsole.h

@@ -12,8 +12,7 @@ REACT_MODULE(DebugConsole);
 struct DebugConsole {
   REACT_METHOD(Log);
   void Log(std::string message) noexcept {
-    std::string output = message;
-    output.append("\n");
+    std::string output = message + "\n";
     OutputDebugStringA(output.c_str());
   }
 };

packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/CustomUserControlViewManagerCPP.cpp

@@ -5,6 +5,7 @@
 #include "CustomUserControlViewManagerCPP.h"
 
 #include "CustomUserControlCPP.h"
+#include "DebugHelpers.h"
 
 using namespace winrt;
 using namespace Microsoft::ReactNative::Bridge;
@@ -23,8 +24,7 @@ hstring CustomUserControlViewManagerCPP::Name() noexcept {
 }
 
 FrameworkElement CustomUserControlViewManagerCPP::CreateView() noexcept {
-  auto view = winrt::SampleLibraryCPP::CustomUserControlCPP();
-  return view;
+  return winrt::SampleLibraryCPP::CustomUserControlCPP();
 }
 
 // IViewManagerWithNativeProperties
@@ -70,4 +70,26 @@ void CustomUserControlViewManagerCPP::UpdateProperties(
   }
 }
 
+// IViewManagerWithCommands
+IMapView<hstring, int64_t> CustomUserControlViewManagerCPP::Commands() noexcept {
+  auto commands = winrt::single_threaded_map<hstring, int64_t>();
+  commands.Insert(L"CustomCommand", 0);
+  return commands.GetView();
+}
+
+void CustomUserControlViewManagerCPP::DispatchCommand(
+    FrameworkElement const &view,
+    int64_t commandId,
+    IVectorView<IInspectable> commandArgs) noexcept {
+  if (auto control = view.try_as<winrt::SampleLibraryCPP::CustomUserControlCPP>()) {
+    if (commandId == 0) {
+      std::string arg = std::to_string(winrt::unbox_value<int64_t>(view.Tag()));
+      arg.append(", \"");
+      arg.append(winrt::to_string(winrt::unbox_value<hstring>(commandArgs.GetAt(0))));
+      arg.append("\"");
+      ::SampleLibraryCPP::DebugWriteLine(to_string(Name()), "CustomCommand", arg);
+    }
+  }
+}
+
 } // namespace winrt::SampleLibraryCPP::implementation

packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/CustomUserControlViewManagerCPP.h

@@ -10,7 +10,8 @@ namespace winrt::SampleLibraryCPP::implementation {
 struct CustomUserControlViewManagerCPP : winrt::implements<
                                              CustomUserControlViewManagerCPP,
                                              winrt::Microsoft::ReactNative::Bridge::IViewManager,
-                                             winrt::Microsoft::ReactNative::Bridge::IViewManagerWithNativeProperties> {
+                                             winrt::Microsoft::ReactNative::Bridge::IViewManagerWithNativeProperties,
+                                             winrt::Microsoft::ReactNative::Bridge::IViewManagerWithCommands> {
  public:
   CustomUserControlViewManagerCPP() = default;
 
@@ -28,6 +29,15 @@ struct CustomUserControlViewManagerCPP : winrt::implements<
       winrt::Windows::UI::Xaml::FrameworkElement const &view,
       winrt::Windows::Foundation::Collections::IMapView<winrt::hstring, winrt::Windows::Foundation::IInspectable> const
           &propertyMap);
+
+  // IViewManagerWithCommands
+  winrt::Windows::Foundation::Collections::IMapView<winrt::hstring, int64_t> Commands() noexcept;
+
+  void DispatchCommand(
+      winrt::Windows::UI::Xaml::FrameworkElement const &view,
+      int64_t commandId,
+      winrt::Windows::Foundation::Collections::IVectorView<winrt::Windows::Foundation::IInspectable>
+          commandArgs) noexcept;
 };
 
 } // namespace winrt::SampleLibraryCPP::implementation

packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/DebugHelpers.cpp

@@ -0,0 +1,22 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+#include "pch.h"
+#include "DebugHelpers.h"
+
+namespace SampleLibraryCPP {
+
+void DebugWriteLine(const std::string &name, const std::string &methodName, const std::string &arg) {
+  std::string output = name + "::" + methodName + "(" + arg + ")\n";
+  OutputDebugStringA(output.c_str());
+}
+
+void DebugWriteLine(const std::string &name, const std::string &methodName, double arg) {
+  DebugWriteLine(name, methodName, std::to_string(arg));
+}
+
+void DebugWriteLine(const std::string &name, const std::string &methodName) {
+  DebugWriteLine(name, methodName, "");
+}
+
+} // namespace SampleLibraryCPP

packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/DebugHelpers.h

@@ -0,0 +1,18 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include "pch.h"
+
+#include <hstring.h>
+
+namespace SampleLibraryCPP {
+
+void DebugWriteLine(const std::string &name, const std::string &methodName, const std::string &arg);
+
+void DebugWriteLine(const std::string &name, const std::string &methodName, double arg);
+
+void DebugWriteLine(const std::string &name, const std::string &methodName);
+
+} // namespace SampleLibraryCPP

packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/SampleLibraryCPP.vcxproj

@@ -108,6 +108,7 @@
       <DependentUpon>CustomUserControlCPP.idl</DependentUpon>
     </ClInclude>
     <ClInclude Include="CustomUserControlViewManagerCPP.h" />
+    <ClInclude Include="DebugHelpers.h" />
     <ClInclude Include="pch.h" />
     <ClInclude Include="ReactPackageProvider.h">
       <DependentUpon>ReactPackageProvider.idl</DependentUpon>
@@ -119,6 +120,7 @@
       <DependentUpon>CustomUserControlCPP.idl</DependentUpon>
     </ClCompile>
     <ClCompile Include="CustomUserControlViewManagerCPP.cpp" />
+    <ClCompile Include="DebugHelpers.cpp" />
     <ClCompile Include="pch.cpp">
       <PrecompiledHeader>Create</PrecompiledHeader>
     </ClCompile>

packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/SampleLibraryCPP.vcxproj.filters

@@ -18,13 +18,15 @@
     <ClCompile Include="ReactPackageProvider.cpp" />
     <ClCompile Include="CustomUserControlCPP.cpp" />
     <ClCompile Include="CustomUserControlViewManagerCPP.cpp" />
+    <ClCompile Include="DebugHelpers.cpp" />
   </ItemGroup>
   <ItemGroup>
     <ClInclude Include="pch.h" />
     <ClInclude Include="ReactPackageProvider.h" />
     <ClInclude Include="SampleModuleCPP.h" />
     <ClInclude Include="CustomUserControlCPP.h" />
     <ClInclude Include="CustomUserControlViewManagerCPP.h" />
+    <ClInclude Include="DebugHelpers.h" />
   </ItemGroup>
   <ItemGroup>
     <None Include="SampleLibraryCPP.def" />

packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/SampleModuleCPP.h

@@ -9,6 +9,7 @@
 #define _USE_MATH_DEFINES
 #include <math.h>
 
+#include "DebugHelpers.h"
 #include "NativeModules.h"
 
 namespace SampleLibraryCPP {
@@ -19,24 +20,6 @@ REACT_MODULE(SampleModuleCPP);
 struct SampleModuleCPP {
   const std::string Name = "SampleModuleCPP";
 
-  void DebugWriteLine(const std::string &methodName, const std::string &arg) {
-    std::string output = Name;
-    output.append(".");
-    output.append(methodName);
-    output.append("(");
-    output.append(arg);
-    output.append(")\n");
-    OutputDebugStringA(output.c_str());
-  }
-
-  void DebugWriteLine(const std::string &methodName, double arg) {
-    DebugWriteLine(methodName, std::to_string(arg));
-  }
-
-  void DebugWriteLine(std::string methodName) {
-    DebugWriteLine(methodName, "");
-  }
-
 #pragma region Constants
 
   REACT_CONSTANT(NumberConstant);
@@ -57,23 +40,23 @@ struct SampleModuleCPP {
 
   REACT_METHOD(VoidMethod);
   void VoidMethod() noexcept {
-    DebugWriteLine("VoidMethod");
+    DebugWriteLine(Name, "VoidMethod");
   }
 
   REACT_METHOD(VoidMethodWithArgs);
   void VoidMethodWithArgs(double arg) noexcept {
-    DebugWriteLine("VoidMethodWithArgs", arg);
+    DebugWriteLine(Name, "VoidMethodWithArgs", arg);
   }
 
   REACT_METHOD(ReturnMethod);
   double ReturnMethod() noexcept {
-    DebugWriteLine("ReturnMethod");
+    DebugWriteLine(Name, "ReturnMethod");
     return M_PI;
   }
 
   REACT_METHOD(ReturnMethodWithArgs);
   double ReturnMethodWithArgs(double arg) noexcept {
-    DebugWriteLine("ReturnMethodWithArgs", arg);
+    DebugWriteLine(Name, "ReturnMethodWithArgs", arg);
     return M_PI;
   }
 
@@ -83,21 +66,21 @@ struct SampleModuleCPP {
 
   REACT_METHOD(ExplicitCallbackMethod);
   void ExplicitCallbackMethod(std::function<void(double)> &&callback) noexcept {
-    DebugWriteLine("ExplicitCallbackMethod");
+    DebugWriteLine(Name, "ExplicitCallbackMethod");
     callback(M_PI);
   }
 
   REACT_METHOD(ExplicitCallbackMethodWithArgs);
   void ExplicitCallbackMethodWithArgs(double arg, std::function<void(double)> &&callback) noexcept {
-    DebugWriteLine("ExplicitCallbackMethodWithArgs", arg);
+    DebugWriteLine(Name, "ExplicitCallbackMethodWithArgs", arg);
     callback(M_PI);
   }
 
   REACT_METHOD(ExplicitPromiseMethod);
   void ExplicitPromiseMethod(
       std::function<void(double)> &&resolve,
       std::function<void(std::string)> &&reject) noexcept {
-    DebugWriteLine("ExplicitPromiseMethod");
+    DebugWriteLine(Name, "ExplicitPromiseMethod");
     try {
       resolve(M_PI);
     } catch (const std::exception &ex) {
@@ -110,7 +93,7 @@ struct SampleModuleCPP {
       double arg,
       std::function<void(double)> &&resolve,
       std::function<void(std::string)> &&reject) noexcept {
-    DebugWriteLine("ExplicitPromiseMethodWithArgs", arg);
+    DebugWriteLine(Name, "ExplicitPromiseMethodWithArgs", arg);
     try {
       resolve(M_PI);
     } catch (const std::exception &ex) {
@@ -124,13 +107,13 @@ struct SampleModuleCPP {
 
   REACT_SYNC_METHOD(SyncReturnMethod);
   double SyncReturnMethod() noexcept {
-    DebugWriteLine("SyncReturnMethod");
+    DebugWriteLine(Name, "SyncReturnMethod");
     return M_PI;
   }
 
   REACT_SYNC_METHOD(SyncReturnMethodWithArgs);
   double SyncReturnMethodWithArgs(double arg) noexcept {
-    DebugWriteLine("SyncReturnMethodWithArgs", arg);
+    DebugWriteLine(Name, "SyncReturnMethodWithArgs", arg);
     return M_PI;
   }
 

packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCS/CustomUserControlViewManagerCS.cs

@@ -6,7 +6,6 @@
 using Windows.UI.Xaml.Controls;
 
 using Microsoft.ReactNative.Managed;
-using System.Collections.Generic;
 
 namespace SampleLibraryCS
 {
@@ -52,9 +51,9 @@ public void SetBackgroundColor(CustomUserControlCS view, Brush value)
         }
 
         [ViewManagerCommand]
-        public void CustomCommand(CustomUserControlCS view, IReadOnlyList<object> args)
+        public void CustomCommand(CustomUserControlCS view, string arg)
         {
-            Debug.WriteLine($"{Name}.{nameof(CustomCommand)}({args[0].ToString()})");
+            Debug.WriteLine($"{Name}.{nameof(CustomCommand)}({view.Tag}, \"{arg}\")");
         }
     }
 }