Feature - API: Some initial compositional components (#483)

* Add width/height as properties on Image

* Some additional compositional components

* Fix warning

* Fix more warnings

* Fix remaining warnings

Author: bryphe

src/UI/ImageNode.re

@@ -1,34 +1,43 @@
 open Revery_Core;
-open Revery_Draw;
+
+module Draw = Revery_Draw;
 
 module Layout = Layout;
 module LayoutTypes = Layout.LayoutTypes;
 
 open Node;
 
+let uiToDrawResizeMode: ImageResizeMode.t => Revery_Draw.ImageResizeMode.t =
+  rm =>
+    switch (rm) {
+    | Stretch => Revery_Draw.ImageResizeMode.Stretch
+    | Repeat => Revery_Draw.ImageResizeMode.Repeat
+    };
+
 class imageNode (imagePath: string) = {
   as _this;
   val mutable src = imagePath;
   inherit (class node)() as _super;
+  val _opacity: ref(float) = ref(1.0);
   val _resizeMode: ref(ImageResizeMode.t) = ref(ImageResizeMode.Stretch);
   pub! draw = (parentContext: NodeDrawContext.t) => {
     /* Draw background first */
     _super#draw(parentContext);
     let dimensions = _this#measurements();
     let world = _this#getWorldTransform();
-    let style = _this#getStyle();
 
-    Image.drawImage(
+    Draw.Image.drawImage(
       ~imagePath=src,
       ~transform=world,
       ~width=float_of_int(dimensions.width),
       ~height=float_of_int(dimensions.height),
-      ~resizeMode=_resizeMode^,
+      ~resizeMode=uiToDrawResizeMode(_resizeMode^),
       ~tint=Colors.white,
-      ~opacity=style.opacity,
+      ~opacity=_opacity^,
       (),
     );
   };
+  pub setOpacity = f => _opacity := f;
   pub setResizeMode = (mode: ImageResizeMode.t) => {
     _resizeMode := mode;
   };

src/UI/ImageResizeMode.re

@@ -0,0 +1,3 @@
+type t =
+  | Stretch
+  | Repeat;

src/UI/Primitives.re

@@ -230,6 +230,22 @@ module Text = {
 module Image = {
   let component = React.nativeComponent("Image");
 
+  let getStyles: (option(int), option(int), Style.t) => Style.t =
+    (w, h, style) => {
+      let style =
+        switch (w) {
+        | Some(v) => {...style, width: v}
+        | None => style
+        };
+
+      let style =
+        switch (h) {
+        | Some(v) => {...style, height: v}
+        | None => style
+        };
+      style;
+    };
+
   let make =
       (
         ~key=?,
@@ -238,17 +254,21 @@ module Image = {
         ~onMouseUp=?,
         ~onMouseWheel=?,
         ~ref=?,
-        ~resizeMode=Revery_Draw.ImageResizeMode.Stretch,
-        ~style=Style.emptyImageStyle,
+        ~resizeMode=ImageResizeMode.Stretch,
+        ~opacity=1.0,
+        ~width=?,
+        ~height=?,
         ~src="",
+        ~style,
         children,
       ) =>
     component(~key?, hooks =>
       (
         hooks,
         {
           make: () => {
-            let styles = Style.create(~style, ());
+            let styles =
+              Style.create(~style, ()) |> getStyles(width, height);
             let events =
               NodeEvents.make(
                 ~ref?,
@@ -259,13 +279,15 @@ module Image = {
                 (),
               );
             let node = PrimitiveNodeFactory.get().createImageNode(src);
+            node#setOpacity(opacity);
             node#setEvents(events);
             node#setStyle(styles);
             node#setResizeMode(resizeMode);
             Obj.magic(node);
           },
           configureInstance: (~isFirstRender as _, node) => {
-            let styles = Style.create(~style, ());
+            let styles =
+              Style.create(~style, ()) |> getStyles(width, height);
             let events =
               NodeEvents.make(
                 ~ref?,
@@ -277,6 +299,7 @@ module Image = {
               );
             let imgNode: ImageNode.imageNode = Obj.magic(node);
             imgNode#setResizeMode(resizeMode);
+            imgNode#setOpacity(opacity);
             node#setEvents(events);
             node#setStyle(styles);
             node;
@@ -296,6 +319,8 @@ module Image = {
         ~resizeMode=?,
         ~style=Style.emptyImageStyle,
         ~src="",
+        ~width=?,
+        ~height=?,
         ~children,
         (),
       ) =>
@@ -308,6 +333,8 @@ module Image = {
       ~resizeMode?,
       ~style,
       ~src,
+      ~width?,
+      ~height?,
       React.listToElement(children),
     );
 };

src/UI/Revery_UI.re

@@ -6,6 +6,7 @@ module Performance = Revery_Core.Performance;
 module Animated = Animated;
 module Animation = Animation;
 module AnimationTicker = AnimationTicker;
+module ImageResizeMode = ImageResizeMode;
 module Layout = Layout;
 module LayoutTypes = Layout.LayoutTypes;
 module Style = Style;

src/UI_Components/Container.re

@@ -0,0 +1,10 @@
+open Revery_UI;
+
+let component = React.component("Container");
+
+let createElement = (~width as w, ~height as h, ~children, ()) =>
+  component(hooks => {
+    let style = Style.[width(w), height(h)];
+
+    (hooks, <View style> ...children </View>);
+  });

src/UI_Components/Positioned.re

@@ -0,0 +1,21 @@
+open Revery_UI;
+
+let component = React.component("Positioned");
+
+let createElement = (~top=?, ~left=?, ~right=?, ~bottom=?, ~children, ()) =>
+  component(hooks => {
+    let style =
+      switch (top, left, right, bottom) {
+      | (Some(t), Some(l), _, _) =>
+        Style.[position(`Absolute), top(t), left(l)]
+      | (Some(t), _, Some(r), _) =>
+        Style.[position(`Absolute), top(t), right(r)]
+      | (_, _, Some(r), Some(b)) =>
+        Style.[position(`Absolute), bottom(b), right(r)]
+      | (_, Some(l), _, Some(b)) =>
+        Style.[position(`Absolute), bottom(b), left(l)]
+      | _ => []
+      };
+
+    (hooks, <View style> ...children </View>);
+  });

src/UI_Components/Revery_UI_Components.re

@@ -5,7 +5,10 @@
  */
 
 module Clickable = Clickable;
+module Container = Container;
+module Stack = Stack;
 module Button = Button;
+module Positioned = Positioned;
 module ScrollView = ScrollView;
 module Slider = Slider;
 module Input = Input;

src/UI_Components/Stack.re

@@ -0,0 +1,11 @@
+open Revery_UI;
+
+let component = React.component("Stack");
+
+let style = (w, h) => Style.[position(`Relative), width(w), height(h)];
+
+let createElement = (~width as w, ~height as h, ~children, ()) => {
+  component(hooks =>
+    (hooks, <View style={style(w, h)}> ...children </View>)
+  );
+};