update image primitive to use new style api (#257)

revery-ui · Jan 25, 2019 · a4e3184 · a4e3184
1 parent f5a539b
commit a4e3184
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 25 deletions.
diff --git a/examples/Hello.re b/examples/Hello.re
@@ -7,7 +7,7 @@ module Logo = {
 
   let make = () =>
     component(slots => {
-      let (opacity, setOpacity, slots) = React.Hooks.state(1.0, slots);
+      let (logoOpacity, setOpacity, slots) = React.Hooks.state(1.0, slots);
 
       let (rotation, slots) =
         Hooks.animation(
@@ -42,16 +42,15 @@ module Logo = {
       <View onMouseDown onMouseUp>
         <Image
           src="outrun-logo.png"
-          style={Style.make(
-            ~width=512,
-            ~height=256,
-            ~opacity,
-            ~transform=[
-              RotateY(Angle.from_radians(rotationY)),
-              RotateX(Angle.from_radians(rotation)),
-            ],
-            (),
-          )}
+          style=Style.[
+            width(512),
+            height(256),
+            opacity(logoOpacity),
+            transform([
+              Transform.RotateY(Angle.from_radians(rotationY)),
+              Transform.RotateX(Angle.from_radians(rotation)),
+            ]),
+          ]
         />
       </View>;
     });

diff --git a/examples/Slider.re b/examples/Slider.re
@@ -66,16 +66,15 @@ module AdjustableLogo = {
         <View>
           <Image
             src="outrun-logo.png"
-            style={Style.make(
-              ~width=512,
-              ~height=256,
-              ~transform=[
-                RotateZ(Angle.from_radians(rotationZ)),
-                RotateY(Angle.from_radians(rotationY)),
-                RotateX(Angle.from_radians(rotationX)),
-              ],
-              (),
-            )}
+            style=Style.[
+              width(512),
+              height(256),
+              transform([
+                Transform.RotateZ(Angle.from_radians(rotationZ)),
+                Transform.RotateY(Angle.from_radians(rotationY)),
+                Transform.RotateX(Angle.from_radians(rotationX)),
+              ]),
+            ]
           />
         </View>
         <View style=controlsStyle>

diff --git a/src/UI/Primitives.re b/src/UI/Primitives.re
@@ -189,13 +189,14 @@ module Image = {
         ~onMouseUp=?,
         ~onMouseWheel=?,
         ~ref=?,
-        ~style=Style.defaultStyle,
+        ~style=Style.emptyImageStyle,
         ~src="",
         children,
       ) =>
     component((_: UiReact.Hooks.empty) =>
       {
         make: () => {
+          let styles = Style.create(~style, ());
           let events =
             NodeEvents.make(
               ~ref?,
@@ -207,10 +208,11 @@ module Image = {
             );
           let node = (new ImageNode.imageNode)(src);
           node#setEvents(events);
-          node#setStyle(style);
+          node#setStyle(styles);
           Obj.magic(node);
         },
         configureInstance: (~isFirstRender as _, node) => {
+          let styles = Style.create(~style, ());
           let events =
             NodeEvents.make(
               ~ref?,
@@ -221,7 +223,7 @@ module Image = {
               (),
             );
           node#setEvents(events);
-          node#setStyle(style);
+          node#setStyle(styles);
           node;
         },
         children,
@@ -235,7 +237,7 @@ module Image = {
         ~onMouseUp=?,
         ~onMouseWheel=?,
         ~ref=?,
-        ~style=Style.defaultStyle,
+        ~style=Style.emptyImageStyle,
         ~src="",
         ~children,
         (),

diff --git a/src/UI/Style.re b/src/UI/Style.re
@@ -250,9 +250,11 @@ type fontProps = [ | `FontFamily(string) | `FontSize(int)];
  */
 type textStyleProps = [ fontProps | props];
 type viewStyleProps = [ props];
+type imageStyleProps = [ props];
 
 let emptyTextStyle: list(textStyleProps) = [];
 let emptyViewStyle: list(viewStyleProps) = [];
+let emptyImageStyle: list(imageStyleProps) = [];
 
 let flexDirection = d => {
   let dir =