SWC-6882 - Rename ReactNode to ReactElement

ReactElement describes the object explicitly returned by React.createElement, while ReactNode describes anything that React can render (including ReactElement). For our purposes, ReactElement is more appropriate to use.
Sage-Bionetworks · Aug 28, 2024 · 386d6be · 386d6be
1 parent aea03f3
commit 386d6be
Show file tree

Hide file tree

Showing 59 changed files with 150 additions and 151 deletions.
diff --git a/devdocs/ReactIntegration.md b/devdocs/ReactIntegration.md
@@ -49,6 +49,7 @@ How you manage updating your widget's view will vary based on the scenario, but
 ```java
 import org.sagebionetworks.web.client.context.SynapseReactClientFullContextPropsProvider;
 import org.sagebionetworks.web.client.jsinterop.React;
+import org.sagebionetworks.web.client.jsinterop.ReactElement;
 
 class MyView {
 
@@ -57,12 +58,12 @@ class MyView {
 
   void renderComponent() {
     MyProps props = props.create(/**/);
-    ReactNode reactNode = React.createElementWithSynapseContext(
+    ReactElement reactElement = React.createElementWithSynapseContext(
       SRC.SynapseComponents.MyComponent,
       props,
       propsProvider.getJsInteropContextProps()
     );
-    reactComponent.render(reactNode);
+    reactComponent.render(reactElement);
   }
 }
 

diff --git a/src/main/java/org/sagebionetworks/web/client/GlobalApplicationStateImpl.java b/src/main/java/org/sagebionetworks/web/client/GlobalApplicationStateImpl.java
@@ -27,7 +27,7 @@
 import org.sagebionetworks.web.client.cookie.CookieProvider;
 import org.sagebionetworks.web.client.jsinterop.React;
 import org.sagebionetworks.web.client.jsinterop.ReactDOM;
-import org.sagebionetworks.web.client.jsinterop.ReactNode;
+import org.sagebionetworks.web.client.jsinterop.ReactElement;
 import org.sagebionetworks.web.client.jsinterop.SRC;
 import org.sagebionetworks.web.client.mvp.AppActivityMapper;
 import org.sagebionetworks.web.client.mvp.AppPlaceHistoryMapper;
@@ -467,7 +467,7 @@ public void initializeToastContainer() {
       isToastContainerInitialized = true;
 
       Element toastContainer = RootPanel.get("toastContainer").getElement();
-      ReactNode component = React.createElementWithThemeContext(
+      ReactElement component = React.createElementWithThemeContext(
         SRC.SynapseComponents.SynapseToastContainer,
         null
       );

diff --git a/src/main/java/org/sagebionetworks/web/client/jsinterop/React.java b/src/main/java/org/sagebionetworks/web/client/jsinterop/React.java
@@ -8,15 +8,16 @@
 @JsType(isNative = true, namespace = JsPackage.GLOBAL)
 public class React {
 
-  public static native <P extends ReactComponentProps> ReactNode createElement(
-    ReactComponentType<P> component,
-    P props
-  );
+  public static native <
+    P extends ReactComponentProps
+  > ReactElement createElement(ReactComponentType<P> component, P props);
 
-  public static native <P extends ReactComponentProps> ReactNode createElement(
+  public static native <
+    P extends ReactComponentProps
+  > ReactElement createElement(
     ReactComponentType<P> component,
     P props,
-    ReactNode... children
+    ReactElement... children
   );
 
   public static native <T> T createRef();
@@ -28,7 +29,7 @@ public static native <P extends ReactComponentProps> ReactNode createElement(
   @JsOverlay
   public static <
     P extends ReactComponentProps
-  > ReactNode createElementWithThemeContext(
+  > ReactElement createElementWithThemeContext(
     ReactComponentType<P> component,
     P props
   ) {
@@ -54,29 +55,29 @@ > ReactNode createElementWithThemeContext(
   @JsOverlay
   public static <
     P extends ReactComponentProps
-  > ReactNode createElementWithSynapseContext(
+  > ReactElement createElementWithSynapseContext(
     ReactComponentType<P> component,
     P props,
     SynapseReactClientFullContextProviderProps wrapperProps
   ) {
-    ReactNode componentElement = createElement(component, props);
+    ReactElement componentElement = createElement(component, props);
     return createElement(
       SRC.SynapseContext.FullContextProvider,
       wrapperProps,
       componentElement
     );
   }
 
-  public static native ReactNode cloneElement(ReactNode element);
+  public static native ReactElement cloneElement(ReactElement element);
 
-  public static native ReactNode cloneElement(
-    ReactNode element,
+  public static native ReactElement cloneElement(
+    ReactElement element,
     ReactComponentProps props
   );
 
-  public static native ReactNode cloneElement(
-    ReactNode element,
+  public static native ReactElement cloneElement(
+    ReactElement element,
     ReactComponentProps props,
-    ReactNode... children
+    ReactElement... children
   );
 }
diff --git a/src/main/java/org/sagebionetworks/web/client/jsinterop/ReactComponentProps.java b/src/main/java/org/sagebionetworks/web/client/jsinterop/ReactComponentProps.java
@@ -18,13 +18,13 @@ public interface CallbackRef {
     void run(Element element);
   }
 
-  public JsArray<ReactNode<?>> children;
+  public JsArray<ReactElement<?>> children;
 
   // Either a ComponentRef or CallbackRef may be passed. A CallbackRef will be invoked when the ref is set.
   public Object ref;
 
   @JsOverlay
-  public final void addChild(ReactNode<?> child) {
+  public final void addChild(ReactElement<?> child) {
     if (children == null) {
       children = new JsArray<>();
     }
@@ -37,7 +37,7 @@ public final void clearChildren() {
   }
 
   @JsOverlay
-  public final JsArray<ReactNode<?>> getChildren() {
+  public final JsArray<ReactElement<?>> getChildren() {
     if (children == null) {
       children = new JsArray<>();
     }

diff --git a/src/main/java/org/sagebionetworks/web/client/jsinterop/ReactDOMRoot.java b/src/main/java/org/sagebionetworks/web/client/jsinterop/ReactDOMRoot.java
@@ -6,7 +6,7 @@
 @JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
 public class ReactDOMRoot {
 
-  public native void render(ReactNode element);
+  public native void render(ReactElement element);
 
   public native void unmount();
 }
diff --git a/...works/web/client/jsinterop/ReactNode.java → ...ks/web/client/jsinterop/ReactElement.java b/...works/web/client/jsinterop/ReactNode.java → ...ks/web/client/jsinterop/ReactElement.java
@@ -5,7 +5,7 @@
 import jsinterop.annotations.JsType;
 
 @JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
-public class ReactNode<T extends ReactComponentProps> {
+public class ReactElement<T extends ReactComponentProps> {
 
   @JsNullable
   public T props;

diff --git a/src/main/java/org/sagebionetworks/web/client/view/DataAccessManagementViewImpl.java b/src/main/java/org/sagebionetworks/web/client/view/DataAccessManagementViewImpl.java
@@ -7,7 +7,7 @@
 import com.google.inject.Inject;
 import org.sagebionetworks.web.client.context.SynapseReactClientFullContextPropsProvider;
 import org.sagebionetworks.web.client.jsinterop.React;
-import org.sagebionetworks.web.client.jsinterop.ReactNode;
+import org.sagebionetworks.web.client.jsinterop.ReactElement;
 import org.sagebionetworks.web.client.jsinterop.SRC;
 import org.sagebionetworks.web.client.widget.ReactComponent;
 import org.sagebionetworks.web.client.widget.header.Header;
@@ -43,7 +43,7 @@ public void render() {
     headerWidget.refresh();
     Window.scrollTo(0, 0);
 
-    ReactNode node = React.createElementWithSynapseContext(
+    ReactElement node = React.createElementWithSynapseContext(
       SRC.SynapseComponents.ReviewerDashboard,
       null,
       propsProvider.getJsInteropContextProps()

diff --git a/src/main/java/org/sagebionetworks/web/client/view/DownViewImpl.java b/src/main/java/org/sagebionetworks/web/client/view/DownViewImpl.java
@@ -5,11 +5,10 @@
 import com.google.gwt.user.client.ui.Widget;
 import com.google.inject.Inject;
 import org.sagebionetworks.web.client.GlobalApplicationState;
-import org.sagebionetworks.web.client.PlaceChanger;
 import org.sagebionetworks.web.client.context.SynapseReactClientFullContextPropsProvider;
 import org.sagebionetworks.web.client.jsinterop.ErrorPageProps;
 import org.sagebionetworks.web.client.jsinterop.React;
-import org.sagebionetworks.web.client.jsinterop.ReactNode;
+import org.sagebionetworks.web.client.jsinterop.ReactElement;
 import org.sagebionetworks.web.client.jsinterop.SRC;
 import org.sagebionetworks.web.client.widget.ReactComponent;
 import org.sagebionetworks.web.client.widget.header.Header;
@@ -90,7 +89,7 @@ public void renderMaintenancePage() {
         globalAppState.handleRelativePathClick(href);
       }
     );
-    ReactNode component = React.createElementWithSynapseContext(
+    ReactElement component = React.createElementWithSynapseContext(
       SRC.SynapseComponents.ErrorPage,
       props,
       propsProvider.getJsInteropContextProps()

diff --git a/src/main/java/org/sagebionetworks/web/client/view/DownloadCartPageViewImpl.java b/src/main/java/org/sagebionetworks/web/client/view/DownloadCartPageViewImpl.java
@@ -6,7 +6,7 @@
 import org.sagebionetworks.web.client.context.SynapseReactClientFullContextPropsProvider;
 import org.sagebionetworks.web.client.jsinterop.DownloadCartPageProps;
 import org.sagebionetworks.web.client.jsinterop.React;
-import org.sagebionetworks.web.client.jsinterop.ReactNode;
+import org.sagebionetworks.web.client.jsinterop.ReactElement;
 import org.sagebionetworks.web.client.jsinterop.SRC;
 import org.sagebionetworks.web.client.security.AuthenticationController;
 import org.sagebionetworks.web.client.widget.ReactComponent;
@@ -43,7 +43,7 @@ public void render() {
     DownloadCartPageProps props = DownloadCartPageProps.create(entityId -> {
       presenter.onViewSharingSettingsClicked(entityId);
     });
-    ReactNode component = React.createElementWithSynapseContext(
+    ReactElement component = React.createElementWithSynapseContext(
       SRC.SynapseComponents.DownloadCartPage,
       props,
       propsProvider.getJsInteropContextProps()

diff --git a/src/main/java/org/sagebionetworks/web/client/view/FollowingPageViewImpl.java b/src/main/java/org/sagebionetworks/web/client/view/FollowingPageViewImpl.java
@@ -9,7 +9,7 @@
 import org.sagebionetworks.web.client.context.SynapseReactClientFullContextPropsProvider;
 import org.sagebionetworks.web.client.jsinterop.EmptyProps;
 import org.sagebionetworks.web.client.jsinterop.React;
-import org.sagebionetworks.web.client.jsinterop.ReactNode;
+import org.sagebionetworks.web.client.jsinterop.ReactElement;
 import org.sagebionetworks.web.client.jsinterop.SRC;
 import org.sagebionetworks.web.client.widget.ReactComponent;
 import org.sagebionetworks.web.client.widget.header.Header;
@@ -61,7 +61,7 @@ public void clear() {
 
   private void configure() {
     headerWidget.configure();
-    ReactNode element = React.createElementWithSynapseContext(
+    ReactElement element = React.createElementWithSynapseContext(
       SRC.SynapseComponents.SubscriptionPage,
       EmptyProps.create(),
       propsProvider.getJsInteropContextProps()

diff --git a/src/main/java/org/sagebionetworks/web/client/view/HomeViewImpl.java b/src/main/java/org/sagebionetworks/web/client/view/HomeViewImpl.java
@@ -6,14 +6,12 @@
 import com.google.gwt.user.client.ui.Composite;
 import com.google.gwt.user.client.ui.Widget;
 import com.google.inject.Inject;
-import org.sagebionetworks.web.client.DisplayUtils;
 import org.sagebionetworks.web.client.FeatureFlagConfig;
 import org.sagebionetworks.web.client.FeatureFlagKey;
 import org.sagebionetworks.web.client.GlobalApplicationState;
 import org.sagebionetworks.web.client.context.SynapseReactClientFullContextPropsProvider;
-import org.sagebionetworks.web.client.cookie.CookieProvider;
 import org.sagebionetworks.web.client.jsinterop.React;
-import org.sagebionetworks.web.client.jsinterop.ReactNode;
+import org.sagebionetworks.web.client.jsinterop.ReactElement;
 import org.sagebionetworks.web.client.jsinterop.SRC;
 import org.sagebionetworks.web.client.jsinterop.SynapseHomepageProps;
 import org.sagebionetworks.web.client.jsinterop.SynapseHomepageV2Props;
@@ -54,7 +52,7 @@ public HomeViewImpl(
   @Override
   public void render() {
     scrollToTop();
-    ReactNode component;
+    ReactElement component;
 
     if (featureFlagConfig.isFeatureEnabled(FeatureFlagKey.HOMEPAGE_V2)) {
       SynapseHomepageV2Props props = SynapseHomepageV2Props.create(href -> {

diff --git a/src/main/java/org/sagebionetworks/web/client/view/LoginViewImpl.java b/src/main/java/org/sagebionetworks/web/client/view/LoginViewImpl.java
@@ -14,7 +14,7 @@
 import org.sagebionetworks.web.client.SynapseJSNIUtils;
 import org.sagebionetworks.web.client.context.SynapseReactClientFullContextPropsProvider;
 import org.sagebionetworks.web.client.jsinterop.React;
-import org.sagebionetworks.web.client.jsinterop.ReactNode;
+import org.sagebionetworks.web.client.jsinterop.ReactElement;
 import org.sagebionetworks.web.client.jsinterop.SRC;
 import org.sagebionetworks.web.client.jsinterop.TermsAndConditionsProps;
 import org.sagebionetworks.web.client.utils.Callback;
@@ -168,7 +168,7 @@ public void showTermsOfUse(boolean hasAccepted) {
       TermsAndConditionsProps props = TermsAndConditionsProps.create(
         this::onFormChange
       );
-      ReactNode component = React.createElementWithSynapseContext(
+      ReactElement component = React.createElementWithSynapseContext(
         SRC.SynapseComponents.TermsAndConditions,
         props,
         propsProvider.getJsInteropContextProps()

diff --git a/src/main/java/org/sagebionetworks/web/client/view/ProfileViewImpl.java b/src/main/java/org/sagebionetworks/web/client/view/ProfileViewImpl.java
@@ -34,7 +34,7 @@
 import org.sagebionetworks.web.client.cookie.CookieProvider;
 import org.sagebionetworks.web.client.jsinterop.EmptyProps;
 import org.sagebionetworks.web.client.jsinterop.React;
-import org.sagebionetworks.web.client.jsinterop.ReactNode;
+import org.sagebionetworks.web.client.jsinterop.ReactElement;
 import org.sagebionetworks.web.client.jsinterop.SRC;
 import org.sagebionetworks.web.client.place.Search;
 import org.sagebionetworks.web.client.place.Synapse;
@@ -603,7 +603,7 @@ public void onClick(ClickEvent event) {
         "https://help.synapse.org/docs/Navigating-Synapse.2048557182.html#NavigatingSynapse-Favorites"
       );
       EmptyProps props = EmptyProps.create();
-      ReactNode component = React.createElementWithSynapseContext(
+      ReactElement component = React.createElementWithSynapseContext(
         SRC.SynapseComponents.FavoritesPage,
         props,
         propsProvider.getJsInteropContextProps()

diff --git a/src/main/java/org/sagebionetworks/web/client/widget/EntityTypeIconImpl.java b/src/main/java/org/sagebionetworks/web/client/widget/EntityTypeIconImpl.java
@@ -4,7 +4,7 @@
 import org.sagebionetworks.repo.model.EntityType;
 import org.sagebionetworks.web.client.jsinterop.EntityTypeIconProps;
 import org.sagebionetworks.web.client.jsinterop.React;
-import org.sagebionetworks.web.client.jsinterop.ReactNode;
+import org.sagebionetworks.web.client.jsinterop.ReactElement;
 import org.sagebionetworks.web.client.jsinterop.SRC;
 
 public class EntityTypeIconImpl
@@ -23,7 +23,7 @@ public EntityTypeIconImpl(EntityType type) {
   @Override
   public void configure(EntityType type) {
     EntityTypeIconProps props = EntityTypeIconProps.create(type);
-    ReactNode component = React.createElementWithThemeContext(
+    ReactElement component = React.createElementWithThemeContext(
       SRC.SynapseComponents.EntityTypeIcon,
       props
     );

diff --git a/src/main/java/org/sagebionetworks/web/client/widget/FullWidthAlert.java b/src/main/java/org/sagebionetworks/web/client/widget/FullWidthAlert.java
@@ -8,7 +8,7 @@
 import org.sagebionetworks.web.client.jsinterop.AlertButtonConfig;
 import org.sagebionetworks.web.client.jsinterop.FullWidthAlertProps;
 import org.sagebionetworks.web.client.jsinterop.React;
-import org.sagebionetworks.web.client.jsinterop.ReactNode;
+import org.sagebionetworks.web.client.jsinterop.ReactElement;
 import org.sagebionetworks.web.client.jsinterop.SRC;
 
 public class FullWidthAlert implements IsWidget {
@@ -60,7 +60,7 @@ private void rerender() {
       isGlobal,
       alertType
     );
-    ReactNode component = React.createElementWithThemeContext(
+    ReactElement component = React.createElementWithThemeContext(
       SRC.SynapseComponents.FullWidthAlert,
       props
     );

diff --git a/src/main/java/org/sagebionetworks/web/client/widget/HelpWidget.java b/src/main/java/org/sagebionetworks/web/client/widget/HelpWidget.java
@@ -7,7 +7,7 @@
 import org.gwtbootstrap3.client.ui.html.Span;
 import org.sagebionetworks.web.client.jsinterop.HelpPopoverProps;
 import org.sagebionetworks.web.client.jsinterop.React;
-import org.sagebionetworks.web.client.jsinterop.ReactNode;
+import org.sagebionetworks.web.client.jsinterop.ReactElement;
 import org.sagebionetworks.web.client.jsinterop.SRC;
 
 /**
@@ -54,7 +54,7 @@ protected void updateContent() {
       showCloseButton,
       className
     );
-    ReactNode component = React.createElementWithThemeContext(
+    ReactElement component = React.createElementWithThemeContext(
       SRC.SynapseComponents.HelpPopover,
       props
     );

diff --git a/src/main/java/org/sagebionetworks/web/client/widget/IconSvg.java b/src/main/java/org/sagebionetworks/web/client/widget/IconSvg.java
@@ -3,7 +3,7 @@
 import com.google.gwt.dom.client.SpanElement;
 import org.sagebionetworks.web.client.jsinterop.IconSvgProps;
 import org.sagebionetworks.web.client.jsinterop.React;
-import org.sagebionetworks.web.client.jsinterop.ReactNode;
+import org.sagebionetworks.web.client.jsinterop.ReactElement;
 import org.sagebionetworks.web.client.jsinterop.SRC;
 
 public class IconSvg extends ReactComponent {
@@ -24,7 +24,7 @@ public void configure(String icon, String label) {
 
   private void renderComponent() {
     IconSvgProps props = IconSvgProps.create(icon, label);
-    ReactNode component = React.createElementWithThemeContext(
+    ReactElement component = React.createElementWithThemeContext(
       SRC.SynapseComponents.IconSvg,
       props
     );

diff --git a/src/main/java/org/sagebionetworks/web/client/widget/OrientationBanner.java b/src/main/java/org/sagebionetworks/web/client/widget/OrientationBanner.java
@@ -7,7 +7,7 @@
 import org.sagebionetworks.web.client.jsinterop.AlertButtonConfig;
 import org.sagebionetworks.web.client.jsinterop.OrientationBannerProps;
 import org.sagebionetworks.web.client.jsinterop.React;
-import org.sagebionetworks.web.client.jsinterop.ReactNode;
+import org.sagebionetworks.web.client.jsinterop.ReactElement;
 import org.sagebionetworks.web.client.jsinterop.SRC;
 
 public class OrientationBanner implements IsWidget {
@@ -43,7 +43,7 @@ private void rerender() {
       primaryButtonConfig,
       secondaryButtonConfig
     );
-    ReactNode component = React.createElementWithThemeContext(
+    ReactElement component = React.createElementWithThemeContext(
       SRC.SynapseComponents.OrientationBanner,
       props
     );