Finish refactoring examples

revery-ui · Jan 20, 2019 · 2fa9614 · 2fa9614
1 parent 88cad48
commit 2fa9614
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 108 deletions.
diff --git a/examples/Border.re b/examples/Border.re
@@ -2,39 +2,36 @@ open Revery.UI;
 open Revery.Core;
 
 let defaultStyle =
-  Style.make(
-    ~backgroundColor=Colors.white,
-    ~position=LayoutTypes.Relative,
-    ~left=100,
-    ~top=100,
-    ~width=200,
-    ~height=200,
-    ~border=Style.Border.make(~width=15, ~color=Colors.red, ()),
-    ~borderHorizontal=Style.Border.make(~width=8, ~color=Colors.blue, ()),
-    ~borderTop=Style.Border.make(~width=15, ~color=Colors.red, ()),
-    ~borderLeft=Style.Border.make(~width=30, ~color=Colors.green, ()),
-    (),
-  );
+  Style.[
+    backgroundColor(Colors.white),
+    position(`Relative),
+    left(100),
+    top(100),
+    width(200),
+    height(200),
+    border({width: 15, color: Colors.red}),
+    borderHorizontal({width: 8, color: Colors.blue}),
+    borderTop({width: 15, color: Colors.red}),
+    borderLeft({width: 30, color: Colors.green}),
+  ];
 
 let innerStyle =
-  Style.make(
-    ~backgroundColor=Colors.yellow,
-    ~position=LayoutTypes.Relative,
-    ~left=0,
-    ~top=0,
-    ~width=30,
-    ~height=30,
-    ~borderHorizontal=Style.Border.make(~color=Colors.black, ~width=3, ()),
-    (),
-  );
+  Style.[
+    backgroundColor(Colors.yellow),
+    position(`Relative),
+    left(0),
+    top(0),
+    width(30),
+    height(30),
+    borderHorizontal({color: Colors.black, width: 3}),
+  ];
 
 let textStyle =
-  Style.make(
-    ~fontSize=20,
-    ~fontFamily="Roboto-Regular.ttf",
-    ~color=Colors.black,
-    (),
-  );
+  Style.[
+    fontSize(20),
+    fontFamily("Roboto-Regular.ttf"),
+    color(Colors.black),
+  ];
 
 let render = () =>
   <View style=defaultStyle>

diff --git a/examples/Boxshadow.re b/examples/Boxshadow.re
@@ -2,14 +2,13 @@ open Revery.UI;
 open Revery.Core;
 
 let parentStyles =
-  Style.make(
-    ~position=LayoutTypes.Relative,
-    ~flexGrow=1,
-    ~alignItems=LayoutTypes.AlignCenter,
-    ~justifyContent=LayoutTypes.JustifyCenter,
-    ~flexDirection=LayoutTypes.Column,
-    (),
-  );
+  Style.[
+    position(`Relative),
+    flexGrow(1),
+    alignItems(`Center),
+    justifyContent(`Center),
+    flexDirection(`Column),
+  ];
 
 let shadowOne =
   Style.BoxShadow.make(
@@ -32,30 +31,27 @@ let shadowTwo =
   );
 
 let firstShadow =
-  Style.make(
-    ~backgroundColor=Colors.blue,
-    ~position=LayoutTypes.Relative,
-    ~width=100,
-    ~height=100,
-    ~boxShadow=shadowOne,
-    ~marginVertical=30,
-    (),
-  );
+  Style.[
+    backgroundColor(Colors.blue),
+    position(`Relative),
+    width(100),
+    height(100),
+    boxShadow(shadowOne),
+    marginVertical(30),
+  ];
 
 let secondShadow =
-  Style.make(
-    ~backgroundColor=Colors.red,
-    ~position=LayoutTypes.Relative,
-    ~width=100,
-    ~height=100,
-    ~boxShadow=shadowTwo,
-    ~marginVertical=30,
-    (),
-  );
+  Style.[
+    backgroundColor(Colors.red),
+    position(`Relative),
+    width(100),
+    height(100),
+    boxShadow(shadowTwo),
+    marginVertical(30),
+  ];
 
