Add a style extraction function and fix input with it

revery-ui · Jan 25, 2019 · 7fc36d0 · 7fc36d0
1 parent bc50f9c
commit 7fc36d0
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 54 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,58 +346,23 @@ let overflow = o => `Overflow(o);
 let color = o => `Color(o);
 let backgroundColor = o => `BackgroundColor(o);
 
-let unwrapStyle = (styles: [> props | fontProps], rule, default) =>
-  List.fold_left(
-    (default, style) =>
-      switch (rule, style) {
-      | (`AlignItems, `AlignItems(alignItems)) => alignItems
-      | (`JustifyContent, `JustifyContent(justifyContent)) => justifyContent
-      | (`FlexGrow, `FlexGrow(flexGrow)) => flexGrow
-      | (`FlexDirection, `FlexDirection(flexDirection)) => flexDirection
-      | (`Position, `Position(position)) => position
-      | (`Margin, `Margin(margin)) => margin
-      | (`MarginTop, `MarginTop(marginTop)) => marginTop
-      | (`MarginBottom, `MarginBottom(marginBottom)) => marginBottom
-      | (`MarginRight, `MarginRight(marginRight)) => marginRight
-      | (`MarginLeft, `MarginLeft(marginLeft)) => marginLeft
-      | (`MarginVertical, `MarginVertical(marginVertical)) => marginVertical
-      | (`MarginHorizontal, `MarginHorizontal(marginHorizontal)) => marginHorizontal
-      | (`Margin4, `Margin4(m4)) => m4
-      | (`Margin2, `Margin2(m2)) => m2
-      | (`Overflow, `Overflow(overflow)) => overflow
-      | (`Border, `Border(border)) => border
-      | (`BorderBottom, `BorderBottom(borderBottom)) => borderBottom
-      | (`BorderTop, `BorderTop(borderTop)) => borderTop
-      | (`BorderLeft, `BorderLeft(borderLeft)) => borderLeft
-      | (`BorderRight, `BorderRight(borderRight)) => borderRight
-      | (`BorderVertical, `BorderVertical(borderVertical)) => borderVertical
-      | (`BorderHorizontal, `BorderHorizontal(borderHorizontal)) => borderHorizontal
-      | (`Opacity, `Opacity(opacity)) => opacity
-      | (`BoxShadow, `BoxShadow(boxShadow)) => boxShadow
-      | (`Transform, `Transform(transform)) => transform
-      | (`FontFamily, `FontFamily(fontFamily)) => fontFamily
-      | (`FontSize, `FontSize(fontSize)) => fontSize
-      | (`Cursor, `Cursor(cursor)) => cursor
-      | (`Color, `Color(color)) => color
-      | (`BackgroundColor, `BackgroundColor(backgroundColor)) => backgroundColor
-      | (`Width, `Width(width)) => width
-      | (`Height, `Height(height)) => height
-      | (`Bottom, `Bottom(bottom)) => bottom
-      | (`Left, `Left(left)) => left
-      | (`Top, `Top(top)) => top
-      | (`Right, `Right(right)) => right
-      | _ => default
-      },
-    default,
-    styles,
-  );
+/*
+   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=[
@@ -153,9 +153,8 @@ let make =
         )
       );
 
-    /*
-       TODO: convert this to a getter utility function
-     */
+    let viewStyles = Style.extractViewStyles(allStyles);
+
     let inputHeight =
       List.fold_left(
         (default, s) =>