Fabric: Standard PullToRefresh component

Summary: This is implementation of standard PullToRefresh component that uses standard iOS component and modern integration approach.

Reviewed By: mdvacca

Differential Revision: D15403308

fbshipit-source-id: 5c877f7c18af9f5ac40e15a4ba44118614ba80bc

React/Fabric/Mounting/ComponentViews/ScrollView/RNPullToRefreshViewComponentView.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.
+ */
+
+#import <UIKit/UIKit.h>
+
+#import <React/RCTViewComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+/*
+ * UIView class for root <PullToRefreshView> component.
+ * This view is designed to only serve ViewController-like purpose for the actual `UIRefreshControl` view which is being
+ * attached to some `UIScrollView` (not to this view).
+ */
+@interface RNPullToRefreshViewComponentView : RCTViewComponentView
+
+@end
+
+NS_ASSUME_NONNULL_END

React/Fabric/Mounting/ComponentViews/ScrollView/RNPullToRefreshViewComponentView.mm

@@ -0,0 +1,142 @@
+/**
+ * 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.
+ */
+
+#import "RNPullToRefreshViewComponentView.h"
+
+#import <react/components/scrollview/PullToRefreshViewComponentDescriptor.h>
+#import <react/components/scrollview/PullToRefreshViewEventEmitter.h>
+#import <react/components/scrollview/PullToRefreshViewProps.h>
+
+#import <React/RCTScrollViewComponentView.h>
+#import <React/RCTConversions.h>
+
+
+using namespace facebook::react;
+
+@implementation RNPullToRefreshViewComponentView {
+  UIRefreshControl *_refreshControl;
+  RCTScrollViewComponentView *_scrollViewComponentView;
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    // This view is not designed to be visible, it only serves UIViewController-like purpose managing
+    // attaching and detaching of a pull-to-refresh view to a scroll view.
+    // The pull-to-refresh view is not a subview of this view.
+    self.hidden = YES;
+
+    static auto const defaultProps = std::make_shared<PullToRefreshViewProps const>();
+    _props = defaultProps;
+
+    _refreshControl = [[UIRefreshControl alloc] init];
+    [_refreshControl addTarget:self action:@selector(handleUIControlEventValueChanged) forControlEvents:UIControlEventValueChanged];
+  }
+
+  return self;
+}
+
+#pragma mark - RCTComponentViewProtocol
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<PullToRefreshViewComponentDescriptor>();
+}
+
+- (void)updateProps:(SharedProps)props oldProps:(SharedProps)oldProps
+{
+  auto const &oldConcreteProps = *std::static_pointer_cast<PullToRefreshViewProps const>(oldProps ?: _props);
+  auto const &newConcreteProps = *std::static_pointer_cast<PullToRefreshViewProps const>(props);
+
+  [super updateProps:props oldProps:oldProps];
+
+  if (newConcreteProps.refreshing != oldConcreteProps.refreshing) {
+    if (newConcreteProps.refreshing) {
+      [_refreshControl beginRefreshing];
+    } else {
+      [_refreshControl endRefreshing];
+    }
+  }
+
+  BOOL needsUpdateTitle = NO;
+
+  if (newConcreteProps.title != oldConcreteProps.title) {
+    needsUpdateTitle = YES;
+  }
+
+  if (newConcreteProps.titleColor != oldConcreteProps.titleColor) {
+    needsUpdateTitle = YES;
+  }
+
+  if (needsUpdateTitle) {
+    [self _updateTitle];
+  }
+}
+
+#pragma mark -
+
+- (void)handleUIControlEventValueChanged
+{
+  std::static_pointer_cast<PullToRefreshViewEventEmitter const>(_eventEmitter)->onRefresh();
+}
+
+- (void)_updateTitle
+{
+  auto const &concreteProps = *std::static_pointer_cast<PullToRefreshViewProps const>(_props);
+
+  if (concreteProps.title.empty()) {
+    _refreshControl.attributedTitle = nil;
+    return;
+  }
+
+  NSMutableDictionary *attributes = [NSMutableDictionary dictionary];
+  if (concreteProps.titleColor) {
+    attributes[NSForegroundColorAttributeName] = RCTUIColorFromSharedColor(concreteProps.titleColor);
+  }
+
+  _refreshControl.attributedTitle = [[NSAttributedString alloc] initWithString:RCTNSStringFromString(concreteProps.title) attributes:attributes];
+}
+
+#pragma mark - Attaching & Detaching
+
+- (void)didMoveToWindow
+{
+  if (self.window) {
+    [self _attach];
+  } else {
+    [self _detach];
+  }
+}
+
+- (void)_attach
+{
+  if (_scrollViewComponentView) {
+    [self _detach];
+  }
+
+  _scrollViewComponentView = [RCTScrollViewComponentView findScrollViewComponentViewForView:self];
+  if (!_scrollViewComponentView) {
+    return;
+  }
+
+  _scrollViewComponentView.scrollView.refreshControl = _refreshControl;
+}
+
+- (void)_detach
+{
+  if (!_scrollViewComponentView) {
+    return;
+  }
+
+  // iOS requires to end refreshing before unmounting.
+  [_refreshControl endRefreshing];
+
+  _scrollViewComponentView.scrollView.refreshControl = nil;
+  _scrollViewComponentView = nil;
+}
+
+@end

React/Fabric/Mounting/RCTComponentViewFactory.mm

@@ -23,6 +23,7 @@
 #import "RCTSwitchComponentView.h"
 #import "RCTUnimplementedNativeComponentView.h"
 #import "RCTViewComponentView.h"
+#import "RNPullToRefreshViewComponentView.h"
 
 using namespace facebook::react;
 
@@ -39,6 +40,7 @@ using namespace facebook::react;
   [componentViewFactory registerComponentViewClass:[RCTViewComponentView class]];
   [componentViewFactory registerComponentViewClass:[RCTRootComponentView class]];
   [componentViewFactory registerComponentViewClass:[RCTScrollViewComponentView class]];
+  [componentViewFactory registerComponentViewClass:[RNPullToRefreshViewComponentView class]];
   [componentViewFactory registerComponentViewClass:[RCTImageComponentView class]];
   [componentViewFactory registerComponentViewClass:[RCTParagraphComponentView class]];
   [componentViewFactory registerComponentViewClass:[RCTActivityIndicatorViewComponentView class]];

ReactCommon/fabric/components/scrollview/PullToRefreshViewComponentDescriptor.h

@@ -0,0 +1,20 @@
+/**
+ * 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/scrollview/PullToRefreshViewShadowNode.h>
+#include <react/core/ConcreteComponentDescriptor.h>
+
+namespace facebook {
+namespace react {
+
+using PullToRefreshViewComponentDescriptor =
+    ConcreteComponentDescriptor<PullToRefreshViewShadowNode>;
+
+} // namespace react
+} // namespace facebook

ReactCommon/fabric/components/scrollview/PullToRefreshViewEventEmitter.cpp

@@ -0,0 +1,18 @@
+/**
+ * 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 "PullToRefreshViewEventEmitter.h"
+
+namespace facebook {
+namespace react {
+
+void PullToRefreshViewEventEmitter::onRefresh() const {
+  dispatchEvent("refresh");
+}
+
+} // namespace react
+} // namespace facebook

ReactCommon/fabric/components/scrollview/PullToRefreshViewEventEmitter.h

@@ -0,0 +1,25 @@
+/**
+ * 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 <memory>
+
+#include <react/components/view/ViewEventEmitter.h>
+#include <react/core/EventEmitter.h>
+
+namespace facebook {
+namespace react {
+
+class PullToRefreshViewEventEmitter : public ViewEventEmitter {
+ public:
+  using ViewEventEmitter::ViewEventEmitter;
+
+  void onRefresh() const;
+};
+
+} // namespace react
+} // namespace facebook

ReactCommon/fabric/components/scrollview/PullToRefreshViewProps.cpp

@@ -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.
+ */
+
+#include "PullToRefreshViewProps.h"
+
+#include <react/core/propsConversions.h>
+#include <react/graphics/conversions.h>
+
+namespace facebook {
+namespace react {
+
+PullToRefreshViewProps::PullToRefreshViewProps(
+    PullToRefreshViewProps const &sourceProps,
+    RawProps const &rawProps)
+    : ViewProps(sourceProps, rawProps),
+      refreshing(
+          convertRawProp(rawProps, "refreshing", sourceProps.refreshing)),
+      tintColor(convertRawProp(rawProps, "tintColor", sourceProps.tintColor)),
+      title(convertRawProp(rawProps, "title", sourceProps.title)),
+      titleColor(
+          convertRawProp(rawProps, "titleColor", sourceProps.titleColor)) {}
+
+} // namespace react
+} // namespace facebook

ReactCommon/fabric/components/scrollview/PullToRefreshViewProps.h

@@ -0,0 +1,31 @@
+/**
+ * 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/ViewProps.h>
+
+namespace facebook {
+namespace react {
+
+class PullToRefreshViewProps final : public ViewProps {
+ public:
+  PullToRefreshViewProps() = default;
+  PullToRefreshViewProps(
+      PullToRefreshViewProps const &sourceProps,
+      RawProps const &rawProps);
+
+#pragma mark - Props
+
+  bool const refreshing{};
+  SharedColor const tintColor{};
+  std::string const title{};
+  SharedColor const titleColor{};
+};
+
+} // namespace react
+} // namespace facebook

ReactCommon/fabric/components/scrollview/PullToRefreshViewShadowNode.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 "PullToRefreshViewShadowNode.h"
+
+namespace facebook {
+namespace react {
+
+const char PullToRefreshViewComponentName[] = "RefreshControl";
+
+} // namespace react
+} // namespace facebook

ReactCommon/fabric/components/scrollview/PullToRefreshViewShadowNode.h

@@ -0,0 +1,31 @@
+/**
+ * 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/scrollview/PullToRefreshViewEventEmitter.h>
+#include <react/components/scrollview/PullToRefreshViewProps.h>
+#include <react/components/view/ConcreteViewShadowNode.h>
+
+namespace facebook {
+namespace react {
+
+extern const char PullToRefreshViewComponentName[];
+
+/*
+ * `ShadowNode` for <PullToRefreshView> component.
+ */
+class PullToRefreshViewShadowNode final : public ConcreteViewShadowNode<
+                                              PullToRefreshViewComponentName,
+                                              PullToRefreshViewProps,
+                                              PullToRefreshViewEventEmitter> {
+ public:
+  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+};
+
+} // namespace react
+} // namespace facebook

ReactCommon/fabric/uimanager/ComponentDescriptorRegistry.cpp

@@ -104,8 +104,7 @@ static ComponentName componentNameByReactViewName(ComponentName viewName) {
   // implementation of core components.
   if (viewName == "SinglelineTextInputView" ||
       viewName == "MultilineTextInputView" || viewName == "AndroidTextInput" ||
-      viewName == "RefreshControl" || viewName == "SafeAreaView" ||
-      viewName == "ScrollContentView" ||
+      viewName == "SafeAreaView" || viewName == "ScrollContentView" ||
       viewName == "AndroidHorizontalScrollContentView" // Android
   ) {
     return "View";