Fabric: Add Fabric-compatible Slider component to iOS

Summary: Fabric-compatible Slider component, minus image support (coming soon!)

Reviewed By: shergin

Differential Revision: D13644717

fbshipit-source-id: ce3f0c1ee530be4807b875cb2080c59693b7337a

ReactCommon/fabric/components/slider/BUCK

@@ -0,0 +1,80 @@
+load("@fbsource//tools/build_defs/apple:flag_defs.bzl", "get_debug_preprocessor_flags")
+load(
+    "//tools/build_defs/oss:rn_defs.bzl",
+    "ANDROID",
+    "APPLE",
+    "fb_xplat_cxx_test",
+    "get_apple_compiler_flags",
+    "get_apple_inspector_flags",
+    "react_native_xplat_target",
+    "rn_xplat_cxx_library",
+    "subdir_glob",
+)
+
+APPLE_COMPILER_FLAGS = get_apple_compiler_flags()
+
+rn_xplat_cxx_library(
+    name = "slider",
+    srcs = glob(
+        ["**/*.cpp"],
+        exclude = glob(["tests/**/*.cpp"]),
+    ),
+    headers = [],
+    header_namespace = "",
+    exported_headers = subdir_glob(
+        [
+            ("", "*.h"),
+        ],
+        prefix = "react/components/slider",
+    ),
+    compiler_flags = [
+        "-fexceptions",
+        "-frtti",
+        "-std=c++14",
+        "-Wall",
+    ],
+    fbobjc_compiler_flags = APPLE_COMPILER_FLAGS,
+    fbobjc_preprocessor_flags = get_debug_preprocessor_flags() + get_apple_inspector_flags(),
+    fbobjc_tests = [
+        ":tests",
+    ],
+    macosx_tests_override = [],
+    platforms = (ANDROID, APPLE),
+    preprocessor_flags = [
+        "-DLOG_TAG=\"ReactNative\"",
+        "-DWITH_FBSYSTRACE=1",
+    ],
+    tests = [],
+    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"),
+        react_native_xplat_target("fabric/components/view:view"),
+    ],
+)
+
+fb_xplat_cxx_test(
+    name = "tests",
+    srcs = glob(["tests/**/*.cpp"]),
+    headers = glob(["tests/**/*.h"]),
+    compiler_flags = [
+        "-fexceptions",
+        "-frtti",
+        "-std=c++14",
+        "-Wall",
+    ],
+    contacts = ["oncall+react_native@xmail.facebook.com"],
+    platforms = APPLE,
+    deps = [
+        "xplat//folly:molly",
+        "xplat//third-party/gmock:gtest",
+        ":slider",
+    ],
+)

ReactCommon/fabric/components/slider/SliderComponentDescriptor.h

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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/components/slider/SliderShadowNode.h>
+#include <react/core/ConcreteComponentDescriptor.h>
+
+namespace facebook {
+namespace react {
+
+using SliderComponentDescriptor = ConcreteComponentDescriptor<SliderShadowNode>;
+
+} // namespace react
+} // namespace facebook

ReactCommon/fabric/components/slider/SliderEventEmitter.cpp

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include "SliderEventEmitter.h"
+
+namespace facebook {
+namespace react {
+
+void SliderEventEmitter::onValueChange(float value) const {
+  dispatchEvent("valueChange", [value](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "value", value);
+    return payload;
+  });
+}
+
+void SliderEventEmitter::onSlidingComplete(float value) const {
+  dispatchEvent("slidingComplete", [value](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "value", value);
+    return payload;
+  });
+}
+
+} // namespace react
+} // namespace facebook

ReactCommon/fabric/components/slider/SliderEventEmitter.h

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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/components/view/ViewEventEmitter.h>
+
+namespace facebook {
+namespace react {
+
+class SliderEventEmitter : public ViewEventEmitter {
+ public:
+  using ViewEventEmitter::ViewEventEmitter;
+
+  void onValueChange(float value) const;
+  void onSlidingComplete(float value) const;
+};
+
+} // namespace react
+} // namespace facebook

ReactCommon/fabric/components/slider/SliderProps.cpp

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include <react/components/slider/SliderProps.h>
+#include <react/core/propsConversions.h>
+
+namespace facebook {
+namespace react {
+
+SliderProps::SliderProps(
+    const SliderProps &sourceProps,
+    const RawProps &rawProps)
+    : ViewProps(sourceProps, rawProps),
+      value(convertRawProp(rawProps, "value", sourceProps.value, value)),
+      steps(convertRawProp(rawProps, "steps", sourceProps.steps, steps)),
+      disabled(
+          convertRawProp(rawProps, "disabled", sourceProps.disabled, disabled)),
+      minimumTrackTintColor(convertRawProp(
+          rawProps,
+          "minimumTintColor",
+          sourceProps.thumbTintColor,
+          thumbTintColor)),
+      maximumTrackTintColor(convertRawProp(
+          rawProps,
+          "maximumTintColor",
+          sourceProps.thumbTintColor,
+          thumbTintColor)),
+      thumbTintColor(convertRawProp(
+          rawProps,
+          "thumbTintColor",
+          sourceProps.thumbTintColor,
+          thumbTintColor)) {}
+
+} // namespace react
+} // namespace facebook

ReactCommon/fabric/components/slider/SliderProps.h

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include <react/components/view/ViewProps.h>
+#include <react/graphics/Color.h>
+
+namespace facebook {
+namespace react {
+
+// TODO (T28334063): Consider for codegen.
+class SliderProps final : public ViewProps {
+ public:
+  SliderProps() = default;
+  SliderProps(const SliderProps &sourceProps, const RawProps &rawProps);
+
+#pragma mark - Props
+
+  const float value{false};
+  const float steps{false};
+  const bool disabled{false};
+  const SharedColor minimumTrackTintColor{};
+  const SharedColor maximumTrackTintColor{};
+
+  // Android only
+  const SharedColor thumbTintColor;
+};
+
+} // namespace react
+} // namespace facebook

ReactCommon/fabric/components/slider/SliderShadowNode.cpp

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include "SliderShadowNode.h"
+
+namespace facebook {
+namespace react {
+
+extern const char SliderComponentName[] = "Slider";
+
+} // namespace react
+} // namespace facebook

ReactCommon/fabric/components/slider/SliderShadowNode.h

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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/components/slider/SliderEventEmitter.h>
+#include <react/components/slider/SliderProps.h>
+#include <react/components/view/ConcreteViewShadowNode.h>
+
+namespace facebook {
+namespace react {
+
+extern const char SliderComponentName[];
+
+/*
+ * `ShadowNode` for <Slider> component.
+ */
+using SliderShadowNode = ConcreteViewShadowNode<
+    SliderComponentName,
+    SliderProps,
+    SliderEventEmitter>;
+
+} // namespace react
+} // namespace facebook

ReactCommon/fabric/components/slider/tests/SliderTest.cpp

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include <memory>
+
+#include <gtest/gtest.h>
+
+TEST(SliderTest, testSomething) {
+  // TODO
+}