react-native-tvos 0.83.1-0 → 0.84.0-0rc0

package/ReactCommon/react/renderer/animationbackend/AnimatedProps.h

@@ -12,7 +12,47 @@
 
 namespace facebook::react {
 
-enum PropName { OPACITY, WIDTH, HEIGHT, BORDER_RADII, FLEX, TRANSFORM };
+enum PropName {
+  OPACITY,
+  WIDTH,
+  HEIGHT,
+  BORDER_RADII,
+  BORDER_WIDTH,
+  BORDER_COLOR,
+  MARGIN,
+  PADDING,
+  POSITION,
+  FLEX,
+  TRANSFORM,
+  BACKGROUND_COLOR,
+  SHADOW_COLOR,
+  SHADOW_OFFSET,
+  SHADOW_OPACITY,
+  SHADOW_RADIUS,
+  FILTER,
+  OUTLINE_COLOR,
+  OUTLINE_OFFSET,
+  OUTLINE_STYLE,
+  OUTLINE_WIDTH,
+  ALIGN_CONTENT,
+  ALIGN_ITEMS,
+  ALIGN_SELF,
+  ASPECT_RATIO,
+  BOX_SIZING,
+  DISPLAY,
+  FLEX_BASIS,
+  FLEX_DIRECTION,
+  ROW_GAP,
+  COLUMN_GAP,
+  FLEX_GROW,
+  FLEX_SHRINK,
+  FLEX_WRAP,
+  JUSTIFY_CONTENT,
+  MAX_HEIGHT,
+  MAX_WIDTH,
+  MIN_HEIGHT,
+  MIN_WIDTH
+};
 
 struct AnimatedPropBase {
   PropName propName;
@@ -33,8 +73,290 @@ T get(const std::unique_ptr<AnimatedPropBase> &animatedProp)
   return static_cast<AnimatedProp<T> *>(animatedProp.get())->value;
 }
 
+template <typename T>
+T get(const AnimatedPropBase &animatedProp)
+{
+  return static_cast<const AnimatedProp<T> &>(animatedProp).value;
+}
+
 struct AnimatedProps {
   std::vector<std::unique_ptr<AnimatedPropBase>> props;
   std::unique_ptr<RawProps> rawProps;
 };
+
+inline void cloneProp(BaseViewProps &viewProps, const AnimatedPropBase &animatedProp)
+{
+  switch (animatedProp.propName) {
+    case OPACITY:
+      viewProps.opacity = get<Float>(animatedProp);
+      break;
+
+    case WIDTH:
+      viewProps.yogaStyle.setDimension(yoga::Dimension::Width, get<yoga::Style::SizeLength>(animatedProp));
+      break;
+
+    case HEIGHT:
+      viewProps.yogaStyle.setDimension(yoga::Dimension::Height, get<yoga::Style::SizeLength>(animatedProp));
+      break;
+
+    case BORDER_RADII:
+      viewProps.borderRadii = get<CascadedBorderRadii>(animatedProp);
+      break;
+
+    case BORDER_WIDTH: {
+      const auto &borderWidths = get<CascadedRectangleEdges<yoga::StyleLength>>(animatedProp);
+      if (borderWidths.left.has_value()) {
+        viewProps.yogaStyle.setBorder(yoga::Edge::Left, borderWidths.left.value());
+      }
+      if (borderWidths.top.has_value()) {
+        viewProps.yogaStyle.setBorder(yoga::Edge::Top, borderWidths.top.value());
+      }
+      if (borderWidths.right.has_value()) {
+        viewProps.yogaStyle.setBorder(yoga::Edge::Right, borderWidths.right.value());
+      }
+      if (borderWidths.bottom.has_value()) {
+        viewProps.yogaStyle.setBorder(yoga::Edge::Bottom, borderWidths.bottom.value());
+      }
+      if (borderWidths.start.has_value()) {
+        viewProps.yogaStyle.setBorder(yoga::Edge::Start, borderWidths.start.value());
+      }
+      if (borderWidths.end.has_value()) {
+        viewProps.yogaStyle.setBorder(yoga::Edge::End, borderWidths.end.value());
+      }
+      if (borderWidths.horizontal.has_value()) {
+        viewProps.yogaStyle.setBorder(yoga::Edge::Horizontal, borderWidths.horizontal.value());
+      }
+      if (borderWidths.vertical.has_value()) {
+        viewProps.yogaStyle.setBorder(yoga::Edge::Vertical, borderWidths.vertical.value());
+      }
+      if (borderWidths.all.has_value()) {
+        viewProps.yogaStyle.setBorder(yoga::Edge::All, borderWidths.all.value());
+      }
+      break;
+    }
+
+    case BORDER_COLOR:
+      viewProps.borderColors = get<CascadedBorderColors>(animatedProp);
+      break;
+
+    case MARGIN: {
+      const auto &margins = get<CascadedRectangleEdges<yoga::StyleLength>>(animatedProp);
+      if (margins.left.has_value()) {
+        viewProps.yogaStyle.setMargin(yoga::Edge::Left, margins.left.value());
+      }
+      if (margins.top.has_value()) {
+        viewProps.yogaStyle.setMargin(yoga::Edge::Top, margins.top.value());
+      }
+      if (margins.right.has_value()) {
+        viewProps.yogaStyle.setMargin(yoga::Edge::Right, margins.right.value());
+      }
+      if (margins.bottom.has_value()) {
+        viewProps.yogaStyle.setMargin(yoga::Edge::Bottom, margins.bottom.value());
+      }
+      if (margins.start.has_value()) {
+        viewProps.yogaStyle.setMargin(yoga::Edge::Start, margins.start.value());
+      }
+      if (margins.end.has_value()) {
+        viewProps.yogaStyle.setMargin(yoga::Edge::End, margins.end.value());
+      }
+      if (margins.horizontal.has_value()) {
+        viewProps.yogaStyle.setMargin(yoga::Edge::Horizontal, margins.horizontal.value());
+      }
+      if (margins.vertical.has_value()) {
+        viewProps.yogaStyle.setMargin(yoga::Edge::Vertical, margins.vertical.value());
+      }
+      if (margins.all.has_value()) {
+        viewProps.yogaStyle.setMargin(yoga::Edge::All, margins.all.value());
+      }
+      break;
+    }
+
+    case PADDING: {
+      const auto &paddings = get<CascadedRectangleEdges<yoga::StyleLength>>(animatedProp);
+      if (paddings.left.has_value()) {
+        viewProps.yogaStyle.setPadding(yoga::Edge::Left, paddings.left.value());
+      }
+      if (paddings.top.has_value()) {
+        viewProps.yogaStyle.setPadding(yoga::Edge::Top, paddings.top.value());
+      }
+      if (paddings.right.has_value()) {
+        viewProps.yogaStyle.setPadding(yoga::Edge::Right, paddings.right.value());
+      }
+      if (paddings.bottom.has_value()) {
+        viewProps.yogaStyle.setPadding(yoga::Edge::Bottom, paddings.bottom.value());
+      }
+      if (paddings.start.has_value()) {
+        viewProps.yogaStyle.setPadding(yoga::Edge::Start, paddings.start.value());
+      }
+      if (paddings.end.has_value()) {
+        viewProps.yogaStyle.setPadding(yoga::Edge::End, paddings.end.value());
+      }
+      if (paddings.horizontal.has_value()) {
+        viewProps.yogaStyle.setPadding(yoga::Edge::Horizontal, paddings.horizontal.value());
+      }
+      if (paddings.vertical.has_value()) {
+        viewProps.yogaStyle.setPadding(yoga::Edge::Vertical, paddings.vertical.value());
+      }
+      if (paddings.all.has_value()) {
+        viewProps.yogaStyle.setPadding(yoga::Edge::All, paddings.all.value());
+      }
+      break;
+    }
+
+    case POSITION: {
+      const auto &positions = get<CascadedRectangleEdges<yoga::StyleLength>>(animatedProp);
+      if (positions.left.has_value()) {
+        viewProps.yogaStyle.setPosition(yoga::Edge::Left, positions.left.value());
+      }
+      if (positions.top.has_value()) {
+        viewProps.yogaStyle.setPosition(yoga::Edge::Top, positions.top.value());
+      }
+      if (positions.right.has_value()) {
+        viewProps.yogaStyle.setPosition(yoga::Edge::Right, positions.right.value());
+      }
+      if (positions.bottom.has_value()) {
+        viewProps.yogaStyle.setPosition(yoga::Edge::Bottom, positions.bottom.value());
+      }
+      if (positions.start.has_value()) {
+        viewProps.yogaStyle.setPosition(yoga::Edge::Start, positions.start.value());
+      }
+      if (positions.end.has_value()) {
+        viewProps.yogaStyle.setPosition(yoga::Edge::End, positions.end.value());
+      }
+      if (positions.horizontal.has_value()) {
+        viewProps.yogaStyle.setPosition(yoga::Edge::Horizontal, positions.horizontal.value());
+      }
+      if (positions.vertical.has_value()) {
+        viewProps.yogaStyle.setPosition(yoga::Edge::Vertical, positions.vertical.value());
+      }
+      if (positions.all.has_value()) {
+        viewProps.yogaStyle.setPosition(yoga::Edge::All, positions.all.value());
+      }
+      break;
+    }
+
+    case FLEX:
+      viewProps.yogaStyle.setFlex(get<yoga::FloatOptional>(animatedProp));
+      break;
+
+    case TRANSFORM:
+      viewProps.transform = get<Transform>(animatedProp);
+      break;
+
+    case BACKGROUND_COLOR:
+      viewProps.backgroundColor = get<SharedColor>(animatedProp);
+      break;
+
+    case SHADOW_COLOR:
+      viewProps.shadowColor = get<SharedColor>(animatedProp);
+      break;
+
+    case SHADOW_OFFSET:
+      viewProps.shadowOffset = get<Size>(animatedProp);
+      break;
+
+    case SHADOW_OPACITY:
+      viewProps.shadowOpacity = get<Float>(animatedProp);
+      break;
+
+    case SHADOW_RADIUS:
+      viewProps.shadowRadius = get<Float>(animatedProp);
+      break;
+
+    case FILTER:
+      viewProps.filter = get<std::vector<FilterFunction>>(animatedProp);
+      break;
+
+    case OUTLINE_COLOR:
+      viewProps.outlineColor = get<SharedColor>(animatedProp);
+      break;
+
+    case OUTLINE_OFFSET:
+      viewProps.outlineOffset = get<Float>(animatedProp);
+      break;
+
+    case OUTLINE_STYLE:
+      viewProps.outlineStyle = get<OutlineStyle>(animatedProp);
+      break;
+
+    case OUTLINE_WIDTH:
+      viewProps.outlineWidth = get<Float>(animatedProp);
+      break;
+
+    case ALIGN_CONTENT:
+      viewProps.yogaStyle.setAlignContent(get<yoga::Align>(animatedProp));
+      break;
+
+    case ALIGN_ITEMS:
+      viewProps.yogaStyle.setAlignItems(get<yoga::Align>(animatedProp));
+      break;
+
+    case ALIGN_SELF:
+      viewProps.yogaStyle.setAlignSelf(get<yoga::Align>(animatedProp));
+      break;
+
+    case ASPECT_RATIO:
+      viewProps.yogaStyle.setAspectRatio(get<yoga::FloatOptional>(animatedProp));
+      break;
+
+    case BOX_SIZING:
+      viewProps.yogaStyle.setBoxSizing(get<yoga::BoxSizing>(animatedProp));
+      break;
+
+    case DISPLAY:
+      viewProps.yogaStyle.setDisplay(get<yoga::Display>(animatedProp));
+      break;
+
+    case FLEX_BASIS:
+      viewProps.yogaStyle.setFlexBasis(get<yoga::Style::SizeLength>(animatedProp));
+      break;
+
+    case FLEX_DIRECTION:
+      viewProps.yogaStyle.setFlexDirection(get<yoga::FlexDirection>(animatedProp));
+      break;
+
+    case ROW_GAP:
+      viewProps.yogaStyle.setGap(yoga::Gutter::Row, get<yoga::Style::Length>(animatedProp));
+      break;
+
+    case COLUMN_GAP:
+      viewProps.yogaStyle.setGap(yoga::Gutter::Column, get<yoga::Style::Length>(animatedProp));
+      break;
+
+    case FLEX_GROW:
+      viewProps.yogaStyle.setFlexGrow(get<yoga::FloatOptional>(animatedProp));
+      break;
+
+    case FLEX_SHRINK:
+      viewProps.yogaStyle.setFlexShrink(get<yoga::FloatOptional>(animatedProp));
+      break;
+
+    case FLEX_WRAP:
+      viewProps.yogaStyle.setFlexWrap(get<yoga::Wrap>(animatedProp));
+      break;
+
+    case JUSTIFY_CONTENT:
+      viewProps.yogaStyle.setJustifyContent(get<yoga::Justify>(animatedProp));
+      break;
+
+    case MAX_HEIGHT:
+      viewProps.yogaStyle.setMaxDimension(yoga::Dimension::Height, get<yoga::Style::SizeLength>(animatedProp));
+      break;
+
+    case MAX_WIDTH:
+      viewProps.yogaStyle.setMaxDimension(yoga::Dimension::Width, get<yoga::Style::SizeLength>(animatedProp));
+      break;
+
+    case MIN_HEIGHT:
+      viewProps.yogaStyle.setMinDimension(yoga::Dimension::Height, get<yoga::Style::SizeLength>(animatedProp));
+      break;
+
+    case MIN_WIDTH:
+      viewProps.yogaStyle.setMinDimension(yoga::Dimension::Width, get<yoga::Style::SizeLength>(animatedProp));
+      break;
+
+    default:
+      break;
+  }
+}
 } // namespace facebook::react

