Bugfix/fix input example (#256)

This fixes the input component example which #205 broke, it involves having to pull values out of the style list which I wanted to create a sort of *getter* for but having done a bit of reading and wrangling with the compiler doesn't seem straight forward, typing gets a little tricky with variants will keep it in mind and revisit once I've leveled up my reason/ocaml know-how (tracked by #239)
revery-ui · Jan 25, 2019 · f4994ab · f4994ab
1 parent a4e3184
commit f4994ab
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 10 deletions.
diff --git a/src/UI/Style.re b/src/UI/Style.re
@@ -205,7 +205,7 @@ type xy = {
   vertical: int,
 };
 
-type props = [
+type coreStyleProps = [
   | `FlexGrow(int)
   | `FlexDirection(LayoutTypes.flexDirection)
   | `JustifyContent(LayoutTypes.justify)
@@ -248,9 +248,11 @@ type fontProps = [ | `FontFamily(string) | `FontSize(int)];
    these nodes are typed to only allow styles to be specified
    which are relevant to each
  */
-type textStyleProps = [ fontProps | props];
-type viewStyleProps = [ props];
-type imageStyleProps = [ props];
+type textStyleProps = [ fontProps | coreStyleProps];
+type viewStyleProps = [ coreStyleProps];
+type imageStyleProps = [ coreStyleProps];
+
+type allProps = [ coreStyleProps | fontProps];
 
 let emptyTextStyle: list(textStyleProps) = [];
 let emptyViewStyle: list(viewStyleProps) = [];
@@ -344,12 +346,23 @@ let overflow = o => `Overflow(o);
 let color = o => `Color(o);
 let backgroundColor = o => `BackgroundColor(o);
 
+/*
+   Helper function to narrow down a list of all possible style props to
+   one specific to a type of component
+ */
+let rec extractViewStyles = (styles: list(allProps)): list(viewStyleProps) =>
+  switch (styles) {
+  | [] => []
+  | [#viewStyleProps as v, ...list] => [v, ...extractViewStyles(list)]
+  | [_, ...list] => extractViewStyles(list)
+  };
+
 /*
    Apply style takes all style props and maps each to the correct style
    and is used to build up the style record, which is eventually
    used to apply styling to elements.
  */
-let applyStyle = (style, styleRule: [< props | fontProps]) =>
+let applyStyle = (style, styleRule: [< coreStyleProps | fontProps]) =>
   switch (styleRule) {
   | `AlignItems(alignItems) => {...style, alignItems}
   | `JustifyContent(justifyContent) => {...style, justifyContent}

diff --git a/src/UI_Components/Input.re b/src/UI_Components/Input.re
@@ -138,7 +138,7 @@ let make =
        computed styles
      */
 
-    let viewStyles =
+    let allStyles =
       Style.(
         merge(
           ~source=[
@@ -147,14 +147,14 @@ let make =
             justifyContent(`FlexStart),
             overflow(LayoutTypes.Hidden),
             cursor(MouseCursors.text),
+            ...defaultStyles,
           ],
           ~target=style,
         )
       );
 
-    /*
-       TODO: convert this to a getter utility function
-     */
+    let viewStyles = Style.extractViewStyles(allStyles);
+
     let inputHeight =
       List.fold_left(
         (default, s) =>
@@ -166,6 +166,17 @@ let make =
         style,
       );
 
+    let inputFontSize =
+      List.fold_left(
+        (default, s) =>
+          switch (s) {
+          | `FontSize(fs) => fs
+          | _ => default
+          },
+        20,
+        style,
+      );
+
     let inputColor =
       List.fold_left(
         (default, s) =>
@@ -181,7 +192,7 @@ let make =
       Style.[
         color(hasPlaceholder ? placeholderColor : inputColor),
         fontFamily("Roboto-Regular.ttf"),
-        fontSize(20),
+        fontSize(inputFontSize),
         alignItems(`Center),
         justifyContent(`FlexStart),
         marginLeft(6),