Skip to content

Commit

Permalink
Refactor examples to new API [WIP]
Browse files Browse the repository at this point in the history
  • Loading branch information
@akinsho
akinsho committed Jan 20, 2019
1 parent 649c9e0 commit 76e3c64
Show file tree
Hide file tree
Showing 4 changed files with 127 additions and 137 deletions.
133 changes: 64 additions & 69 deletions examples/Calculator.re
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,12 @@ module Row = {
let make = children =>
component((_slots: React.Hooks.empty) => {
let style =
Style.make(
~flexDirection=LayoutTypes.Row,
~alignItems=LayoutTypes.AlignStretch,
~justifyContent=LayoutTypes.JustifyCenter,
~flexGrow=1,
(),
);
Style.[
flexDirection(`Row),
alignItems(`Stretch),
justifyContent(`Center),
flexGrow(1),
];
<View style> ...children </View>;
});

Expand All @@ -30,14 +29,13 @@ module Column = {
let make = children =>
component((_slots: React.Hooks.empty) => {
let style =
Style.make(
~flexDirection=LayoutTypes.Column,
~alignItems=LayoutTypes.AlignStretch,
~justifyContent=LayoutTypes.JustifyCenter,
~backgroundColor=Colors.darkGrey,
~flexGrow=1,
(),
);
Style.[
flexDirection(`Column),
alignItems(`Stretch),
justifyContent(`Center),
backgroundColor(Colors.darkGrey),
flexGrow(1),
];
<View style> ...children </View>;
});

Expand All @@ -48,29 +46,32 @@ module Button = {
let component = React.component("Button");

let make =
(~fontFamily="Roboto-Regular.ttf", ~contents: string, ~onClick, ()) =>
(
~fontFamily as family="Roboto-Regular.ttf",
~contents: string,
~onClick,
(),
) =>
component((_slots: React.Hooks.empty) => {
let clickableStyle =
Style.make(
~position=LayoutTypes.Relative,
~backgroundColor=Colors.lightGrey,
~justifyContent=LayoutTypes.JustifyCenter,
~alignItems=LayoutTypes.AlignCenter,
~flexGrow=1,
Style.[
position(`Relative),
backgroundColor(Colors.lightGrey),
justifyContent(`Center),
alignItems(`Center),
flexGrow(1),
/* Min width */
~width=125,
~margin=10,
(),
);
width(125),
margin(10),
];
let viewStyle =
Style.make(
~position=LayoutTypes.Relative,
~justifyContent=LayoutTypes.JustifyCenter,
~alignItems=LayoutTypes.AlignCenter,
(),
);
Style.[
position(`Relative),
justifyContent(`Center),
alignItems(`Center),
];
let textStyle =
Style.make(~color=Colors.black, ~fontFamily, ~fontSize=32, ());
Style.[color(Colors.black), fontFamily(family), fontSize(32)];

<Clickable style=clickableStyle onClick>
<View style=viewStyle> <Text style=textStyle text=contents /> </View>
Expand All @@ -84,41 +85,37 @@ module Button = {
~onClick,
~children as _,
(),
) => {
) =>
React.element(make(~fontFamily, ~contents, ~onClick, ()));
};
};
module Display = {
let component = React.component("Display");

let make = (~display: string, ~curNum: string, ()) =>
component((_slots: React.Hooks.empty) => {
let viewStyle =
Style.make(
~backgroundColor=Colors.white,
~height=120,
~flexDirection=LayoutTypes.Column,
~alignItems=LayoutTypes.AlignStretch,
~justifyContent=LayoutTypes.JustifyFlexStart,
~flexGrow=2,
(),
);
Style.[
backgroundColor(Colors.white),
height(120),
flexDirection(`Column),
alignItems(`Stretch),
justifyContent(`FlexStart),
flexGrow(2),
];
let displayStyle =
Style.make(
~color=Colors.black,
~fontFamily="Roboto-Regular.ttf",
~fontSize=20,
~margin=15,
(),
);
Style.[
color(Colors.black),
fontFamily("Roboto-Regular.ttf"),
fontSize(20),
margin(15),
];
let numStyle =
Style.make(
~color=Colors.black,
~fontFamily="Roboto-Regular.ttf",
~fontSize=32,
~margin=15,
(),
);
Style.[
color(Colors.black),
fontFamily("Roboto-Regular.ttf"),
fontSize(32),
margin(15),
];

<View style=viewStyle>
<Text style=displayStyle text=display />
Expand Down Expand Up @@ -205,19 +202,19 @@ let eval = (state, newOp) => {
let reducer = (action, state) =>
switch (action) {
| BackspaceKeyPressed =>
state.number == ""
? state
: {
state.number == "" ?
state :
{
...state,
number: String.sub(state.number, 0, String.length(state.number) - 1),
}
| ClearKeyPressed(ac) =>
ac
? {operator: `Nop, result: 0., display: "", number: ""}
: {...state, number: ""}
ac ?
{operator: `Nop, result: 0., display: "", number: ""} :
{...state, number: ""}
| DotKeyPressed =>
String.contains(state.number, '.')
? state : {...state, number: state.number ++ "."}
String.contains(state.number, '.') ?
state : {...state, number: state.number ++ "."}
| NumberKeyPressed(n) => {...state, number: state.number ++ n}
| OperationKeyPressed(o) =>
let (result, display) = eval(state, o);
Expand Down Expand Up @@ -388,6 +385,4 @@ module Calculator = {
React.element(make(window));
};

let render = window => {
<Calculator window />;
};
let render = window => <Calculator window />;
48 changes: 21 additions & 27 deletions examples/Hello.re
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,9 @@ module Logo = {
slots,
);

let onMouseDown = _ => {
setOpacity(0.5);
};
let onMouseDown = _ => setOpacity(0.5);

let onMouseUp = _ => {
setOpacity(1.0);
};
let onMouseUp = _ => setOpacity(1.0);

<View onMouseDown onMouseUp>
<Image
Expand All @@ -68,7 +64,7 @@ module AnimatedText = {

let make = (~text, ~delay, ()) =>
component(slots => {
let (opacity, slots) =
let (animatedOpacity, slots) =
Hooks.animation(
Animated.floatValue(0.),
{
Expand All @@ -95,15 +91,14 @@ module AnimatedText = {
);

let textHeaderStyle =
Style.make(
~color=Colors.white,
~fontFamily="Roboto-Regular.ttf",
~fontSize=24,
~marginHorizontal=8,
~opacity,
~transform=[TranslateY(translate)],
(),
);
Style.[
color(Colors.white),
fontFamily("Roboto-Regular.ttf"),
fontSize(24),
marginHorizontal(8),
opacity(animatedOpacity),
transform([Transform.TranslateY(translate)]),
];

<Text style=textHeaderStyle text />;
});
Expand All @@ -117,24 +112,23 @@ let render = () =>
onMouseWheel={evt =>
print_endline("onMouseWheel: " ++ string_of_float(evt.deltaY))
}
style={Style.make(
~position=LayoutTypes.Absolute,
~justifyContent=LayoutTypes.JustifyCenter,
~alignItems=LayoutTypes.AlignCenter,
~bottom=0,
~top=0,
~left=0,
~right=0,
(),
)}>
style=Style.[
position(`Absolute),
justifyContent(`Center),
alignItems(`Center),
bottom(0),
top(0),
left(0),
right(0),
]>
<Logo />
<View
ref={r =>
print_endline(
"View internal id:" ++ string_of_int(r#getInternalId()),
)
}
style={Style.make(~flexDirection=Row, ~alignItems=AlignFlexEnd, ())}>
style=Style.[flexDirection(`Row), alignItems(`FlexEnd)]>
<AnimatedText delay=0.0 text="Welcome" />
<AnimatedText delay=0.5 text="to" />
<AnimatedText delay=1. text="Revery" />
Expand Down
61 changes: 27 additions & 34 deletions examples/Stopwatch.re
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,14 +60,6 @@ module Clock = {
slots,
);

let clockWrapperStyle =
Style.make(
~margin=20,
~width=150,
~borderBottom=Style.Border.make(~color=Colors.gray, ~width=2, ()),
(),
);

let startStop = () =>
state.isRunning ?
dispatch(Stop) :
Expand All @@ -83,50 +75,51 @@ module Clock = {
dispatch(Start(dispose));
};

let style =
Style.make(
~color=Colors.white,
~fontFamily="Roboto-Regular.ttf",
~fontSize=24,
~marginVertical=20,
~width=200,
(),
);

let buttonText = state.isRunning ? "STOP" : "START";

let marcherOpacity = state.isRunning ? 1.0 : 0.0;
let getMarcherPosition = t =>
sin(Time.to_float_seconds(t) *. 2. *. pi) /. 2. +. 0.5;

let marcherStyle =
Style.make(
~position=LayoutTypes.Absolute,
~bottom=0,
~opacity=marcherOpacity,
~left=int_of_float(getMarcherPosition(state.elapsedTime) *. 146.),
~width=4,
~height=4,
~backgroundColor=Color.hex("#90f7ff"),
(),
);

<View
style=Style.[
position(LayoutTypes.Absolute),
position(`Absolute),
justifyContent(`Center),
alignItems(`Center),
bottom(0),
top(0),
left(0),
right(0),
]>
<View style=clockWrapperStyle>
<View
style=Style.[
margin(20),
width(150),
borderBottom({color: Colors.gray, width: 2}),
]>
<Text
style
style=Style.[
color(Colors.white),
fontFamily("Roboto-Regular.ttf"),
fontSize(24),
marginVertical(20),
width(200),
]
text={string_of_float(state.elapsedTime |> Time.to_float_seconds)}
/>
<View style=marcherStyle />
<View
style=Style.[
position(`Absolute),
bottom(0),
opacity(marcherOpacity),
left(
int_of_float(getMarcherPosition(state.elapsedTime) *. 146.),
),
width(4),
height(4),
backgroundColor(Color.hex("#90f7ff")),
]
/>
</View>
<Button title=buttonText onClick=startStop />
</View>;
Expand Down
Loading

0 comments on commit 76e3c64

Please sign in to comment.