fabric/view module

Summary: Defines `<View>`: Yoga-powered, Accessible and styleable component.

Reviewed By: fkgozali

Differential Revision: D7230673

fbshipit-source-id: 08a1d8626c0b41260fafdca938d4fe9489b1b793

ReactCommon/fabric/BUCK

@@ -1,4 +1,4 @@
-load("@xplat//configurations/buck/apple:flag_defs.bzl", "get_debug_preprocessor_flags")
+load("//configurations/buck/apple:flag_defs.bzl", "get_debug_preprocessor_flags")
 load("//ReactNative:DEFS.bzl", "IS_OSS_BUILD", "react_native_xplat_target", "rn_xplat_cxx_library", "APPLE_INSPECTOR_FLAGS")
 
 APPLE_COMPILER_FLAGS = []
@@ -40,5 +40,6 @@ rn_xplat_cxx_library(
         "xplat//folly:molly",
         "xplat//third-party/glog:glog",
         react_native_xplat_target("fabric/core:core"),
+        react_native_xplat_target("fabric/view:view"),
     ],
 )

ReactCommon/fabric/core/BUCK

@@ -1,4 +1,4 @@
-load("@xplat//configurations/buck/apple:flag_defs.bzl", "get_debug_preprocessor_flags")
+load("//configurations/buck/apple:flag_defs.bzl", "get_debug_preprocessor_flags")
 load("//ReactNative:DEFS.bzl", "IS_OSS_BUILD", "react_native_xplat_target", "rn_xplat_cxx_library", "APPLE_INSPECTOR_FLAGS")
 
 APPLE_COMPILER_FLAGS = []

ReactCommon/fabric/graphics/Geometry.h

@@ -2,15 +2,21 @@
 
 #pragma once
 
+#include <CoreGraphics/CGBase.h>
+
 namespace facebook {
 namespace react {
 
 /*
  * Exact type of float numbers which ideally should match a type behing
- * platform- and chip-architecture-specific float type (something like
- * CGFloat on iOS).
+ * platform- and chip-architecture-specific float type.
+ */
+using Float = CGFloat;
+
+/*
+ * Large positive number signifies that the `Float` values is `undefined`.
  */
-using Float = double;
+const Float kFloatUndefined = CGFLOAT_MAX;
 
 /*
  * Point

ReactCommon/fabric/view/BUCK

@@ -0,0 +1,52 @@
+load("//configurations/buck/apple:flag_defs.bzl", "get_application_ios_flags", "get_debug_preprocessor_flags", "OBJC_ARC_PREPROCESSOR_FLAGS")
+load("//ReactNative:DEFS.bzl", "IS_OSS_BUILD", "rn_xplat_cxx_library", "APPLE_INSPECTOR_FLAGS")
+load("//ReactNative:DEFS.bzl", "react_native_xplat_target")
+
+CXX_LIBRARY_COMPILER_FLAGS = [
+    "-std=c++14",
+    "-Wall",
+]
+
+rn_xplat_cxx_library(
+    name = "view",
+    srcs = glob(
+        [
+            "**/*.cpp",
+        ],
+    ),
+    headers = glob(
+        [
+            "**/*.h",
+        ],
+    ),
+    header_namespace = "",
+    exported_headers = subdir_glob(
+        [
+            ("", "*.h"),
+            ("accessibility", "*.h"),
+            ("yoga", "*.h"),
+        ],
+        prefix = "fabric/view",
+    ),
+    compiler_flags = CXX_LIBRARY_COMPILER_FLAGS + [
+        "-fexceptions",
+        "-frtti",
+    ],
+    force_static = True,
+    preprocessor_flags = [
+        "-DLOG_TAG=\"ReactNative\"",
+        "-DWITH_FBSYSTRACE=1",
+    ],
+    visibility = ["PUBLIC"],
+    deps = [
+        "xplat//fbsystrace:fbsystrace",
+        "xplat//folly:headers_only",
+        "xplat//folly:memory",
+        "xplat//folly:molly",
+        "xplat//third-party/glog:glog",
+        "xplat//yoga:yoga",
+        react_native_xplat_target("fabric/debug:debug"),
+        react_native_xplat_target("fabric/core:core"),
+        react_native_xplat_target("fabric/graphics:graphics"),
+    ],
+)

ReactCommon/fabric/view/ViewComponentDescriptor.h

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * 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 <fabric/core/ConcreteComponentDescriptor.h>
+#include <fabric/view/ViewShadowNode.h>
+
+namespace facebook {
+namespace react {
+
+class ViewComponentDescriptor: public ConcreteComponentDescriptor<ViewShadowNode> {
+public:
+  ComponentName getComponentName() const override {
+    return "View";
+  }
+};
+
+} // namespace react
+} // namespace facebook

ReactCommon/fabric/view/ViewProps.cpp

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include "ViewProps.h"
+
+#include <fabric/debug/DebugStringConvertibleItem.h>
+#include <fabric/graphics/graphicValuesConversions.h>
+
+namespace facebook {
+namespace react {
+
+void ViewProps::apply(const RawProps &rawProps) {
+  Props::apply(rawProps);
+  YogaStylableProps::apply(rawProps);
+
+  for (auto const &pair : rawProps) {
+    auto const &name = pair.first;
+    auto const &value = pair.second;
+
+    #pragma mark View Specific Properties
+
+    if (name == "zIndex") {
+      zIndex_ = value.asInt();
+      continue;
+    }
+
+    if (name == "opacity") {
+      opacity_ = value.asDouble();
+      continue;
+    }
+
+    if (name == "color") {
+      foregroundColor_ = colorFromDynamic(value);
+      continue;
+    }
+
+    if (name == "backgroundColor") {
+      backgroundColor_ = colorFromDynamic(value);
+      continue;
+    }
+  }
+}
+
+SharedDebugStringConvertibleList ViewProps::getDebugProps() const {
+  ViewProps defaultProps = {};
+
+  SharedDebugStringConvertibleList list = {};
+
+#define VIEW_PROPS_ADD_TO_SET(stringName, propertyName, accessor, convertor) \
+  if (propertyName != defaultProps.propertyName) { \
+    list.push_back(std::make_shared<DebugStringConvertibleItem>(#stringName, convertor(propertyName accessor))); \
+  }
+
+  VIEW_PROPS_ADD_TO_SET(zIndex, zIndex_, , std::to_string)
+  VIEW_PROPS_ADD_TO_SET(opacity, opacity_, , std::to_string)
+
+  VIEW_PROPS_ADD_TO_SET(backgroundColor, backgroundColor_, , colorNameFromColor)
+  VIEW_PROPS_ADD_TO_SET(foregroundColor, foregroundColor_, , colorNameFromColor)
+
+  // Accessibility Props
+  auto accessibilityPropsList = AccessibilityProps::getDebugProps();
+  std::move(accessibilityPropsList.begin(), accessibilityPropsList.end(), std::back_inserter(list));
+
+  // Yoga styles
+  list.push_back(std::make_shared<DebugStringConvertibleItem>("style", "", YogaStylableProps::getDebugProps()));
+
+  return list;
+}
+
+} // namespace react
+} // namespace facebook

ReactCommon/fabric/view/ViewProps.h

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * 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 <fabric/core/Props.h>
+#include <fabric/graphics/Geometry.h>
+#include <fabric/graphics/Color.h>
+#include <fabric/view/YogaStylableProps.h>
+#include <fabric/view/AccessibilityProps.h>
+
+namespace facebook {
+namespace react {
+
+class ViewProps;
+
+using SharedViewProps = std::shared_ptr<const ViewProps>;
+
+class ViewProps:
+  public Props,
+  public YogaStylableProps,
+  public AccessibilityProps {
+
+public:
+  void apply(const RawProps &rawProps) override;
+
+private:
+  int zIndex_ {0};
+  float opacity_ {1.0};
+
+  SharedColor foregroundColor_ {nullptr};
+  SharedColor backgroundColor_ {nullptr};
+
+  SharedColor shadowColor_ {nullptr};
+  Point shadowOffset_ {0, 0};
+
+#pragma mark - DebugStringConvertible
+
+  SharedDebugStringConvertibleList getDebugProps() const override;
+};
+
+} // namespace react
+} // namespace facebook
+

ReactCommon/fabric/view/ViewShadowNode.cpp

@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include "ViewShadowNode.h"
+
+#include <fabric/debug/DebugStringConvertibleItem.h>
+
+namespace facebook {
+namespace react {
+
+#pragma mark - Constructors
+
+ViewShadowNode::ViewShadowNode(
+  const Tag &tag,
+  const Tag &rootTag,
+  const InstanceHandle &instanceHandle,
+  const SharedViewProps &props,
+  const SharedShadowNodeSharedList &children
+):
+  ConcreteShadowNode(
+    tag,
+    rootTag,
+    instanceHandle,
+    props,
+    children
+  ),
+  AccessibleShadowNode(
+    props
+  ),
+  YogaLayoutableShadowNode(
+    props,
+    children
+  ) {};
+
+ViewShadowNode::ViewShadowNode(
+  const SharedViewShadowNode &shadowNode,
+  const SharedViewProps &props,
+  const SharedShadowNodeSharedList &children
+):
+  ConcreteShadowNode(
+    shadowNode,
+    props,
+    children
+  ),
+  AccessibleShadowNode(
+    shadowNode,
+    props
+  ),
+  YogaLayoutableShadowNode(
+    shadowNode,
+    props,
+    children
+  ) {};
+
+ComponentName ViewShadowNode::getComponentName() const {
+  return ComponentName("View");
+}
+
+void ViewShadowNode::appendChild(const SharedShadowNode &child) {
+  ensureUnsealed();
+
+  ShadowNode::appendChild(child);
+
+  auto yogaLayoutableChild = std::dynamic_pointer_cast<const YogaLayoutableShadowNode>(child);
+  if (yogaLayoutableChild) {
+    YogaLayoutableShadowNode::appendChild(yogaLayoutableChild);
+  }
+}
+
+#pragma mark - YogaLayoutableShadowNode
+
+SharedLayoutableShadowNodeList ViewShadowNode::getChildren() const {
+  SharedLayoutableShadowNodeList sharedLayoutableShadowNodeList = {};
+  for (auto child : *children_) {
+    const SharedLayoutableShadowNode layoutableShadowNode = std::dynamic_pointer_cast<const LayoutableShadowNode>(child);
+    if (!layoutableShadowNode) {
+      continue;
+    }
+
+    sharedLayoutableShadowNodeList.push_back(layoutableShadowNode);
+  }
+
+  return sharedLayoutableShadowNodeList;
+}
+
+#pragma mark - DebugStringConvertible
+
+SharedDebugStringConvertibleList ViewShadowNode::getDebugProps() const {
+  SharedDebugStringConvertibleList list = {};
+
+  auto basePropsList = ShadowNode::getDebugProps();
+  std::move(basePropsList.begin(), basePropsList.end(), std::back_inserter(list));
+
+  list.push_back(std::make_shared<DebugStringConvertibleItem>("layout", "", YogaLayoutableShadowNode::getDebugProps()));
+
+  return list;
+}
+
+} // namespace react
+} // namespace facebook