react-native-windows 0.81.37 → 0.81.38

package/Microsoft.ReactNative/Fabric/Composition/ReactCompositionViewComponentBuilder.cpp

@@ -3,10 +3,12 @@
 
 #include "pch.h"
 #include "ReactCompositionViewComponentBuilder.h"
+#include <Fabric/AbiComponentDescriptor.h>
 #include <Fabric/AbiViewComponentDescriptor.h>
 #include <Fabric/Composition/CompositionViewComponentView.h>
 #include <Fabric/Composition/ContentIslandComponentView.h>
 #include <Fabric/Composition/PortalComponentView.h>
+#include <Fabric/Composition/TextInput/WindowsTextInputComponentView.h>
 #include <strsafe.h>
 #include "CompositionContextHelper.h"
 #include "DynamicWriter.h"
@@ -133,6 +135,26 @@ void ReactCompositionViewComponentBuilder::SetPortalComponentViewInitializer(
   };
 }
 
+void ReactCompositionViewComponentBuilder::SetTextInputComponentViewInitializer(
+    const TextInputComponentViewInitializer &initializer) noexcept {
+  m_fnCreateView = [initializer](
+                       const IReactContext &reactContext,
+                       int32_t tag,
+                       const Experimental::ICompositionContext &context,
+                       ComponentViewFeatures /*features*/,
+                       ReactCompositionViewComponentBuilder &builder)
+      -> winrt::Microsoft::ReactNative::Composition::WindowsTextInputComponentView {
+    auto view = winrt::make<winrt::Microsoft::ReactNative::Composition::implementation::WindowsTextInputComponentView>(
+        context, tag, reactContext, &builder);
+    initializer(view);
+    return view;
+  };
+  m_descriptorConstructorFactory = []() {
+    return &facebook::react::concreteComponentDescriptorConstructor<
+        ::Microsoft::ReactNative::AbiWindowsTextInputComponentDescriptor>;
+  };
+}
+
 // (Object handle, Microsoft.ReactNative.IComponentState state) => void
 // void ReactCompositionViewComponentBuilder::SetStateUpdater(StateUpdater impl) noexcept {
 //  m_stateUpdater = impl;

package/Microsoft.ReactNative/Fabric/Composition/ReactCompositionViewComponentBuilder.h

@@ -2,7 +2,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-#include <Fabric/AbiComponentDescriptor.h>
+#include <Fabric/AbiViewProps.h>
 #include <react/renderer/componentregistry/ComponentDescriptorProvider.h>
 #include <react/renderer/core/ReactPrimitives.h>
 #include "winrt/Microsoft.ReactNative.Composition.Experimental.h"
@@ -51,6 +51,7 @@ struct ReactCompositionViewComponentBuilder
   void SetIVisualToMountChildrenIntoHandler(
       winrt::Microsoft::ReactNative::Composition::Experimental::IVisualToMountChildrenIntoDelegate impl) noexcept;
   void SetUpdateLayoutMetricsHandler(UpdateLayoutMetricsDelegate impl) noexcept;
+  void SetTextInputComponentViewInitializer(const TextInputComponentViewInitializer &initializer) noexcept;
 
  public:
   IComponentProps CreateProps(ViewProps props, const IComponentProps &cloneFrom) noexcept;

package/Microsoft.ReactNative/Fabric/Composition/TextInput/AbiTextInputState.h

@@ -0,0 +1,38 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include "ViewProps.g.h"
+
+#include <react/renderer/core/ConcreteState.h>
+#include <react/renderer/core/State.h>
+#include "WindowsTextInputState.h"
+#include "winrt/Microsoft.ReactNative.h"
+
+namespace Microsoft::ReactNative {
+
+class AbiTextInputStateData : public facebook::react::WindowsTextInputState {
+ public:
+  AbiTextInputStateData() = default;
+  // AbiTextInputStateData(winrt::Windows::Foundation::IInspectable data) : userdata(data) {}
+  AbiTextInputStateData(
+      facebook::react::AttributedStringBox attributedStringBox,
+      facebook::react::AttributedString reactTreeAttributedString,
+      facebook::react::ParagraphAttributes paragraphAttributes,
+      int64_t mostRecentEventCount,
+      winrt::Windows::Foundation::IInspectable userdata)
+      : facebook::react::WindowsTextInputState(
+            std::move(attributedStringBox),
+            std::move(reactTreeAttributedString),
+            std::move(paragraphAttributes),
+            mostRecentEventCount),
+        userdata(userdata) {}
+
+  AbiTextInputStateData(winrt::Windows::Foundation::IInspectable userdata)
+      : facebook::react::WindowsTextInputState({}), userdata(userdata) {}
+
+  winrt::Windows::Foundation::IInspectable userdata;
+};
+
+} // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Fabric/Composition/TextInput/ConcreteTextInputShadowNode.h