package/ReactCommon/react/renderer/animationbackend/AnimatedPropsBuilder.h

@@ -7,6 +7,7 @@
 
 #pragma once
 #include <react/renderer/components/view/BaseViewProps.h>
+#include <react/renderer/graphics/Filter.h>
 #include "AnimatedProps.h"
 
 namespace facebook::react {
@@ -31,10 +32,142 @@ struct AnimatedPropsBuilder {
   {
     props.push_back(std::make_unique<AnimatedProp<CascadedBorderRadii>>(BORDER_RADII, value));
   }
+  void setBorderWidth(CascadedRectangleEdges<yoga::StyleLength> &value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<CascadedRectangleEdges<yoga::StyleLength>>>(BORDER_WIDTH, value));
+  }
+  void setBorderColor(CascadedBorderColors &value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<CascadedBorderColors>>(BORDER_COLOR, value));
+  }
+  void setMargin(CascadedRectangleEdges<yoga::StyleLength> &value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<CascadedRectangleEdges<yoga::StyleLength>>>(MARGIN, value));
+  }
+  void setPadding(CascadedRectangleEdges<yoga::StyleLength> &value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<CascadedRectangleEdges<yoga::StyleLength>>>(PADDING, value));
+  }
+  void setPosition(CascadedRectangleEdges<yoga::StyleLength> &value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<CascadedRectangleEdges<yoga::StyleLength>>>(POSITION, value));
+  }
   void setTransform(Transform &t)
   {
     props.push_back(std::make_unique<AnimatedProp<Transform>>(TRANSFORM, std::move(t)));
   }
