Add support for other view props to the Animation Backend (#54947)

Summary:

## Summary:
Adds support for `borderCurves`, `borderStyles`, `pointerEvents`, `isolation`, `cursor`, `boxShadow`, and `mixBlendMode` props to be passed as `AnimatedProp` to the animation backend.

## Changelog:
[General][Added] - Added support for `borderCurves`, `borderStyles`, `pointerEvents`, `isolation`, `cursor`, `boxShadow`, and `mixBlendMode` props to the AnimationBackend.

Differential Revision: D89544552

Author: coado

packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedPropSerializer.cpp

@@ -198,6 +198,313 @@ void packOutlineWidth(
   dyn.insert("outlineWidth", get<Float>(animatedProp));
 }
 
+void packBorderCurveEdge(
+    folly::dynamic& dyn,
+    const std::string& propName,
+    const std::optional<BorderCurve>& curveValue) {
+  if (curveValue.has_value()) {
+    std::string curveStr;
+    switch (curveValue.value()) {
+      case BorderCurve::Circular:
+        curveStr = "circular";
+        break;
+      case BorderCurve::Continuous:
+        curveStr = "continuous";
+        break;
+    }
+    dyn.insert(propName, curveStr);
+  }
+}
+
+void packBorderCurves(
+    folly::dynamic& dyn,
+    const AnimatedPropBase& animatedProp) {
+  const auto& borderCurves = get<CascadedBorderCurves>(animatedProp);
+
+  packBorderCurveEdge(dyn, "borderTopLeftCurve", borderCurves.topLeft);
+  packBorderCurveEdge(dyn, "borderTopRightCurve", borderCurves.topRight);
+  packBorderCurveEdge(dyn, "borderBottomLeftCurve", borderCurves.bottomLeft);
+  packBorderCurveEdge(dyn, "borderBottomRightCurve", borderCurves.bottomRight);
+
+  if (borderCurves.all.has_value()) {
+    std::string curveStr;
+    switch (borderCurves.all.value()) {
+      case BorderCurve::Circular:
+        curveStr = "circular";
+        break;
+      case BorderCurve::Continuous:
+        curveStr = "continuous";
+        break;
+    }
+    dyn.insert("borderCurve", curveStr);
+  }
+}
+
+std::string borderStyleToString(BorderStyle style) {
+  switch (style) {
+    case BorderStyle::Solid:
+      return "solid";
+    case BorderStyle::Dotted:
+      return "dotted";
+    case BorderStyle::Dashed:
+      return "dashed";
+  }
+}
+
+void packBorderStyleEdge(
+    folly::dynamic& dyn,
+    const std::string& propName,
+    const std::optional<BorderStyle>& styleValue) {
+  if (styleValue.has_value()) {
+    dyn.insert(propName, borderStyleToString(styleValue.value()));
+  }
+}
+
+void packBorderStyles(
+    folly::dynamic& dyn,
+    const AnimatedPropBase& animatedProp) {
+  const auto& borderStyles = get<CascadedBorderStyles>(animatedProp);
+
+  packBorderStyleEdge(dyn, "borderLeftStyle", borderStyles.left);
+  packBorderStyleEdge(dyn, "borderTopStyle", borderStyles.top);
+  packBorderStyleEdge(dyn, "borderRightStyle", borderStyles.right);
+  packBorderStyleEdge(dyn, "borderBottomStyle", borderStyles.bottom);
+  packBorderStyleEdge(dyn, "borderStartStyle", borderStyles.start);
+  packBorderStyleEdge(dyn, "borderEndStyle", borderStyles.end);
+
+  if (borderStyles.all.has_value()) {
+    dyn.insert("borderStyle", borderStyleToString(borderStyles.all.value()));
+  }
+}
+
+void packPointerEvents(
+    folly::dynamic& dyn,
+    const AnimatedPropBase& animatedProp) {
+  const auto& pointerEvents = get<PointerEventsMode>(animatedProp);
+  std::string pointerEventsStr;
+  switch (pointerEvents) {
+    case PointerEventsMode::Auto:
+      pointerEventsStr = "auto";
+      break;
+    case PointerEventsMode::None:
+      pointerEventsStr = "none";
+      break;
+    case PointerEventsMode::BoxNone:
+      pointerEventsStr = "box-none";
+      break;
+    case PointerEventsMode::BoxOnly:
+      pointerEventsStr = "box-only";
+      break;
+  }
+  dyn.insert("pointerEvents", pointerEventsStr);
+}
+
+void packIsolation(folly::dynamic& dyn, const AnimatedPropBase& animatedProp) {
+  const auto& isolation = get<Isolation>(animatedProp);
+  std::string isolationStr;
+  switch (isolation) {
+    case Isolation::Auto:
+      isolationStr = "auto";
+      break;
+    case Isolation::Isolate:
+      isolationStr = "isolate";
+      break;
+  }
+  dyn.insert("isolation", isolationStr);
+}
+
+void packCursor(folly::dynamic& dyn, const AnimatedPropBase& animatedProp) {
+  const auto& cursor = get<Cursor>(animatedProp);
+  std::string cursorStr;
+  switch (cursor) {
+    case Cursor::Auto:
+      cursorStr = "auto";
+      break;
+    case Cursor::Alias:
+      cursorStr = "alias";
+      break;
+    case Cursor::AllScroll:
+      cursorStr = "all-scroll";
+      break;
+    case Cursor::Cell:
+      cursorStr = "cell";
+      break;
+    case Cursor::ColResize:
+      cursorStr = "col-resize";
+      break;
+    case Cursor::ContextMenu:
+      cursorStr = "context-menu";
+      break;
+    case Cursor::Copy:
+      cursorStr = "copy";
+      break;
+    case Cursor::Crosshair:
+      cursorStr = "crosshair";
+      break;
+    case Cursor::Default:
+      cursorStr = "default";
+      break;
+    case Cursor::EResize:
+      cursorStr = "e-resize";
+      break;
+    case Cursor::EWResize:
+      cursorStr = "ew-resize";
+      break;
+    case Cursor::Grab:
+      cursorStr = "grab";
+      break;
+    case Cursor::Grabbing:
+      cursorStr = "grabbing";
+      break;
+    case Cursor::Help:
+      cursorStr = "help";
+      break;
+    case Cursor::Move:
+      cursorStr = "move";
+      break;
+    case Cursor::NResize:
+      cursorStr = "n-resize";
+      break;
+    case Cursor::NEResize:
+      cursorStr = "ne-resize";
+      break;
+    case Cursor::NESWResize:
+      cursorStr = "nesw-resize";
+      break;
+    case Cursor::NSResize:
+      cursorStr = "ns-resize";
+      break;
+    case Cursor::NWResize:
+      cursorStr = "nw-resize";
+      break;
+    case Cursor::NWSEResize:
+      cursorStr = "nwse-resize";
+      break;
+    case Cursor::NoDrop:
+      cursorStr = "no-drop";
+      break;
+    case Cursor::None:
+      cursorStr = "none";
+      break;
+    case Cursor::NotAllowed:
+      cursorStr = "not-allowed";
+      break;
+    case Cursor::Pointer:
+      cursorStr = "pointer";
+      break;
+    case Cursor::Progress:
+      cursorStr = "progress";
+      break;
+    case Cursor::RowResize:
+      cursorStr = "row-resize";
+      break;
+    case Cursor::SResize:
+      cursorStr = "s-resize";
+      break;
+    case Cursor::SEResize:
+      cursorStr = "se-resize";
+      break;
+    case Cursor::SWResize:
+      cursorStr = "sw-resize";
+      break;
+    case Cursor::Text:
+      cursorStr = "text";
+      break;
+    case Cursor::Url:
+      cursorStr = "url";
+      break;
+    case Cursor::WResize:
+      cursorStr = "w-resize";
+      break;
+    case Cursor::Wait:
+      cursorStr = "wait";
+      break;
+    case Cursor::ZoomIn:
+      cursorStr = "zoom-in";
+      break;
+    case Cursor::ZoomOut:
+      cursorStr = "zoom-out";
+      break;
+  }
+  dyn.insert("cursor", cursorStr);
+}
+
+void packBoxShadow(folly::dynamic& dyn, const AnimatedPropBase& animatedProp) {
+  const auto& boxShadows = get<std::vector<BoxShadow>>(animatedProp);
+  auto shadowArray = folly::dynamic::array();
+  for (const auto& shadow : boxShadows) {
+    folly::dynamic shadowObj = folly::dynamic::object();
+    shadowObj["offsetX"] = shadow.offsetX;
+    shadowObj["offsetY"] = shadow.offsetY;
+    shadowObj["blurRadius"] = shadow.blurRadius;
+    shadowObj["spreadDistance"] = shadow.spreadDistance;
+    shadowObj["inset"] = shadow.inset;
+    if (shadow.color) {
+      shadowObj["color"] = static_cast<int32_t>(*shadow.color);
+    }
+    shadowArray.push_back(shadowObj);
+  }
+  dyn.insert("boxShadow", shadowArray);
+}
+
+void packMixBlendMode(
+    folly::dynamic& dyn,
+    const AnimatedPropBase& animatedProp) {
+  const auto& blendMode = get<BlendMode>(animatedProp);
+  std::string blendModeStr;
+  switch (blendMode) {
+    case BlendMode::Normal:
+      blendModeStr = "normal";
+      break;
+    case BlendMode::Multiply:
+      blendModeStr = "multiply";
+      break;
+    case BlendMode::Screen:
+      blendModeStr = "screen";
+      break;
+    case BlendMode::Overlay:
+      blendModeStr = "overlay";
+      break;
+    case BlendMode::Darken:
+      blendModeStr = "darken";
+      break;
+    case BlendMode::Lighten:
+      blendModeStr = "lighten";
+      break;
+    case BlendMode::ColorDodge:
+      blendModeStr = "color-dodge";
+      break;
+    case BlendMode::ColorBurn:
+      blendModeStr = "color-burn";
+      break;
+    case BlendMode::HardLight:
+      blendModeStr = "hard-light";
+      break;
+    case BlendMode::SoftLight:
+      blendModeStr = "soft-light";
+      break;
+    case BlendMode::Difference:
+      blendModeStr = "difference";
+      break;
+    case BlendMode::Exclusion:
+      blendModeStr = "exclusion";
+      break;
+    case BlendMode::Hue:
+      blendModeStr = "hue";
+      break;
+    case BlendMode::Saturation:
+      blendModeStr = "saturation";
+      break;
+    case BlendMode::Color:
+      blendModeStr = "color";
+      break;
+    case BlendMode::Luminosity:
+      blendModeStr = "luminosity";
+      break;
+  }
+  dyn.insert("mixBlendMode", blendModeStr);
+}
+
 void packAnimatedProp(
     folly::dynamic& dyn,
     const std::unique_ptr<AnimatedPropBase>& animatedProp) {
@@ -258,6 +565,34 @@ void packAnimatedProp(
       packOutlineWidth(dyn, *animatedProp);
       break;
 
+    case BORDER_CURVES:
+      packBorderCurves(dyn, *animatedProp);
+      break;
+
+    case BORDER_STYLES:
+      packBorderStyles(dyn, *animatedProp);
+      break;
+
+    case POINTER_EVENTS:
+      packPointerEvents(dyn, *animatedProp);
+      break;
+
+    case ISOLATION:
+      packIsolation(dyn, *animatedProp);
+      break;
+
+    case CURSOR:
+      packCursor(dyn, *animatedProp);
+      break;
+
+    case BOX_SHADOW:
+      packBoxShadow(dyn, *animatedProp);
+      break;
+
+    case MIX_BLEND_MODE:
+      packMixBlendMode(dyn, *animatedProp);
+      break;
+
     case WIDTH:
     case HEIGHT:
     case FLEX: