react-native-windows 0.71.10 → 0.72.0-preview.2

package/ReactCommon/TEMP_UntilReactCommonUpdate/react/renderer/components/view/YogaStylableProps.cpp

@@ -0,0 +1,362 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include "YogaStylableProps.h"
+
+#include <react/renderer/components/view/conversions.h>
+#include <react/renderer/components/view/propsConversions.h>
+#include <react/renderer/core/CoreFeatures.h>
+#include <react/renderer/core/propsConversions.h>
+#include <react/renderer/debug/debugStringConvertibleUtils.h>
+#include <yoga/YGNode.h>
+#include <yoga/Yoga.h>
+
+#include "conversions.h"
+
+namespace facebook::react {
+
+YogaStylableProps::YogaStylableProps(
+    const PropsParserContext &context,
+    YogaStylableProps const &sourceProps,
+    RawProps const &rawProps,
+    bool shouldSetRawProps)
+    : Props(context, sourceProps, rawProps, shouldSetRawProps),
+      yogaStyle(
+          CoreFeatures::enablePropIteratorSetter
+              ? sourceProps.yogaStyle
+              : convertRawProp(context, rawProps, sourceProps.yogaStyle)) {
+  if (!CoreFeatures::enablePropIteratorSetter) {
+    convertRawPropAliases(context, sourceProps, rawProps);
+  }
+};
+
+template <typename T>
+static inline T const getFieldValue(
+    const PropsParserContext &context,
+    RawValue const &value,
+    T const defaultValue) {
+  if (value.hasValue()) {
+    T res;
+    fromRawValue(context, value, res);
+    return res;
+  }
+
+  return defaultValue;
+}
+
+#define REBUILD_FIELD_SWITCH_CASE2(field, fieldName)                       \
+  case CONSTEXPR_RAW_PROPS_KEY_HASH(fieldName): {                          \
+    yogaStyle.field() = getFieldValue(context, value, ygDefaults.field()); \
+    return;                                                                \
+  }
+
+// @lint-ignore CLANGTIDY cppcoreguidelines-macro-usage
+#define REBUILD_FIELD_SWITCH_CASE_YSP(field) \
+  REBUILD_FIELD_SWITCH_CASE2(field, #field)
+
+#define REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, index, fieldName) \
+  case CONSTEXPR_RAW_PROPS_KEY_HASH(fieldName): {                     \
+    yogaStyle.field()[index] =                                        \
+        getFieldValue(context, value, ygDefaults.field()[index]);     \
+    return;                                                           \
+  }
+
+#define REBUILD_FIELD_YG_DIMENSION(field, widthStr, heightStr)             \
+  REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, YGDimensionWidth, widthStr); \
+  REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, YGDimensionHeight, heightStr);
+
+#define REBUILD_FIELD_YG_GUTTER(field, rowGapStr, columnGapStr, gapStr)      \
+  REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, YGGutterRow, rowGapStr);       \
+  REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, YGGutterColumn, columnGapStr); \
+  REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, YGGutterAll, gapStr);
+
+#define REBUILD_FIELD_YG_EDGES(field, prefix, suffix)                          \
+  REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(                                        \
+      field, YGEdgeLeft, prefix "Left" suffix);                                \
+  REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, YGEdgeTop, prefix "Top" suffix); \
+  REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(                                        \
+      field, YGEdgeRight, prefix "Right" suffix);                              \
+  REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(                                        \
+      field, YGEdgeBottom, prefix "Bottom" suffix);                            \
+  REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(                                        \
+      field, YGEdgeStart, prefix "Start" suffix);                              \
+  REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, YGEdgeEnd, prefix "End" suffix); \
+  REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(                                        \
+      field, YGEdgeHorizontal, prefix "Horizontal" suffix);                    \
+  REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(                                        \
+      field, YGEdgeVertical, prefix "Vertical" suffix);                        \
+  REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(field, YGEdgeAll, prefix "" suffix);
+
+#define REBUILD_FIELD_YG_EDGES_POSITION()                                 \
+  REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(position, YGEdgeLeft, "left");     \
+  REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(position, YGEdgeTop, "top");       \
+  REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(position, YGEdgeRight, "right");   \
+  REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(position, YGEdgeBottom, "bottom"); \
+  REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(position, YGEdgeStart, "start");   \
+  REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(position, YGEdgeEnd, "end");
+
+void YogaStylableProps::setProp(
+    const PropsParserContext &context,
+    RawPropsPropNameHash hash,
+    const char *propName,
+    RawValue const &value) {
+  static const auto ygDefaults = YGStyle{};
+
+  Props::setProp(context, hash, propName, value);
+
+  static const auto defaults = YogaStylableProps{};
+
+  switch (hash) {
+    REBUILD_FIELD_SWITCH_CASE_YSP(direction);
+    REBUILD_FIELD_SWITCH_CASE_YSP(flexDirection);
+    REBUILD_FIELD_SWITCH_CASE_YSP(justifyContent);
+    REBUILD_FIELD_SWITCH_CASE_YSP(alignContent);
+    REBUILD_FIELD_SWITCH_CASE_YSP(alignItems);
+    REBUILD_FIELD_SWITCH_CASE_YSP(alignSelf);
+    REBUILD_FIELD_SWITCH_CASE_YSP(flexWrap);
+    REBUILD_FIELD_SWITCH_CASE_YSP(overflow);
+    REBUILD_FIELD_SWITCH_CASE_YSP(display);
+    REBUILD_FIELD_SWITCH_CASE_YSP(flex);
+    REBUILD_FIELD_SWITCH_CASE_YSP(flexGrow);
+    REBUILD_FIELD_SWITCH_CASE_YSP(flexShrink);
+    REBUILD_FIELD_SWITCH_CASE_YSP(flexBasis);
+    REBUILD_FIELD_SWITCH_CASE2(positionType, "position");
+    REBUILD_FIELD_YG_GUTTER(gap, "rowGap", "columnGap", "gap");
+    REBUILD_FIELD_SWITCH_CASE_YSP(aspectRatio);
+    REBUILD_FIELD_YG_DIMENSION(dimensions, "width", "height");
+    REBUILD_FIELD_YG_DIMENSION(minDimensions, "minWidth", "minHeight");
+    REBUILD_FIELD_YG_DIMENSION(maxDimensions, "maxWidth", "maxHeight");
+    REBUILD_FIELD_YG_EDGES_POSITION();
+    REBUILD_FIELD_YG_EDGES(margin, "margin", "");
+    REBUILD_FIELD_YG_EDGES(padding, "padding", "");
+    REBUILD_FIELD_YG_EDGES(border, "border", "Width");
+
+    // Aliases
+    RAW_SET_PROP_SWITCH_CASE(inset, "inset");
+    RAW_SET_PROP_SWITCH_CASE(insetBlock, "insetBlock");
+    RAW_SET_PROP_SWITCH_CASE(insetBlockEnd, "insetBlockEnd");
+    RAW_SET_PROP_SWITCH_CASE(insetBlockStart, "insetBlockStart");
+    RAW_SET_PROP_SWITCH_CASE(insetInline, "insetInline");
+    RAW_SET_PROP_SWITCH_CASE(insetInlineEnd, "insetInlineEnd");
+    RAW_SET_PROP_SWITCH_CASE(insetInlineStart, "insetInlineStart");
+    RAW_SET_PROP_SWITCH_CASE(marginInline, "marginInline");
+    RAW_SET_PROP_SWITCH_CASE(marginInlineStart, "marginInlineStart");
+    RAW_SET_PROP_SWITCH_CASE(marginInlineEnd, "marginInlineEnd");
+    RAW_SET_PROP_SWITCH_CASE(marginBlock, "marginBlock");
+    RAW_SET_PROP_SWITCH_CASE(marginBlockStart, "marginBlockStart");
+    RAW_SET_PROP_SWITCH_CASE(marginBlockEnd, "marginBlockEnd");
+    RAW_SET_PROP_SWITCH_CASE(paddingInline, "paddingInline");
+    RAW_SET_PROP_SWITCH_CASE(paddingInlineStart, "paddingInlineStart");
+    RAW_SET_PROP_SWITCH_CASE(paddingInlineEnd, "paddingInlineEnd");
+    RAW_SET_PROP_SWITCH_CASE(paddingBlock, "paddingBlock");
+    RAW_SET_PROP_SWITCH_CASE(paddingBlockStart, "paddingBlockStart");
+    RAW_SET_PROP_SWITCH_CASE(paddingBlockEnd, "paddingBlockEnd");
+  }
+}
+
+#pragma mark - DebugStringConvertible
+
+#if RN_DEBUG_STRING_CONVERTIBLE
+SharedDebugStringConvertibleList YogaStylableProps::getDebugProps() const {
+  auto const defaultYogaStyle = YGStyle{};
+  return {
+      debugStringConvertibleItem(
+          "direction", yogaStyle.direction(), defaultYogaStyle.direction()),
+      debugStringConvertibleItem(
+          "flexDirection",
+          yogaStyle.flexDirection(),
+          defaultYogaStyle.flexDirection()),
+      debugStringConvertibleItem(
+          "justifyContent",
+          yogaStyle.justifyContent(),
+          defaultYogaStyle.justifyContent()),
+      debugStringConvertibleItem(
+          "alignContent",
+          yogaStyle.alignContent(),
+          defaultYogaStyle.alignContent()),
+      debugStringConvertibleItem(
+          "alignItems", yogaStyle.alignItems(), defaultYogaStyle.alignItems()),
+      debugStringConvertibleItem(
+          "alignSelf", yogaStyle.alignSelf(), defaultYogaStyle.alignSelf()),
+      debugStringConvertibleItem(
+          "positionType",
+          yogaStyle.positionType(),
+          defaultYogaStyle.positionType()),
+      debugStringConvertibleItem(
+          "flexWrap", yogaStyle.flexWrap(), defaultYogaStyle.flexWrap()),
+      debugStringConvertibleItem(
+          "overflow", yogaStyle.overflow(), defaultYogaStyle.overflow()),
+      debugStringConvertibleItem(
+          "display", yogaStyle.display(), defaultYogaStyle.display()),
+      debugStringConvertibleItem(
+          "flex", yogaStyle.flex(), defaultYogaStyle.flex()),
+      debugStringConvertibleItem(
+          "flexGrow", yogaStyle.flexGrow(), defaultYogaStyle.flexGrow()),
+      debugStringConvertibleItem(
+          "rowGap",
+          yogaStyle.gap()[YGGutterRow],
+          defaultYogaStyle.gap()[YGGutterRow]),
+      debugStringConvertibleItem(
+          "columnGap",
+          yogaStyle.gap()[YGGutterColumn],
+          defaultYogaStyle.gap()[YGGutterColumn]),
+      debugStringConvertibleItem(
+          "gap",
+          yogaStyle.gap()[YGGutterAll],
+          defaultYogaStyle.gap()[YGGutterAll]),
+      debugStringConvertibleItem(
+          "flexShrink", yogaStyle.flexShrink(), defaultYogaStyle.flexShrink()),
+      debugStringConvertibleItem(
+          "flexBasis", yogaStyle.flexBasis(), defaultYogaStyle.flexBasis()),
+      debugStringConvertibleItem(
+          "margin", yogaStyle.margin(), defaultYogaStyle.margin()),
+      debugStringConvertibleItem(
+          "position", yogaStyle.position(), defaultYogaStyle.position()),
+      debugStringConvertibleItem(
+          "padding", yogaStyle.padding(), defaultYogaStyle.padding()),
+      debugStringConvertibleItem(
+          "border", yogaStyle.border(), defaultYogaStyle.border()),
+      debugStringConvertibleItem(
+          "dimensions", yogaStyle.dimensions(), defaultYogaStyle.dimensions()),
+      debugStringConvertibleItem(
+          "minDimensions",
+          yogaStyle.minDimensions(),
+          defaultYogaStyle.minDimensions()),
+      debugStringConvertibleItem(
+          "maxDimensions",
+          yogaStyle.maxDimensions(),
+          defaultYogaStyle.maxDimensions()),
+      debugStringConvertibleItem(
+          "aspectRatio",
+          yogaStyle.aspectRatio(),
+          defaultYogaStyle.aspectRatio()),
+  };
+}
+#endif
+
+void YogaStylableProps::convertRawPropAliases(
+    const PropsParserContext &context,
+    YogaStylableProps const &sourceProps,
+    RawProps const &rawProps) {
+  inset = convertRawProp(
+      context,
+      rawProps,
+      "inset",
+      sourceProps.inset,
+      CompactValue::ofUndefined());
+  insetBlock = convertRawProp(
+      context,
+      rawProps,
+      "insetBlock",
+      sourceProps.insetBlock,
+      CompactValue::ofUndefined());
+  insetBlockEnd = convertRawProp(
+      context,
+      rawProps,
+      "insetBlockEnd",
+      sourceProps.insetBlockEnd,
+      CompactValue::ofUndefined());
+  insetBlockStart = convertRawProp(
+      context,
+      rawProps,
+      "insetBlockStart",
+      sourceProps.insetBlockStart,
+      CompactValue::ofUndefined());
+  insetInline = convertRawProp(
+      context,
+      rawProps,
+      "insetInline",
+      sourceProps.insetInline,
+      CompactValue::ofUndefined());
+  insetInlineEnd = convertRawProp(
+      context,
+      rawProps,
+      "insetInlineEnd",
+      sourceProps.insetInlineEnd,
+      CompactValue::ofUndefined());
+  insetInlineStart = convertRawProp(
+      context,
+      rawProps,
+      "insetInlineStart",
+      sourceProps.insetInlineStart,
+      CompactValue::ofUndefined());
+  marginInline = convertRawProp(
+      context,
+      rawProps,
+      "marginInline",
+      sourceProps.marginInline,
+      CompactValue::ofUndefined());
+  marginInlineStart = convertRawProp(
+      context,
+      rawProps,
+      "marginInlineStart",
+      sourceProps.marginInlineStart,
+      CompactValue::ofUndefined());
+  marginInlineEnd = convertRawProp(
+      context,
+      rawProps,
+      "marginInlineEnd",
+      sourceProps.marginInlineEnd,
+      CompactValue::ofUndefined());
+  marginBlock = convertRawProp(
+      context,
+      rawProps,
+      "marginBlock",
+      sourceProps.marginBlock,
+      CompactValue::ofUndefined());
+  marginBlockStart = convertRawProp(
+      context,
+      rawProps,
+      "marginBlockStart",
+      sourceProps.marginBlockStart,
+      CompactValue::ofUndefined());
+  marginBlockEnd = convertRawProp(
+      context,
+      rawProps,
+      "marginBlockEnd",
+      sourceProps.marginBlockEnd,
+      CompactValue::ofUndefined());
+
+  paddingInline = convertRawProp(
+      context,
+      rawProps,
+      "paddingInline",
+      sourceProps.paddingInline,
+      CompactValue::ofUndefined());
+  paddingInlineStart = convertRawProp(
+      context,
+      rawProps,
+      "paddingInlineStart",
+      sourceProps.paddingInlineStart,
+      CompactValue::ofUndefined());
+  paddingInlineEnd = convertRawProp(
+      context,
+      rawProps,
+      "paddingInlineEnd",
+      sourceProps.paddingInlineEnd,
+      CompactValue::ofUndefined());
+  paddingBlock = convertRawProp(
+      context,
+      rawProps,
+      "paddingBlock",
+      sourceProps.paddingBlock,
+      CompactValue::ofUndefined());
+  paddingBlockStart = convertRawProp(
+      context,
+      rawProps,
+      "paddingBlockStart",
+      sourceProps.paddingBlockStart,
+      CompactValue::ofUndefined());
+  paddingBlockEnd = convertRawProp(
+      context,
+      rawProps,
+      "paddingBlockEnd",
+      sourceProps.paddingBlockEnd,
+      CompactValue::ofUndefined());
+}
+
+} // namespace facebook::react