+  void setBackgroundColor(SharedColor value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<SharedColor>>(BACKGROUND_COLOR, value));
+  }
+  void setShadowColor(SharedColor value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<SharedColor>>(SHADOW_COLOR, value));
+  }
+  void setShadowOpacity(Float value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<Float>>(SHADOW_OPACITY, value));
+  }
+  void setShadowRadius(Float value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<Float>>(SHADOW_RADIUS, value));
+  }
+  void setShadowOffset(Size value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<Size>>(SHADOW_OFFSET, value));
+  }
+  void setFilter(const std::vector<FilterFunction> &value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<std::vector<FilterFunction>>>(FILTER, std::move(value)));
+  }
+  void setOutlineColor(SharedColor value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<SharedColor>>(OUTLINE_COLOR, value));
+  }
+  void setOutlineOffset(Float value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<Float>>(OUTLINE_OFFSET, value));
+  }
+  void setOutlineStyle(OutlineStyle value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<OutlineStyle>>(OUTLINE_STYLE, value));
+  }
+  void setOutlineWidth(Float value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<Float>>(OUTLINE_WIDTH, value));
+  }
+  void setAlignContent(yoga::Align value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<yoga::Align>>(ALIGN_CONTENT, value));
+  }
+  void setAlignItems(yoga::Align value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<yoga::Align>>(ALIGN_ITEMS, value));
+  }
+  void setAlignSelf(yoga::Align value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<yoga::Align>>(ALIGN_SELF, value));
+  }
+  void setAspectRatio(yoga::FloatOptional value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<yoga::FloatOptional>>(ASPECT_RATIO, value));
+  }
+  void setBoxSizing(yoga::BoxSizing value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<yoga::BoxSizing>>(BOX_SIZING, value));
+  }
+  void setDisplay(yoga::Display value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<yoga::Display>>(DISPLAY, value));
+  }
+  void setFlexBasis(yoga::Style::SizeLength value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<yoga::Style::SizeLength>>(FLEX_BASIS, value));
+  }
+  void setFlexDirection(yoga::FlexDirection value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<yoga::FlexDirection>>(FLEX_DIRECTION, value));
+  }
+  void setRowGap(yoga::Style::Length value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<yoga::Style::Length>>(ROW_GAP, value));
+  }
+  void setColumnGap(yoga::Style::Length value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<yoga::Style::Length>>(COLUMN_GAP, value));
+  }
+  void setFlexGrow(yoga::FloatOptional value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<yoga::FloatOptional>>(FLEX_GROW, value));
+  }
+  void setFlexShrink(yoga::FloatOptional value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<yoga::FloatOptional>>(FLEX_SHRINK, value));
+  }
+  void setFlexWrap(yoga::Wrap value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<yoga::Wrap>>(FLEX_WRAP, value));
+  }
+  void setJustifyContent(yoga::Justify value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<yoga::Justify>>(JUSTIFY_CONTENT, value));
+  }
+  void setMaxHeight(yoga::Style::SizeLength value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<yoga::Style::SizeLength>>(MAX_HEIGHT, value));
+  }
+  void setMaxWidth(yoga::Style::SizeLength value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<yoga::Style::SizeLength>>(MAX_WIDTH, value));
+  }
+  void setMinHeight(yoga::Style::SizeLength value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<yoga::Style::SizeLength>>(MIN_HEIGHT, value));
+  }
+  void setMinWidth(yoga::Style::SizeLength value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<yoga::Style::SizeLength>>(MIN_WIDTH, value));
+  }
   void storeDynamic(folly::dynamic &d)
   {
     rawProps = std::make_unique<RawProps>(std::move(d));

package/ReactCommon/react/renderer/animationbackend/AnimatedPropsRegistry.cpp

@@ -0,0 +1,100 @@
+/*
+ * 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 "AnimatedPropsRegistry.h"
+#include <react/renderer/core/PropsParserContext.h>
+#include "AnimatedProps.h"
+
+namespace facebook::react {
+
+void AnimatedPropsRegistry::update(
+    const std::unordered_map<SurfaceId, SurfaceUpdates>& surfaceUpdates) {
+  auto lock = std::lock_guard(mutex_);
+  for (const auto& [surfaceId, updates] : surfaceUpdates) {
+    auto& surfaceContext = surfaceContexts_[surfaceId];
+    auto& pendingMap = surfaceContext.pendingMap;
+    auto& pendingFamilies = surfaceContext.pendingFamilies;
+
+    auto& updatesMap = updates.propsMap;
+    auto& updatesFamilies = updates.families;
+
+    for (auto& family : updatesFamilies) {
+      pendingFamilies.insert(family);
+    }
+
+    for (auto& [tag, animatedProps] : updatesMap) {
+      auto it = pendingMap.find(tag);
+      if (it == pendingMap.end()) {
+        it = pendingMap.insert_or_assign(tag, std::make_unique<PropsSnapshot>())
+                 .first;
+      }
+      auto& snapshot = it->second;
+      auto& viewProps = snapshot->props;
+
+      if (animatedProps.rawProps) {
+        const auto& newRawProps = *animatedProps.rawProps;
+        auto& currentRawProps = snapshot->rawProps;
+
+        if (currentRawProps) {
+          auto newRawPropsDynamic = newRawProps.toDynamic();
+          currentRawProps->merge_patch(newRawPropsDynamic);
+        } else {
+          currentRawProps =
+              std::make_unique<folly::dynamic>(newRawProps.toDynamic());
+        }
+      }
+      for (const auto& animatedProp : animatedProps.props) {
+        snapshot->propNames.insert(animatedProp->propName);
+        cloneProp(viewProps, *animatedProp);
+      }
+    }
+  }
+}
+
+std::pair<std::unordered_set<const ShadowNodeFamily*>&, SnapshotMap&>
+AnimatedPropsRegistry::getMap(SurfaceId surfaceId) {
+  auto lock = std::lock_guard(mutex_);
+  auto& [pendingMap, map, pendingFamilies, families] =
+      surfaceContexts_[surfaceId];
+
+  for (auto& family : pendingFamilies) {
+    families.insert(family);
+  }
+  for (auto& [tag, propsSnapshot] : pendingMap) {
+    auto currentIt = map.find(tag);
+    if (currentIt == map.end()) {
+      map.insert_or_assign(tag, std::move(propsSnapshot));
+    } else {
+      auto& currentSnapshot = currentIt->second;
+      if (propsSnapshot->rawProps) {
+        if (currentSnapshot->rawProps) {
+          currentSnapshot->rawProps->merge_patch(*propsSnapshot->rawProps);
+        } else {
+          currentSnapshot->rawProps = std::move(propsSnapshot->rawProps);
+        }
+      }
+      for (auto& propName : propsSnapshot->propNames) {
+        currentSnapshot->propNames.insert(propName);
+        updateProp(propName, currentSnapshot->props, *propsSnapshot);
+      }
+    }
+  }
+  pendingMap.clear();
+  pendingFamilies.clear();
+
+  return {families, map};
+}
+
+void AnimatedPropsRegistry::clear(SurfaceId surfaceId) {
+  auto lock = std::lock_guard(mutex_);
+
+  auto& surfaceContext = surfaceContexts_[surfaceId];
+  surfaceContext.families.clear();
+  surfaceContext.map.clear();
+}
+
+} // namespace facebook::react