Skip to content

Commit

Permalink
Add some example styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@ohanhi
ohanhi committed Nov 9, 2015
1 parent 820dca0 commit 0a35ede
Show file tree
Hide file tree
Showing 4 changed files with 108 additions and 57 deletions.
47 changes: 33 additions & 14 deletions PoC.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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" "+"
]
]


Expand All @@ -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

This comment has been minimized.

Sign in to view

Copy link
@eeue56

eeue56 Nov 10, 2015

Contributor

You could avoid using the ports hack to bootstrap the application by making your Native module override the VirtualDom and by providing the two functions needed to be compatible - render and updateAndReplace. Have a look here. If I get some time I might be free to help out with that :)

This comment has been minimized.

Sign in to view

Copy link
@ohanhi

ohanhi Nov 11, 2015

Author Owner

@eeue56 That sounds like a great idea. Thanks Noah! And yes, any help is greatly appreciated! :)

This comment has been minimized.

Sign in to view

Copy link
@staltz

staltz Nov 17, 2015

Contributor

Great @eeue56 ! We were scratching our heads thinking how to make main support other modules. This would be perfect.
|> Signal.map RN.encode


Expand Down
17 changes: 9 additions & 8 deletions ReactNative/ReactNative.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 ->
Expand Down
97 changes: 63 additions & 34 deletions elm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -9602,6 +9620,7 @@ Elm.PoC.make = function (_elm) {
,Decrement: Decrement
,update: update
,actions: actions
,button: button
,view: view
,initialModel: initialModel
,model: model};
Expand Down Expand Up @@ -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":
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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
Expand Down
4 changes: 3 additions & 1 deletion index.ios.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
);
}
Expand Down

0 comments on commit 0a35ede

Please sign in to comment.