@@ -0,0 +1,272 @@
+
+#include <react/renderer/attributedstring/AttributedString.h>
+#include <react/renderer/attributedstring/AttributedStringBox.h>
+#include <react/renderer/attributedstring/PlaceholderAttributedString.h>
+#include <react/renderer/attributedstring/TextAttributes.h>
+#include <react/renderer/components/text/BaseTextShadowNode.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <react/renderer/core/LayoutConstraints.h>
+#include <react/renderer/core/LayoutContext.h>
+#include <react/renderer/core/conversions.h>
+#include <react/renderer/textlayoutmanager/TextLayoutContext.h>
+#include <react/renderer/textlayoutmanager/TextLayoutManager.h>
+#include <react/utils/ContextContainer.h>
+
+namespace facebook::react {
+
+/*
+ * `ShadowNode` for <WindowsTextInput> component.
+ */
+template <const char *concreteComponentName, typename Props, typename EventEmitter, typename State>
+class ConcreteTextInputShadowNode
+    : public facebook::react::ConcreteViewShadowNode<concreteComponentName, Props, EventEmitter, State> {
+ public:
+  using Super = facebook::react::ConcreteViewShadowNode<concreteComponentName, Props, EventEmitter, State>;
+  using Super::Super;
+
+  static facebook::react::ShadowNodeTraits BaseTraits() {
+    auto traits = Super::BaseTraits();
+    traits.set(facebook::react::ShadowNodeTraits::Trait::LeafYogaNode);
+    traits.set(facebook::react::ShadowNodeTraits::Trait::MeasurableYogaNode);
+    traits.set(facebook::react::ShadowNodeTraits::Trait::BaselineYogaNode);
+    return traits;
+  }
+
+  /*
+   * Associates a shared TextLayoutManager with the node.
+   * `TextInputShadowNode` uses the manager to measure text content
+   * and construct `TextInputState` objects.
+   */
+  void setTextLayoutManager(std::shared_ptr<const facebook::react::TextLayoutManager> textLayoutManager) {
+    Super::ensureUnsealed();
+    textLayoutManager_ = std::move(textLayoutManager);
+  }
+
+ protected:
+  facebook::react::Size measureContent(
+      const facebook::react::LayoutContext &layoutContext,
+      const facebook::react::LayoutConstraints &layoutConstraints) const override {
+    // Layout is called right after measure.
+    // Measure is marked as `const`, and `layout` is not; so State can be
+    // updated during layout, but not during `measure`. If State is out-of-date
+    // in layout, it's too late: measure will have already operated on old
+    // State. Thus, we use the same value here that we *will* use in layout to
+    // update the state.
+    facebook::react::AttributedString attributedString = getMostRecentAttributedString(layoutContext);
+
+    if (attributedString.isEmpty()) {
+      attributedString = getPlaceholderAttributedString(layoutContext);
+    }
+
+    // BaseTextShadowNode only gets children. We must detect and prepend text
+    // value attributes manually.
+    if (!Super::getConcreteProps().text.empty()) {
+      auto textAttributes = facebook::react::TextAttributes::defaultTextAttributes();
+      textAttributes.apply(Super::getConcreteProps().textAttributes);
+      auto fragment = facebook::react::AttributedString::Fragment{};
+      fragment.string = Super::getConcreteProps().text;
+      fragment.textAttributes = textAttributes;
+      // If the TextInput opacity is 0 < n < 1, the opacity of the TextInput and
+      // text value's background will stack. This is a hack/workaround to prevent
+      // that effect.
+      fragment.textAttributes.backgroundColor = facebook::react::clearColor();
+      fragment.parentShadowView = facebook::react::ShadowView(*this);
+      attributedString.prependFragment(std::move(fragment));
+    }
+
+    facebook::react::TextLayoutContext textLayoutContext;
+    textLayoutContext.pointScaleFactor = layoutContext.pointScaleFactor;
+
+    facebook::react::ParagraphAttributes paragraphAttributes{};
+    paragraphAttributes.maximumNumberOfLines = Super::getConcreteProps().multiline ? 0 : 1;
+    return textLayoutManager_
+        ->measure(
+            facebook::react::AttributedStringBox{attributedString},
+            paragraphAttributes,
+            textLayoutContext,
+            layoutConstraints)
+        .size;
+  }
+
+  void layout(facebook::react::LayoutContext layoutContext) override {
+    updateStateIfNeeded(layoutContext);
+    Super::layout(layoutContext);
+  }
+
+  facebook::react::Float baseline(const facebook::react::LayoutContext &layoutContext, facebook::react::Size size)
+      const override {
+    // Calculate baseline as 80% of the text height
+    return size.height * 0.8f;
+  }
+
+  std::shared_ptr<const facebook::react::TextLayoutManager> textLayoutManager_;
+
+  /*
+   * Determines the constraints to use while measure the underlying text
+   */
+  facebook::react::LayoutConstraints getTextConstraints(
+      const facebook::react::LayoutConstraints &layoutConstraints) const {
+    if (Super::getConcreteProps().multiline) {
+      return layoutConstraints;
+    } else {
+      // A single line TextInput acts as a horizontal scroller of infinitely
+      // expandable text, so we want to measure the text as if it is allowed to
+      // infinitely expand horizontally, and later clamp to the constraints of the
+      // input.
+      return facebook::react::LayoutConstraints{
+          .minimumSize = layoutConstraints.minimumSize,
+          .maximumSize =
+              facebook::react::Size{
+                  .width = std::numeric_limits<facebook::react::Float>::infinity(),
+                  .height = layoutConstraints.maximumSize.height,
+              },
+          .layoutDirection = layoutConstraints.layoutDirection,
+      };
+    }
+  }
+
+ protected:
+  // Overridable method so that the Abi version can maintain user's state
+  virtual void updateTextInputState(
+      facebook::react::AttributedStringBox attributedStringBox,
+      facebook::react::AttributedString &reactTreeAttributedString,
+      facebook::react::ParagraphAttributes paragraphAttributes,
+      int64_t mostRecentEventCount) = 0;
+
+  /*
+   * Creates a `State` object (with `AttributedText` and
+   * `TextLayoutManager`) if needed.
+   */
+  void updateStateIfNeeded(const facebook::react::LayoutContext &layoutContext) {
+    Super::ensureUnsealed();
+    const auto &stateData = Super::getStateData();
+    auto reactTreeAttributedString = getAttributedString(layoutContext);
+
+    // Tree is often out of sync with the value of the TextInput.
+    // This is by design - don't change the value of the TextInput in the State,
+    // and therefore in Java, unless the tree itself changes.
+    if (stateData.reactTreeAttributedString == reactTreeAttributedString) {
+      return;
+    }
+
+    // If props event counter is less than what we already have in state, skip it
+    const auto &props = Super::getConcreteProps();
+    if (props.mostRecentEventCount < stateData.mostRecentEventCount) {
+      return;
+    }
+
+    // Store default TextAttributes in state.
+    // In the case where the TextInput is completely empty (no value, no
+    // defaultValue, no placeholder, no children) there are therefore no fragments
+    // in the AttributedString, and when State is updated, it needs some way to
+    // reconstruct a Fragment with default TextAttributes.
+    auto defaultTextAttributes = facebook::react::TextAttributes::defaultTextAttributes();
+    defaultTextAttributes.fontSizeMultiplier = layoutContext.fontSizeMultiplier;
+    defaultTextAttributes.apply(Super::getConcreteProps().textAttributes);
+
+    auto newEventCount = stateData.reactTreeAttributedString.isContentEqual(reactTreeAttributedString)
+        ? 0
+        : Super::getConcreteProps().mostRecentEventCount;
+    auto newAttributedString = getMostRecentAttributedString(layoutContext);
+
+    // Even if we're here and updating state, it may be only to update the layout
+    // manager If that is the case, make sure we don't update text: pass in the
+    // current attributedString unchanged, and pass in zero for the "event count"
+    // so no changes are applied There's no way to prevent a state update from
+    // flowing to Java, so we just ensure it's a noop in those cases.
+
+    updateTextInputState(
+        facebook::react::AttributedStringBox(newAttributedString), reactTreeAttributedString, {}, newEventCount);
+  }
+
+  /*
+   * Returns a `AttributedString` which represents text content of the node.
+   */
+  facebook::react::AttributedString getAttributedString(const facebook::react::LayoutContext &layoutContext) const {
+    // Use BaseTextShadowNode to get attributed string from children
+
+    auto childTextAttributes = facebook::react::TextAttributes::defaultTextAttributes();
+    childTextAttributes.fontSizeMultiplier = layoutContext.fontSizeMultiplier;
+    childTextAttributes.apply(Super::getConcreteProps().textAttributes);
+    // Don't propagate the background color of the TextInput onto the attributed
+    // string. Android tries to render shadow of the background alongside the
+    // shadow of the text which results in weird artifacts.
+    childTextAttributes.backgroundColor = facebook::react::HostPlatformColor::UndefinedColor;
+
+    auto attributedString = facebook::react::AttributedString{};
+    auto attachments = facebook::react::BaseTextShadowNode::Attachments{};
+    facebook::react::BaseTextShadowNode::buildAttributedString(
+        childTextAttributes, *this, attributedString, attachments);
+    attributedString.setBaseTextAttributes(childTextAttributes);
+
+    // BaseTextShadowNode only gets children. We must detect and prepend text
+    // value attributes manually.
+    if (!Super::getConcreteProps().text.empty()) {
+      auto textAttributes = facebook::react::TextAttributes::defaultTextAttributes();
+      textAttributes.fontSizeMultiplier = layoutContext.fontSizeMultiplier;
+      textAttributes.apply(Super::getConcreteProps().textAttributes);
+      textAttributes.fontSizeMultiplier = layoutContext.fontSizeMultiplier;
+      auto fragment = facebook::react::AttributedString::Fragment{};
+      fragment.string = Super::getConcreteProps().text;
+      fragment.textAttributes = textAttributes;
+      // If the TextInput opacity is 0 < n < 1, the opacity of the TextInput and
+      // text value's background will stack. This is a hack/workaround to prevent
+      // that effect.
+      fragment.textAttributes.backgroundColor = facebook::react::clearColor();
+      fragment.parentShadowView = facebook::react::ShadowView(*this);
+      attributedString.prependFragment(std::move(fragment));
+    }
+
+    return attributedString;
+  }
+
+  /**
+   * Get the most up-to-date attributed string for measurement and State.
+   */
+  facebook::react::AttributedString getMostRecentAttributedString(
+      const facebook::react::LayoutContext &layoutContext) const {
+    const auto &state = Super::getStateData();
+
+    auto reactTreeAttributedString = getAttributedString(layoutContext);
+
+    // Sometimes the treeAttributedString will only differ from the state
+    // not by inherent properties (string or prop attributes), but by the frame of
+    // the parent which has changed Thus, we can't directly compare the entire
+    // AttributedString
+    bool treeAttributedStringChanged =
+        !state.reactTreeAttributedString.compareTextAttributesWithoutFrame(reactTreeAttributedString);
+
+    return (!treeAttributedStringChanged ? state.attributedStringBox.getValue() : reactTreeAttributedString);
+  }
+
+  facebook::react::AttributedString getPlaceholderAttributedString(
+      const facebook::react::LayoutContext &layoutContext) const {
+    const auto &props = Super::getConcreteProps();
+
+    facebook::react::AttributedString attributedString;
+    attributedString.setBaseTextAttributes(props.textAttributes);
+    //[windows
+    if (!props.placeholder.empty()) {
+      auto textAttributes = facebook::react::TextAttributes::defaultTextAttributes();
+      textAttributes.fontSizeMultiplier = layoutContext.fontSizeMultiplier;
+      textAttributes.apply(props.textAttributes);
+
+      /*
+       * These props are applied to `View`, therefore they must not be a part of
+       * base text attributes.
+       */
+      textAttributes.backgroundColor = facebook::react::clearColor();
+      textAttributes.opacity = 1;
+
+      attributedString.appendFragment(
+          {.string = props.placeholder,
+           .textAttributes = textAttributes,
+           .parentShadowView = facebook::react::ShadowView(*this)});
+    }
+    // windows]
+
+    return ensurePlaceholderIfEmpty_DO_NOT_USE(attributedString);
+  }
+};
+
+} // namespace facebook::react