package/ReactCommon/TEMP_UntilReactCommonUpdate/react/renderer/components/view/primitives.h

@@ -0,0 +1,326 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <react/renderer/graphics/Color.h>
+#include <react/renderer/graphics/RectangleCorners.h>
+#include <react/renderer/graphics/RectangleEdges.h>
+
+#include <array>
+#include <bitset>
+#include <cmath>
+#include <optional>
+
+namespace facebook {
+namespace react {
+
+enum class PointerEventsMode : uint8_t { Auto, None, BoxNone, BoxOnly };
+
+struct ViewEvents {
+  std::bitset<32> bits{};
+
+  enum class Offset : std::size_t {
+    // Pointer events
+    PointerEnter = 0,
+    PointerMove = 1,
+    PointerLeave = 2,
+
+    // PanResponder callbacks
+    MoveShouldSetResponder = 3,
+    MoveShouldSetResponderCapture = 4,
+    StartShouldSetResponder = 5,
+    StartShouldSetResponderCapture = 6,
+    ResponderGrant = 7,
+    ResponderReject = 8,
+    ResponderStart = 9,
+    ResponderEnd = 10,
+    ResponderRelease = 11,
+    ResponderMove = 12,
+    ResponderTerminate = 13,
+    ResponderTerminationRequest = 14,
+    ShouldBlockNativeResponder = 15,
+
+    // Touch events
+    TouchStart = 16,
+    TouchMove = 17,
+    TouchEnd = 18,
+    TouchCancel = 19,
+
+    // W3C Pointer Events
+    PointerEnterCapture = 23,
+    PointerLeaveCapture = 24,
+    PointerMoveCapture = 25,
+    PointerOver = 26,
+    PointerOut = 27,
+    PointerOverCapture = 28,
+    PointerOutCapture = 29,
+
+    MouseEnter = 30, // Windows
+    MouseLeave = 31, // Windows
+
+  };
+
+  constexpr bool operator[](const Offset offset) const {
+    return bits[static_cast<std::size_t>(offset)];
+  }
+
+  std::bitset<32>::reference operator[](const Offset offset) {
+    return bits[static_cast<std::size_t>(offset)];
+  }
+};
+
+inline static bool operator==(ViewEvents const &lhs, ViewEvents const &rhs) {
+  return lhs.bits == rhs.bits;
+}
+
+inline static bool operator!=(ViewEvents const &lhs, ViewEvents const &rhs) {
+  return lhs.bits != rhs.bits;
+}
+
+enum class BackfaceVisibility : uint8_t { Auto, Visible, Hidden };
+
+enum class BorderCurve : uint8_t { Circular, Continuous };
+
+enum class BorderStyle : uint8_t { Solid, Dotted, Dashed };
+
+template <typename T>
+struct CascadedRectangleEdges {
+  using Counterpart = RectangleEdges<T>;
+  using OptionalT = std::optional<T>;
+
+  OptionalT left{};
+  OptionalT top{};
+  OptionalT right{};
+  OptionalT bottom{};
+  OptionalT start{};
+  OptionalT end{};
+  OptionalT horizontal{};
+  OptionalT vertical{};
+  OptionalT all{};
+  OptionalT block{};
+  OptionalT blockStart{};
+  OptionalT blockEnd{};
+
+  Counterpart resolve(bool isRTL, T defaults) const {
+    const auto leadingEdge = isRTL ? end : start;
+    const auto trailingEdge = isRTL ? start : end;
+    const auto horizontalOrAllOrDefault =
+        horizontal.value_or(all.value_or(defaults));
+    const auto verticalOrAllOrDefault =
+        vertical.value_or(all.value_or(defaults));
+
+    return {
+        /* .left = */
+        left.value_or(leadingEdge.value_or(horizontalOrAllOrDefault)),
+        /* .top = */
+        blockStart.value_or(
+            block.value_or(top.value_or(verticalOrAllOrDefault))),
+        /* .right = */
+        right.value_or(trailingEdge.value_or(horizontalOrAllOrDefault)),
+        /* .bottom = */
+        blockEnd.value_or(
+            block.value_or(bottom.value_or(verticalOrAllOrDefault))),
+    };
+  }
+
+  bool operator==(const CascadedRectangleEdges<T> &rhs) const {
+    return std::tie(
+               this->left,
+               this->top,
+               this->right,
+               this->bottom,
+               this->start,
+               this->end,
+               this->horizontal,
+               this->vertical,
+               this->all,
+               this->block,
+               this->blockStart,
+               this->blockEnd) ==
+        std::tie(
+               rhs.left,
+               rhs.top,
+               rhs.right,
+               rhs.bottom,
+               rhs.start,
+               rhs.end,
+               rhs.horizontal,
+               rhs.vertical,
+               rhs.all,
+               rhs.block,
+               rhs.blockStart,
+               rhs.blockEnd);
+  }
+
+  bool operator!=(const CascadedRectangleEdges<T> &rhs) const {
+    return !(*this == rhs);
+  }
+};
+
+template <typename T>
+struct CascadedRectangleCorners {
+  using Counterpart = RectangleCorners<T>;
+  using OptionalT = std::optional<T>;
+
+  OptionalT topLeft{};
+  OptionalT topRight{};
+  OptionalT bottomLeft{};
+  OptionalT bottomRight{};
+  OptionalT topStart{};
+  OptionalT topEnd{};
+  OptionalT bottomStart{};
+  OptionalT bottomEnd{};
+  OptionalT all{};
+  OptionalT endEnd{};
+  OptionalT endStart{};
+  OptionalT startEnd{};
+  OptionalT startStart{};
+
+  Counterpart resolve(bool isRTL, T defaults) const {
+    const auto logicalTopStart = topStart ? topStart : startStart;
+    const auto logicalTopEnd = topEnd ? topEnd : startEnd;
+    const auto logicalBottomStart = bottomStart ? bottomStart : endStart;
+    const auto logicalBottomEnd = bottomEnd ? bottomEnd : endEnd;
+
+    const auto topLeading = isRTL ? logicalTopEnd : logicalTopStart;
+    const auto topTrailing = isRTL ? logicalTopStart : logicalTopEnd;
+    const auto bottomLeading = isRTL ? logicalBottomEnd : logicalBottomStart;
+    const auto bottomTrailing = isRTL ? logicalBottomStart : logicalBottomEnd;
+
+    return {
+        /* .topLeft = */ topLeft.value_or(
+            topLeading.value_or(all.value_or(defaults))),
+        /* .topRight = */
+        topRight.value_or(topTrailing.value_or(all.value_or(defaults))),
+        /* .bottomLeft = */
+        bottomLeft.value_or(bottomLeading.value_or(all.value_or(defaults))),
+        /* .bottomRight = */
+        bottomRight.value_or(bottomTrailing.value_or(all.value_or(defaults))),
+    };
+  }
+
+  bool operator==(const CascadedRectangleCorners<T> &rhs) const {
+    return std::tie(
+               this->topLeft,
+               this->topRight,
+               this->bottomLeft,
+               this->bottomRight,
+               this->topStart,
+               this->topEnd,
+               this->bottomStart,
+               this->bottomEnd,
+               this->all,
+               this->endEnd,
+               this->endStart,
+               this->startEnd,
+               this->startStart) ==
+        std::tie(
+               rhs.topLeft,
+               rhs.topRight,
+               rhs.bottomLeft,
+               rhs.bottomRight,
+               rhs.topStart,
+               rhs.topEnd,
+               rhs.bottomStart,
+               rhs.bottomEnd,
+               rhs.all,
+               rhs.endEnd,
+               rhs.endStart,
+               rhs.startEnd,
+               rhs.startStart);
+  }
+
+  bool operator!=(const CascadedRectangleCorners<T> &rhs) const {
+    return !(*this == rhs);
+  }
+};
+
+using BorderWidths = RectangleEdges<Float>;
+using BorderCurves = RectangleCorners<BorderCurve>;
+using BorderStyles = RectangleEdges<BorderStyle>;
+using BorderColors = RectangleEdges<SharedColor>;
+using BorderRadii = RectangleCorners<Float>;
+
+using CascadedBorderWidths = CascadedRectangleEdges<Float>;
+using CascadedBorderCurves = CascadedRectangleCorners<BorderCurve>;
+using CascadedBorderStyles = CascadedRectangleEdges<BorderStyle>;
+using CascadedBorderColors = CascadedRectangleEdges<SharedColor>;
+using CascadedBorderRadii = CascadedRectangleCorners<Float>;
+
+struct BorderMetrics {
+  BorderColors borderColors{};
+  BorderWidths borderWidths{};
+  BorderRadii borderRadii{};
+  BorderCurves borderCurves{};
+  BorderStyles borderStyles{};
+
+  bool operator==(const BorderMetrics &rhs) const {
+    return std::tie(
+               this->borderColors,
+               this->borderWidths,
+               this->borderRadii,
+               this->borderCurves,
+               this->borderStyles) ==
+        std::tie(
+               rhs.borderColors,
+               rhs.borderWidths,
+               rhs.borderRadii,
+               rhs.borderCurves,
+               rhs.borderStyles);
+  }
+
+  bool operator!=(const BorderMetrics &rhs) const {
+    return !(*this == rhs);
+  }
+};
+
+#ifdef ANDROID
+
+struct NativeDrawable {
+  enum class Kind : uint8_t {
+    Ripple,
+    ThemeAttr,
+  };
+
+  struct Ripple {
+    std::optional<int32_t> color{};
+    std::optional<Float> rippleRadius{};
+    bool borderless{false};
+
+    bool operator==(const Ripple &rhs) const {
+      return std::tie(this->color, this->borderless, this->rippleRadius) ==
+          std::tie(rhs.color, rhs.borderless, rhs.rippleRadius);
+    }
+  };
+
+  std::string themeAttr;
+  Ripple ripple;
+  Kind kind;
+
+  bool operator==(const NativeDrawable &rhs) const {
+    if (this->kind != rhs.kind)
+      return false;
+    switch (this->kind) {
+      case Kind::ThemeAttr:
+        return this->themeAttr == rhs.themeAttr;
+      case Kind::Ripple:
+        return this->ripple == rhs.ripple;
+    }
+  }
+
+  bool operator!=(const NativeDrawable &rhs) const {
+    return !(*this == rhs);
+  }
+
+  ~NativeDrawable() = default;
+};
+
+#endif
+
+} // namespace react
+} // namespace facebook