From e169eec9a627d1c2aca92a9b762510a8f17cf0a9 Mon Sep 17 00:00:00 2001 From: Akin909 Date: Wed, 23 Jan 2019 08:56:14 +0000 Subject: [PATCH 1/4] [WIP] Add unwrap functionality --- src/UI/Style.re | 46 ++++++++++++++++++++++++++++++++++++++ src/UI_Components/Input.re | 22 +++++++++--------- 2 files changed, 58 insertions(+), 10 deletions(-) diff --git a/src/UI/Style.re b/src/UI/Style.re index 8e7fc3c46..59a4d59c2 100644 --- a/src/UI/Style.re +++ b/src/UI/Style.re @@ -344,6 +344,52 @@ let overflow = o => `Overflow(o); let color = o => `Color(o); let backgroundColor = o => `BackgroundColor(o); +let unwrapStyle = (styles, 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, + ); + /* 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 diff --git a/src/UI_Components/Input.re b/src/UI_Components/Input.re index d876734cc..4d0e445e7 100644 --- a/src/UI_Components/Input.re +++ b/src/UI_Components/Input.re @@ -147,6 +147,7 @@ let make = justifyContent(`FlexStart), overflow(LayoutTypes.Hidden), cursor(MouseCursors.text), + ...defaultStyles, ], ~target=style, ) @@ -166,16 +167,17 @@ let make = style, ); - let inputColor = - List.fold_left( - (default, s) => - switch (s) { - | `Color(c) => c - | _ => default - }, - Colors.black, - style, - ); + let inputColor = Style.unwrapStyle(style, `Color, Colors.black); + + /* List.fold_left( */ + /* (default, s) => */ + /* switch (s) { */ + /* | `Color(c) => c */ + /* | _ => default */ + /* }, */ + /* Colors.black, */ + /* style, */ + /* ); */ let innerTextStyles = Style.[ From d7f7909f77c66bd3d54d39bb43b079808632d769 Mon Sep 17 00:00:00 2001 From: Akin909 Date: Wed, 23 Jan 2019 20:14:43 +0000 Subject: [PATCH 2/4] Add getter for fontsize --- src/UI_Components/Input.re | 34 ++++++++++++++++++++++------------ 1 file changed, 22 insertions(+), 12 deletions(-) diff --git a/src/UI_Components/Input.re b/src/UI_Components/Input.re index 4d0e445e7..8dc87490a 100644 --- a/src/UI_Components/Input.re +++ b/src/UI_Components/Input.re @@ -167,23 +167,33 @@ let make = style, ); - let inputColor = Style.unwrapStyle(style, `Color, Colors.black); - - /* List.fold_left( */ - /* (default, s) => */ - /* switch (s) { */ - /* | `Color(c) => c */ - /* | _ => default */ - /* }, */ - /* Colors.black, */ - /* style, */ - /* ); */ + let inputFontSize = + List.fold_left( + (default, s) => + switch (s) { + | `FontSize(fs) => fs + | _ => default + }, + 20, + style, + ); + + let inputColor = + List.fold_left( + (default, s) => + switch (s) { + | `Color(c) => c + | _ => default + }, + Colors.black, + style, + ); let innerTextStyles = Style.[ color(hasPlaceholder ? placeholderColor : inputColor), fontFamily("Roboto-Regular.ttf"), - fontSize(20), + fontSize(inputFontSize), alignItems(`Center), justifyContent(`FlexStart), marginLeft(6), From bc50f9c368d60e0edbdd7a4184c0921438528f85 Mon Sep 17 00:00:00 2001 From: Akin909 Date: Wed, 23 Jan 2019 20:23:05 +0000 Subject: [PATCH 3/4] Add type annotation to unwrap function --- src/UI/Style.re | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/UI/Style.re b/src/UI/Style.re index 59a4d59c2..f093c2f35 100644 --- a/src/UI/Style.re +++ b/src/UI/Style.re @@ -344,7 +344,7 @@ let overflow = o => `Overflow(o); let color = o => `Color(o); let backgroundColor = o => `BackgroundColor(o); -let unwrapStyle = (styles, rule, default) => +let unwrapStyle = (styles: [> props | fontProps], rule, default) => List.fold_left( (default, style) => switch (rule, style) { From 7fc36d0a477dee18af37084454ad8696b7ba3b31 Mon Sep 17 00:00:00 2001 From: Akin909 Date: Thu, 24 Jan 2019 21:19:53 +0000 Subject: [PATCH 4/4] Add a style extraction function and fix input with it --- src/UI/Style.re | 67 ++++++++++---------------------------- src/UI_Components/Input.re | 7 ++-- 2 files changed, 20 insertions(+), 54 deletions(-) diff --git a/src/UI/Style.re b/src/UI/Style.re index f093c2f35..361b57ae8 100644 --- 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 index 8dc87490a..adfc1d5b8 100644 --- 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) =>