package/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentDescriptor.h

@@ -8,8 +8,6 @@
 #include <yoga/YGEnums.h>
 #include <yoga/YGValue.h>
 
-#include <unordered_map>
-
 #include <react/renderer/components/text/ParagraphComponentDescriptor.h>
 #include <react/renderer/core/ConcreteComponentDescriptor.h>
 
@@ -18,11 +16,15 @@ namespace facebook::react {
 /*
  * Descriptor for <WindowsTextInput> component.
  */
-class WindowsTextInputComponentDescriptor final : public ConcreteComponentDescriptor<WindowsTextInputShadowNode> {
+template <typename TShadowNode>
+class ConcreteWindowsTextInputComponentDescriptor : public ConcreteComponentDescriptor<TShadowNode> {
+  using Super = ConcreteComponentDescriptor<TShadowNode>;
+  using Super::Super;
+
  public:
-  WindowsTextInputComponentDescriptor(const ComponentDescriptorParameters &parameters)
-      : ConcreteComponentDescriptor<WindowsTextInputShadowNode>(parameters),
-        textLayoutManager_(getManagerByName<TextLayoutManager>(contextContainer_, TextLayoutManagerKey)) {}
+  ConcreteWindowsTextInputComponentDescriptor(const ComponentDescriptorParameters &parameters)
+      : Super(parameters),
+        textLayoutManager_(getManagerByName<TextLayoutManager>(this->contextContainer_, TextLayoutManagerKey)) {}
 
   /*
 virtual State::Shared createInitialState(
@@ -67,7 +69,7 @@ virtual State::Shared createInitialState(
 
  protected:
   void adopt(ShadowNode &shadowNode) const override {
-    auto &textInputShadowNode = static_cast<WindowsTextInputShadowNode &>(shadowNode);
+    auto &textInputShadowNode = static_cast<TShadowNode &>(shadowNode);
 
     // `TextInputShadowNode` uses `TextLayoutManager` to measure text content
     // and communicate text rendering metrics to mounting layer.
@@ -138,12 +140,12 @@ virtual State::Shared createInitialState(
       }
     }
 
-    textInputShadowNode.dirtyLayout();
-
         */
+    // Native text and formatting updates change intrinsic size without changing Yoga props.
+    textInputShadowNode.dirtyLayout();
     textInputShadowNode.enableMeasurement();
 
-    ConcreteComponentDescriptor::adopt(shadowNode);
+    Super::adopt(shadowNode);
   }
 
  private:
@@ -154,11 +156,16 @@ virtual State::Shared createInitialState(
     float bottom{};
   };
 
-  // TODO T68526882: Unify with Binding::UIManagerJavaDescriptor
-  constexpr static auto UIManagerJavaDescriptor = "com/facebook/react/fabric/FabricUIManager";
+  const std::shared_ptr<const TextLayoutManager> textLayoutManager_;
+  // mutable std::unordered_map<int, ThemePadding> surfaceIdToThemePaddingMap_;
+};
+
+class WindowsTextInputComponentDescriptor final
+    : public ConcreteWindowsTextInputComponentDescriptor<WindowsTextInputShadowNode> {
+  using Super = ConcreteWindowsTextInputComponentDescriptor<WindowsTextInputShadowNode>;
 
-  const std::shared_ptr<TextLayoutManager> textLayoutManager_;
-  mutable std::unordered_map<int, ThemePadding> surfaceIdToThemePaddingMap_;
+ public:
+  WindowsTextInputComponentDescriptor(const ComponentDescriptorParameters &parameters) : Super(parameters) {}
 };
 
 } // namespace facebook::react