diff --git a/examples/Stopwatch.re b/examples/Stopwatch.re index b0c7e86d2..4ce0b21d6 100644 --- a/examples/Stopwatch.re +++ b/examples/Stopwatch.re @@ -68,11 +68,11 @@ module Clock = { (), ); - let startStop = () => { - state.isRunning - ? dispatch(Stop) - : { - /* + let startStop = () => + state.isRunning ? + dispatch(Stop) : + { + /* * If we're not already running, we'll start a timer job * and use the delta time it passes to update our reducer. */ @@ -82,7 +82,6 @@ module Clock = { /* We'll also keep a handle on the dispose function so we can make sure its called on stop*/ dispatch(Start(dispose)); }; - }; let style = Style.make( @@ -113,16 +112,15 @@ module Clock = { ); + style=Style.[ + position(LayoutTypes.Absolute), + justifyContent(`Center), + alignItems(`Center), + bottom(0), + top(0), + left(0), + right(0), + ]> { + ) => component((_: UiReact.Hooks.empty) => { make: () => { + let styles = Style.create(~style, ()); let events = NodeEvents.make( ~ref?, @@ -40,11 +41,12 @@ module View = { ); let node = (new ViewNode.viewNode)(); node#setEvents(events); - node#setStyle(style); + node#setStyle(styles); node#setTabIndex(tabindex); node; }, configureInstance: (~isFirstRender as _, node) => { + let styles = Style.create(~style, ()); let events = NodeEvents.make( ~ref?, @@ -57,14 +59,13 @@ module View = { (), ); node#setEvents(events); - node#setStyle(style); + node#setStyle(styles); node#setTabIndex(tabindex); node; }, children, } ); - }; let createElement = ( @@ -75,11 +76,11 @@ module View = { ~onBlur=?, ~onFocus=?, ~ref=?, - ~style=Style.defaultStyle, + ~style=[], ~tabindex=None, ~children, (), - ) => { + ) => UiReact.element( make( ~onMouseDown?, @@ -94,7 +95,6 @@ module View = { UiReact.listToElement(children), ), ); - }; }; module Text = { @@ -107,13 +107,14 @@ module Text = { ~onMouseUp=?, ~onMouseWheel=?, ~ref=?, - ~style=Style.defaultStyle, + ~style=[], ~text="", children, - ) => { + ) => component((_: UiReact.Hooks.empty) => { make: () => { + let styles = Style.create(~style, ()); let events = NodeEvents.make( ~ref?, @@ -125,10 +126,11 @@ module Text = { ); let node = (new TextNode.textNode)(text); 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?, @@ -142,14 +144,13 @@ module Text = { /* TODO: Proper way to downcast? */ let tn: TextNode.textNode = Obj.magic(node); tn#setEvents(events); - tn#setStyle(style); + tn#setStyle(styles); tn#setText(text); node; }, children, } ); - }; let createElement = ( @@ -158,11 +159,11 @@ module Text = { ~onMouseUp=?, ~onMouseWheel=?, ~ref=?, - ~style=Style.defaultStyle, + ~style=[], ~text="", ~children, (), - ) => { + ) => UiReact.element( make( ~onMouseDown?, @@ -175,7 +176,6 @@ module Text = { UiReact.listToElement(children), ), ); - }; }; module Image = { @@ -191,7 +191,7 @@ module Image = { ~style=Style.defaultStyle, ~src="", children, - ) => { + ) => component((_: UiReact.Hooks.empty) => { make: () => { @@ -226,7 +226,6 @@ module Image = { children, } ); - }; let createElement = ( @@ -239,7 +238,7 @@ module Image = { ~src="", ~children, (), - ) => { + ) => UiReact.element( make( ~onMouseDown?, @@ -252,5 +251,4 @@ module Image = { UiReact.listToElement(children), ), ); - }; }; diff --git a/src/UI/Style.re b/src/UI/Style.re index 7514f6c8e..a2ba16dc2 100644 --- a/src/UI/Style.re +++ b/src/UI/Style.re @@ -324,6 +324,30 @@ type styleProps = [ | `Cursor(option(MouseCursors.t)) ]; +let flexDirection = d => + switch (d) { + | `Column => LayoutTypes.Column + | `ColumnReverse => LayoutTypes.ColumnReverse + | `RowReverse => LayoutTypes.RowReverse + | `Row => LayoutTypes.Row + }; + +let alignment = a => + switch (a) { + | `Center => LayoutTypes.AlignCenter + | `Stretch => LayoutTypes.AlignStretch + | `Auto => LayoutTypes.AlignAuto + | `FlexStart => LayoutTypes.AlignFlexStart + | `FlexEnd => LayoutTypes.AlignFlexEnd + }; + +let justify = j => + switch (j) { + | `FlexStart => LayoutTypes.JustifyFlexStart + | `Center => LayoutTypes.JustifyCenter + | `FlexEnd => LayoutTypes.JustifyFlexEnd + }; + let right = f => `Right(f); let bottom = f => `Bottom(f); let left = f => `Left(f); @@ -335,7 +359,14 @@ let fontFamily = f => `FontFamily(f); let height = h => `Height(h); let width = w => `Width(w); -let position = p => `Position(p); +let position = p => { + let value = + switch (p) { + | `Absolute => LayoutTypes.Absolute + | `Relative => LayoutTypes.Relative + }; + `Position(value); +}; let margin = m => `Margin(m); let marginLeft = m => `MarginLeft(m); @@ -360,6 +391,11 @@ let borderVertical = (b: Border.t) => Border.make(~color=b.color, ~width=b.width, ()) |> (b => `BorderVertical(b)); +let alignItems = a => `AlignItems(alignment(a)); +let justifyContent = a => `JustifyContent(justify(a)); + +let cursor = c => `Cursor(Some(c)); + let opacity = o => `Opacity(o); let transform = t => `Transform(t); let boxShadow = b => `BoxShadow(b); @@ -367,32 +403,10 @@ let overflow = o => `Overflow(o); let color = o => `Color(o); let backgroundColor = o => `BackgroundColor(o); -let flexDirection = d => - switch (d) { - | `Column => LayoutTypes.Column - | `ColumnReverse => LayoutTypes.ColumnReverse - | `RowReverse => LayoutTypes.RowReverse - | `Row => LayoutTypes.Row - }; - -let alignment = a => - switch (a) { - | `Center => LayoutTypes.AlignCenter - | `Stretch => LayoutTypes.AlignStretch - | `Auto => LayoutTypes.AlignAuto - | `FlexStart => LayoutTypes.AlignFlexStart - | `FlexEnd => LayoutTypes.AlignFlexEnd - }; - -let justify = j => - switch (j) { - | `FlexStart => LayoutTypes.JustifyFlexStart - | `Center => LayoutTypes.JustifyCenter - | `FlexEnd => LayoutTypes.JustifyFlexEnd - }; - let applyStyle = (style: t, styleRule: [> styleProps]) => switch (styleRule) { + | `AlignItems(alignItems) => {...style, alignItems} + | `JustifyContent(justifyContent) => {...style, justifyContent} | `FlexDirection(flexDirection) => {...style, flexDirection} | `Position(position) => {...style, position} | `Margin(margin) => {...style, margin} @@ -412,6 +426,7 @@ let applyStyle = (style: t, styleRule: [> styleProps]) => | `BoxShadow(boxShadow) => {...style, boxShadow} | `Transform(transform) => {...style, transform} | `FontFamily(fontFamily) => {...style, fontFamily} + | `FontSize(fontSize) => {...style, fontSize} | `Cursor(cursor) => {...style, cursor} | `MarginVertical(marginVertical) => {...style, marginVertical} | `MarginHorizontal(marginHorizontal) => {...style, marginHorizontal} @@ -426,6 +441,10 @@ let applyStyle = (style: t, styleRule: [> styleProps]) => | _ => style }; -let create = (~userStyles=[], ~styles=make(), ()) => - List.fold_left(applyStyle, styles, userStyles); -/* -------------------------------------------------------------------------------*/ +let create = (~style=[], ~default=make(), ()) => + List.fold_left(applyStyle, default, style); + +/* let merge = (~source, ~target) => {*/ +/* List.map()*/ +/* }*/ +/* /* -------------------------------------------------------------------------------*/*/ diff --git a/src/UI_Components/Button.re b/src/UI_Components/Button.re index 6642e28b2..6e4bcc19d 100644 --- a/src/UI_Components/Button.re +++ b/src/UI_Components/Button.re @@ -3,43 +3,44 @@ open Revery_Core; let noop = () => (); -let textStyle = (~fontSize, ~fontFamily) => - Style.make(~fontSize, ~fontFamily, ~color=Colors.white, ()); - -let containerStyle = (~width, ~height, ~disabled, ~color) => - Style.make( - ~position=Relative, - ~backgroundColor=disabled ? Colors.dimGrey : color, - ~justifyContent=JustifyCenter, - ~alignItems=AlignCenter, - ~border=Style.Border.make(~width=1, ~color=Colors.white, ()), - ~height, - ~width, - (), - ); - let component = React.component("Button"); let make = ( ~title, ~onClick=noop, - ~color=Colors.dodgerBlue, - ~fontSize=40, - ~width=300, - ~height=100, + ~color as c=Colors.dodgerBlue, + ~fontSize as size=40, + ~width as w=300, + ~height as h=100, ~disabled=false, ~tabindex=?, ~onFocus=?, ~onBlur=?, - ~fontFamily="Roboto-Regular.ttf", + ~fontFamily as family="Roboto-Regular.ttf", (), ) => /* children, */ component((_slots: React.Hooks.empty) => - - + + ); @@ -59,7 +60,7 @@ let createElement = ~disabled=false, ~fontFamily="Roboto-Regular.ttf", (), - ) => { + ) => React.element( make( ~title, @@ -76,4 +77,3 @@ let createElement = (), ), ); -}; diff --git a/src/UI_Components/Clickable.re b/src/UI_Components/Clickable.re index 73f7bc1bc..1e69c5217 100644 --- a/src/UI_Components/Clickable.re +++ b/src/UI_Components/Clickable.re @@ -13,9 +13,12 @@ let noop = () => (); let component = React.component("Clickable"); +/* + FIXME: Merge the passed down styles with the default styles + */ let make = ( - ~style=Style.defaultStyle, + ~style as _, ~onClick: clickFunction=noop, ~onBlur=?, ~onFocus=?, @@ -23,7 +26,7 @@ let make = children: React.syntheticElement, ) => component(slots => { - let (opacity, setOpacity, _slots: React.Hooks.empty) = + let (animatedOpacity, setOpacity, _slots: React.Hooks.empty) = React.Hooks.state(0.8, slots); /* TODO: @@ -38,17 +41,23 @@ let make = onClick(); }; - let style2 = - Style.extend(style, ~opacity, ~cursor=MouseCursors.pointer, ()); + /* let style2 = */ + /* Style.extend(style, ~opacity=animatedOpacity, ~cursor=MouseCursors.pointer, ()); */ - + children ; }); let createElement = ( - ~style=Style.defaultStyle, + ~style=[], ~onClick: clickFunction=noop, ~onBlur=?, ~onFocus=?,