From 0a35edeb0c21985394b6f3b296140da431aa936c Mon Sep 17 00:00:00 2001 From: ohanhi Date: Mon, 9 Nov 2015 12:27:25 +0200 Subject: [PATCH] Add some example styling --- PoC.elm | 47 ++++++++++++------ ReactNative/ReactNative.elm | 17 ++++--- elm.js | 97 ++++++++++++++++++++++++------------- index.ios.js | 4 +- 4 files changed, 108 insertions(+), 57 deletions(-) diff --git a/PoC.elm b/PoC.elm index 30e50a3..be4a694 100644 --- a/PoC.elm +++ b/PoC.elm @@ -4,7 +4,7 @@ import Time import Signal import Json.Encode import ReactNative.ReactNative as RN -import ReactNative.Style as S +import ReactNative.Style as Style type alias Model = Int @@ -26,21 +26,40 @@ actions = Signal.mailbox NoOp -view : Signal.Address Action -> Model -> RN.VTree -view address count = +button : Action -> String -> String -> RN.VTree +button action color content = + RN.text + [ Style.color "white" + , Style.textAlign "center" + , Style.backgroundColor color + , Style.paddingTop 5 + , Style.paddingBottom 5 + , Style.width 30 + , Style.fontWeight "bold" + ] + (RN.onPress actions.address action) + content + + +view : Model -> RN.VTree +view count = RN.view + [ Style.alignItems "center" + ] [ RN.text - [] - (RN.onPress address NoOp) + [ Style.textAlign "center" + , Style.marginBottom 30 + ] + (RN.onPress actions.address NoOp) ("Counter: " ++ toString count) - , RN.text - [S.color "blue"] - (RN.onPress address Increment) - "Increment" - , RN.text - [S.color "red"] - (RN.onPress address Decrement) - "Decrement" + , RN.view + [ Style.width 80 + , Style.flexDirection "row" + , Style.justifyContent "space-between" + ] + [ button Decrement "#d33" "-" + , button Increment "#3d3" "+" + ] ] @@ -57,7 +76,7 @@ port vtreeOutput : Signal Json.Encode.Value port vtreeOutput = Signal.map2 (,) model init |> Signal.map fst - |> Signal.map (view actions.address) + |> Signal.map view |> Signal.map RN.encode diff --git a/ReactNative/ReactNative.elm b/ReactNative/ReactNative.elm index b2f2211..0ed2eb6 100644 --- a/ReactNative/ReactNative.elm +++ b/ReactNative/ReactNative.elm @@ -15,18 +15,18 @@ type alias EventHandlerRef = Int type VTree - = VNode String (List VTree) + = VNode String (List RnStyle.Style) (List VTree) | VText (List RnStyle.Style) (String, EventHandlerRef) String -node : String -> List VTree -> VTree -node tagName children = - VNode tagName children +node : String -> List RnStyle.Style -> List VTree -> VTree +node tagName styles children = + VNode tagName styles children -view : List VTree -> VTree -view children = - VNode "View" children +view : List RnStyle.Style -> List VTree -> VTree +view styles children = + VNode "View" styles children text : List RnStyle.Style -> (String, EventHandlerRef) -> String -> VTree @@ -47,9 +47,10 @@ onPress address msg = encode : VTree -> Json.Encode.Value encode vtree = case vtree of - VNode tagName children -> + VNode tagName styles children -> Json.Encode.object [ ("tagName", Json.Encode.string tagName) + , ("style", RnStyle.encode styles) , ("children", Json.Encode.list (List.map encode children)) ] VText styles (handlerName, handlerRef) textContent -> diff --git a/elm.js b/elm.js index 37156df..a5bbac3 100644 --- a/elm.js +++ b/elm.js @@ -9557,38 +9557,56 @@ Elm.PoC.make = function (_elm) { var Increment = {ctor: "Increment"}; var NoOp = {ctor: "NoOp"}; var actions = $Signal.mailbox(NoOp); + var button = F3(function (action, + color, + content) { + return A3($ReactNative$ReactNative.text, + _L.fromArray([$ReactNative$Style.color("white") + ,$ReactNative$Style.textAlign("center") + ,$ReactNative$Style.backgroundColor(color) + ,$ReactNative$Style.paddingTop(5) + ,$ReactNative$Style.paddingBottom(5) + ,$ReactNative$Style.width(30) + ,$ReactNative$Style.fontWeight("bold")]), + A2($ReactNative$ReactNative.onPress, + actions.address, + action), + content); + }); var model = A3($Signal.foldp, update, initialModel, actions.signal); - var view = F2(function (address, - count) { - return $ReactNative$ReactNative.view(_L.fromArray([A3($ReactNative$ReactNative.text, - _L.fromArray([]), - A2($ReactNative$ReactNative.onPress, - address, - NoOp), - A2($Basics._op["++"], - "Counter: ", - $Basics.toString(count))) - ,A3($ReactNative$ReactNative.text, - _L.fromArray([$ReactNative$Style.color("blue")]), - A2($ReactNative$ReactNative.onPress, - address, - Increment), - "Increment") - ,A3($ReactNative$ReactNative.text, - _L.fromArray([$ReactNative$Style.color("red")]), - A2($ReactNative$ReactNative.onPress, - address, - Decrement), - "Decrement")])); - }); + var view = function (count) { + return A2($ReactNative$ReactNative.view, + _L.fromArray([$ReactNative$Style.alignItems("center")]), + _L.fromArray([A3($ReactNative$ReactNative.text, + _L.fromArray([$ReactNative$Style.textAlign("center") + ,$ReactNative$Style.marginBottom(30)]), + A2($ReactNative$ReactNative.onPress, + actions.address, + NoOp), + A2($Basics._op["++"], + "Counter: ", + $Basics.toString(count))) + ,A2($ReactNative$ReactNative.view, + _L.fromArray([$ReactNative$Style.width(80) + ,$ReactNative$Style.flexDirection("row") + ,$ReactNative$Style.justifyContent("space-between")]), + _L.fromArray([A3(button, + Decrement, + "#d33", + "-") + ,A3(button, + Increment, + "#3d3", + "+")]))])); + }; var vtreeOutput = Elm.Native.Port.make(_elm).outboundSignal("vtreeOutput", function (v) { return v; }, - $Signal.map($ReactNative$ReactNative.encode)($Signal.map(view(actions.address))($Signal.map($Basics.fst)(A3($Signal.map2, + $Signal.map($ReactNative$ReactNative.encode)($Signal.map(view)($Signal.map($Basics.fst)(A3($Signal.map2, F2(function (v0,v1) { return {ctor: "_Tuple2" ,_0: v0 @@ -9602,6 +9620,7 @@ Elm.PoC.make = function (_elm) { ,Decrement: Decrement ,update: update ,actions: actions + ,button: button ,view: view ,initialModel: initialModel ,model: model}; @@ -9636,11 +9655,14 @@ Elm.ReactNative.ReactNative.make = function (_elm) { return $Json$Encode.object(_L.fromArray([{ctor: "_Tuple2" ,_0: "tagName" ,_1: $Json$Encode.string(vtree._0)} + ,{ctor: "_Tuple2" + ,_0: "style" + ,_1: $ReactNative$Style.encode(vtree._1)} ,{ctor: "_Tuple2" ,_0: "children" ,_1: $Json$Encode.list(A2($List.map, encode, - vtree._1))}])); + vtree._2))}])); case "VText": switch (vtree._1.ctor) {case "_Tuple2": @@ -9658,7 +9680,7 @@ Elm.ReactNative.ReactNative.make = function (_elm) { ,_1: $Json$Encode.list(_L.fromArray([$Json$Encode.string(vtree._2)]))}]));} break;} _U.badCase($moduleName, - "between lines 61 and 73"); + "between lines 49 and 62"); }(); }; var on = F2(function (decoder, @@ -9673,7 +9695,7 @@ Elm.ReactNative.ReactNative.make = function (_elm) { ,_0: "onPress" ,_1: A2(on, $Json$Decode.value, - function (_v8) { + function (_v9) { return function () { return A2($Signal.message, address, @@ -9697,22 +9719,29 @@ Elm.ReactNative.ReactNative.make = function (_elm) { handler, textContent); }); - var VNode = F2(function (a,b) { + var VNode = F3(function (a, + b, + c) { return {ctor: "VNode" ,_0: a - ,_1: b}; + ,_1: b + ,_2: c}; }); - var node = F2(function (tagName, + var node = F3(function (tagName, + styles, children) { - return A2(VNode, + return A3(VNode, tagName, + styles, children); }); - var view = function (children) { - return A2(VNode, + var view = F2(function (styles, + children) { + return A3(VNode, "View", + styles, children); - }; + }); _elm.ReactNative.ReactNative.values = {_op: _op ,node: node ,view: view diff --git a/index.ios.js b/index.ios.js index ccfa17b..29cf81f 100644 --- a/index.ios.js +++ b/index.ios.js @@ -22,7 +22,9 @@ function vtreeToReactElement(vtree) { vtree.children ); } - return React.createElement(React[vtree.tagName], null, + return React.createElement( + React[vtree.tagName], + { style: vtree.style }, vtree.children.map(vtreeToReactElement) ); }