-let render = () => {
+let render = () =>
   <View style=parentStyles>
     <View style=firstShadow />
     <View style=secondShadow />
   </View>;
-};
diff --git a/examples/Examples.re b/examples/Examples.re
@@ -4,7 +4,7 @@ open Revery.Core;
 open Revery.UI;
 open Revery.UI.Components;
 
-let backgroundColor = Color.hex("#212733");
+let bgColor = Color.hex("#212733");
 let activeBackgroundColor = Color.hex("#2E3440");
 let inactiveBackgroundColor = Color.hex("#272d39");
 let selectionHighlight = Color.hex("#90f7ff");
@@ -37,11 +37,10 @@ let state: state = {
 let noop = () => ();
 
 let getRenderFunctionSelector: (state, Window.t) => React.syntheticElement =
-  (s: state) => {
+  (s: state) =>
     List.filter(x => String.equal(x.name, s.selectedExample), state.examples)
     |> List.hd
     |> (a => a.render);
-  };
 
 module ExampleButton = {
   let component = React.component("ExampleButton");
@@ -51,29 +50,26 @@ module ExampleButton = {
       let highlightColor =
         isActive ? selectionHighlight : Colors.transparentWhite;
 
-      let opacity = 1.0;
-      let backgroundColor =
-        isActive ? activeBackgroundColor : inactiveBackgroundColor;
+      let buttonOpacity = 1.0;
+      let bgColor = isActive ? activeBackgroundColor : inactiveBackgroundColor;
 
       let wrapperStyle =
-        Style.make(
-          ~opacity,
-          ~borderLeft=Style.Border.make(~width=4, ~color=highlightColor, ()),
-          ~backgroundColor,
-          (),
-        );
+        Style.[
+          opacity(buttonOpacity),
+          borderLeft({width: 4, color: highlightColor}),
+          backgroundColor(bgColor),
+        ];
 
       let textColor = isActive ? Colors.white : Colors.grey;
       let textHeaderStyle =
-        Style.make(
-          ~color=textColor,
-          ~fontFamily="Roboto-Regular.ttf",
-          ~fontSize=14,
-          ~margin=16,
-          (),
-        );
-
-      <View style={Style.make(~opacity, ())}>
+        Style.[
+          color(textColor),
+          fontFamily("Roboto-Regular.ttf"),
+          fontSize(14),
+          margin(16),
+        ];
+
+      <View style=[Style.opacity(buttonOpacity)]>
         <Clickable style=wrapperStyle onClick>
           <Text style=textHeaderStyle text=name />
         </Clickable>
@@ -125,40 +121,37 @@ let init = app => {
       onMouseWheel={evt =>
         print_endline("onMouseWheel: " ++ string_of_float(evt.deltaY))
       }
-      style={Style.make(
-        ~position=LayoutTypes.Absolute,
-        ~justifyContent=LayoutTypes.JustifyCenter,
-        ~alignItems=LayoutTypes.AlignCenter,
-        ~backgroundColor,
-        ~bottom=0,
-        ~top=0,
-        ~left=0,
-        ~right=0,
-        ~flexDirection=LayoutTypes.Row,
-        (),
-      )}>
+      style=Style.[
+        position(`Absolute),
+        justifyContent(`Center),
+        alignItems(`Center),
+        backgroundColor(bgColor),
+        bottom(0),
+        top(0),
+        left(0),
+        right(0),
+        flexDirection(`Row),
+      ]>
       <View
-        style={Style.make(
-          ~position=LayoutTypes.Absolute,
-          ~top=0,
-          ~left=0,
-          ~width=175,
-          ~bottom=0,
-          ~backgroundColor,
-          (),
-        )}>
+        style=Style.[
+          position(`Absolute),
+          top(0),
+          left(0),
+          width(175),
+          bottom(0),
+          backgroundColor(bgColor),
+        ]>
         ...buttons
       </View>
       <View
-        style={Style.make(
-          ~position=LayoutTypes.Absolute,
-          ~top=0,
-          ~left=175,
-          ~right=0,
-          ~bottom=0,
-          ~backgroundColor=activeBackgroundColor,
-          (),
-        )}>
+        style=Style.[
+          position(`Absolute),
+          top(0),
+          left(175),
+          right(0),
+          bottom(0),
+          backgroundColor(activeBackgroundColor),
+        ]>
         example
       </View>
     </View>;