Merge pull request #5505 from nickgros/SWC-6882e

pom.xml

@@ -437,6 +437,10 @@
                   file="${project.basedir}/node_modules/moment/min/moment.min.js"
                   tofile="src/main/webapp/generated/moment.min.js"
                 />
+                <copy
+                  file="${project.basedir}/node_modules/@mui/material/umd/material-ui.production.min.js"
+                  tofile="src/main/webapp/generated/material-ui.production.min.js"
+                />
                 <copy todir="src/main/webapp/generated">
                   <fileset
                     dir="${project.basedir}/node_modules/synapse-react-client/dist/umd"

src/main/java/org/sagebionetworks/web/client/jsinterop/React.java

@@ -9,15 +9,18 @@
 public class React {
 
   public static native <
-    P extends ReactComponentProps
-  > ReactElement createElement(ReactComponentType<P> component, P props);
+    T extends ReactComponentType<P>, P extends ReactComponentProps
+  > ReactElement<T, P> createElement(
+    ReactComponentType<P> componentType,
+    P props
+  );
 
   public static native <
-    P extends ReactComponentProps
-  > ReactElement createElement(
-    ReactComponentType<P> component,
+    T extends ReactComponentType<P>, P extends ReactComponentProps
+  > ReactElement<T, P> createElement(
+    ReactComponentType<P> componentType,
     P props,
-    ReactElement... children
+    ReactElement<?, ?>... children
   );
 
   public static native <T> T createRef();
@@ -28,39 +31,39 @@ > ReactElement createElement(
    */
   @JsOverlay
   public static <
-    P extends ReactComponentProps
-  > ReactElement createElementWithThemeContext(
-    ReactComponentType<P> component,
+    T extends ReactComponentType<P>, P extends ReactComponentProps
+  > ReactElement<?, ?> createElementWithThemeContext(
+    ReactComponentType<P> componentType,
     P props
   ) {
     SynapseReactClientFullContextProviderProps emptyContext =
       SynapseReactClientFullContextProviderProps.create(
         SynapseContextJsObject.create(null, false, false),
         null
       );
-    return createElementWithSynapseContext(component, props, emptyContext);
+    return createElementWithSynapseContext(componentType, props, emptyContext);
   }
 
   /**
    * Wraps a component in SynapseContextProvider. Nearly all Synapse React Client components must be wrapped in this context, so this utility
    * simplifies creating the wrapper.
    *
    * For setting props, use {@link SynapseReactClientFullContextPropsProvider}
-   * @param component
+   * @param componentType
    * @param props
    * @param wrapperProps
    * @param <P>
    * @return
    */
   @JsOverlay
   public static <
-    P extends ReactComponentProps
-  > ReactElement createElementWithSynapseContext(
-    ReactComponentType<P> component,
+    T extends ReactComponentType<P>, P extends ReactComponentProps
+  > ReactElement<?, ?> createElementWithSynapseContext(
+    T componentType,
     P props,
     SynapseReactClientFullContextProviderProps wrapperProps
   ) {
-    ReactElement componentElement = createElement(component, props);
+    ReactElement componentElement = createElement(componentType, props);
     return createElement(
       SRC.SynapseContext.FullContextProvider,
       wrapperProps,

src/main/java/org/sagebionetworks/web/client/jsinterop/ReactComponentProps.java

@@ -3,7 +3,6 @@
 import com.google.gwt.dom.client.Element;
 import jsinterop.annotations.JsConstructor;
 import jsinterop.annotations.JsFunction;
-import jsinterop.annotations.JsOverlay;
 import jsinterop.annotations.JsPackage;
 import jsinterop.annotations.JsType;
 
@@ -18,29 +17,6 @@ public interface CallbackRef {
     void run(Element element);
   }
 
-  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(ReactElement<?> child) {
-    if (children == null) {
-      children = new JsArray<>();
-    }
-    children.push(child);
-  }
-
-  @JsOverlay
-  public final void clearChildren() {
-    children = new JsArray<>();
-  }
-
-  @JsOverlay
-  public final JsArray<ReactElement<?>> getChildren() {
-    if (children == null) {
-      children = new JsArray<>();
-    }
-    return children;
-  }
 }

src/main/java/org/sagebionetworks/web/client/jsinterop/ReactElement.java

@@ -5,11 +5,15 @@
 import jsinterop.annotations.JsType;
 
 @JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
-public class ReactElement<T extends ReactComponentProps> {
+public class ReactElement<
+  T extends ReactComponentType<P>, P extends ReactComponentProps
+> {
+
+  public T type;
 
   @JsNullable
-  public T props;
+  public P props;
 
   @JsNullable
-  public ComponentRef ref;
+  public String key;
 }

src/main/java/org/sagebionetworks/web/client/jsinterop/mui/Grid.java

@@ -0,0 +1,91 @@
+package org.sagebionetworks.web.client.jsinterop.mui;
+
+import org.sagebionetworks.web.client.jsinterop.ReactComponentType;
+import org.sagebionetworks.web.client.jsinterop.react.HasStyle;
+
+public class Grid extends HasStyle<ReactComponentType<GridProps>, GridProps> {
+
+  public Grid() {
+    super(MaterialUI.Unstable_Grid2, GridProps.create(false));
+  }
+
+  public void setId(String id) {
+    props.id = id;
+    this.render();
+  }
+
+  public void setContainer(boolean container) {
+    props.container = container;
+    this.render();
+  }
+
+  public void setXs(int xs) {
+    props.xs = xs;
+    this.render();
+  }
+
+  public void setSm(int sm) {
+    props.sm = sm;
+    this.render();
+  }
+
+  public void setMd(int md) {
+    props.md = md;
+    this.render();
+  }
+
+  public void setLg(int lg) {
+    props.lg = lg;
+    this.render();
+  }
+
+  public void setXl(int xl) {
+    props.xl = xl;
+    this.render();
+  }
+
+  public void setXsOffset(int xsOffset) {
+    props.xsOffset = xsOffset;
+    this.render();
+  }
+
+  public void setSmOffset(int smOffset) {
+    props.smOffset = smOffset;
+    this.render();
+  }
+
+  public void setMdOffset(int mdOffset) {
+    props.mdOffset = mdOffset;
+    this.render();
+  }
+
+  public void setLgOffset(int lgOffset) {
+    props.lgOffset = lgOffset;
+    this.render();
+  }
+
+  public void setXlOffset(int xlOffset) {
+    props.xlOffset = xlOffset;
+    this.render();
+  }
+
+  public void setMt(String mt) {
+    props.mt = mt;
+    this.render();
+  }
+
+  public void setPl(String pl) {
+    props.pl = pl;
+    this.render();
+  }
+
+  public void setRowSpacing(String rowSpacing) {
+    props.rowSpacing = rowSpacing;
+    this.render();
+  }
+
+  public void setColumnSpacing(String columnSpacing) {
+    props.columnSpacing = columnSpacing;
+    this.render();
+  }
+}

src/main/java/org/sagebionetworks/web/client/jsinterop/mui/GridProps.java

@@ -0,0 +1,68 @@
+package org.sagebionetworks.web.client.jsinterop.mui;
+
+import jsinterop.annotations.JsNullable;
+import jsinterop.annotations.JsOverlay;
+import jsinterop.annotations.JsPackage;
+import jsinterop.annotations.JsType;
+import org.sagebionetworks.web.client.jsinterop.PropsWithStyle;
+
+@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
+public class GridProps extends PropsWithStyle {
+
+  @JsNullable
+  String id;
+
+  boolean container;
+
+  @JsNullable
+  int xs;
+
+  @JsNullable
+  int sm;
+
+  @JsNullable
+  int md;
+
+  @JsNullable
+  int lg;
+
+  @JsNullable
+  int xl;
+
+  @JsNullable
+  int xsOffset;
+
+  @JsNullable
+  int smOffset;
+
+  @JsNullable
+  int mdOffset;
+
+  @JsNullable
+  int lgOffset;
+
+  @JsNullable
+  int xlOffset;
+
+  @JsNullable
+  String mt;
+
+  @JsNullable
+  String pl;
+
+  @JsNullable
+  String rowSpacing;
+
+  @JsNullable
+  String columnSpacing;
+
+  @JsOverlay
+  public static GridProps create(boolean container) {
+    GridProps props = new GridProps();
+
+    if (container) {
+      props.container = true;
+    }
+    return props;
+  }
+}

src/main/java/org/sagebionetworks/web/client/jsinterop/mui/MaterialUI.java

@@ -0,0 +1,11 @@
+package org.sagebionetworks.web.client.jsinterop.mui;
+
+import jsinterop.annotations.JsPackage;
+import jsinterop.annotations.JsType;
+import org.sagebionetworks.web.client.jsinterop.ReactComponentType;
+
+@JsType(isNative = true, namespace = JsPackage.GLOBAL)
+public class MaterialUI {
+
+  public static ReactComponentType<GridProps> Unstable_Grid2;
+}

src/main/java/org/sagebionetworks/web/client/jsinterop/react/HasStyle.java

@@ -3,18 +3,21 @@
 import jsinterop.base.JsPropertyMap;
 import org.sagebionetworks.web.client.jsinterop.JsObject;
 import org.sagebionetworks.web.client.jsinterop.PropsWithStyle;
-import org.sagebionetworks.web.client.widget.ReactComponent;
+import org.sagebionetworks.web.client.jsinterop.ReactComponentType;
+import org.sagebionetworks.web.client.widget.ReactComponentV2;
 
 /**
  * Abstract class for React component widgets that have a style prop. The style prop for the component may be manipulated
  * to show/hide the component based on the current state of the widget.
  * @param <T> the prop type.
  */
-public abstract class HasStyle<T extends PropsWithStyle>
-  extends ReactComponent<T> {
+public abstract class HasStyle<
+  T extends ReactComponentType<P>, P extends PropsWithStyle
+>
+  extends ReactComponentV2<T, P> {
 
-  public HasStyle() {
-    super();
+  public HasStyle(T reactComponentType, P props) {
+    super(reactComponentType, props);
   }
 
   public void setStyle(JsPropertyMap<String> style) {
@@ -33,7 +36,11 @@ public void setVisible(boolean visible) {
     } else {
       // Update the style prop to `display: none`.
       if (this.props == null) {
-        this.props = (T) JsPropertyMap.of();
+        this.props = (P) JsPropertyMap.of();
+      }
+
+      if (this.props.style == null) {
+        this.props.style = (JsPropertyMap<String>) new JsObject();
       }
 
       this.props.style.set("display", "none");