Skip to content

Commit

Permalink
Convert even more examples...
Browse files Browse the repository at this point in the history
  • Loading branch information
@akinsho
akinsho committed Jan 20, 2019
1 parent 76e3c64 commit 88cad48
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 145 deletions.
35 changes: 14 additions & 21 deletions examples/DefaultButton.re
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,36 +5,30 @@ open Revery.Core;
module DefaultButtonWithCounter = {
let component = React.component("DefaultButtonWithCounter");

let make = () => {
let make = () =>
component(slots => {
let (count, setCount, _slots: React.Hooks.empty) =
React.Hooks.state(0, slots);
let increment = () => setCount(count + 1);

let containerStyle =
Style.make(
~justifyContent=JustifyCenter,
~alignItems=AlignCenter,
(),
);
Style.[justifyContent(`Center), alignItems(`Center)];

let countContainer =
Style.make(
~width=300,
~height=300,
~alignItems=LayoutTypes.AlignCenter,
~justifyContent=LayoutTypes.JustifyCenter,
(),
);
Style.[
width(300),
height(300),
alignItems(`Center),
justifyContent(`Center),
];

let countStyle =
Style.make(
~fontSize=50,
~margin=24,
~color=Colors.black,
~fontFamily="Roboto-Regular.ttf",
(),
);
Style.[
fontSize(50),
margin(24),
color(Colors.black),
fontFamily("Roboto-Regular.ttf"),
];

let countStr = string_of_int(count);
<View style=containerStyle>
Expand All @@ -45,7 +39,6 @@ module DefaultButtonWithCounter = {
<Button disabled=true title="(disabled)" onClick=increment />
</View>;
});
};

let createElement = (~children as _, ()) => React.element(make());
};
Expand Down
101 changes: 38 additions & 63 deletions examples/Flexbox.re
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,77 +5,67 @@ let parentWidth = 400;
let childWidth = 300;

let parentStyles =
(
~alignment=LayoutTypes.AlignAuto,
~direction=LayoutTypes.Row,
~justify=LayoutTypes.JustifyCenter,
(),
) =>
Style.make(
~backgroundColor=Colors.green,
~position=LayoutTypes.Relative,
~width=parentWidth,
~height=100,
~alignItems=alignment,
~justifyContent=justify,
~flexDirection=direction,
(),
);
(~alignment as a=`Auto, ~direction as d=`Row, ~justify as j=`Center, ()) =>
Style.[
backgroundColor(Colors.green),
position(`Relative),
width(parentWidth),
height(100),
alignItems(a),
justifyContent(j),
flexDirection(d),
];

let childStyles =
Style.make(
~backgroundColor=Colors.blue,
~position=LayoutTypes.Relative,
~width=childWidth,
~height=40,
(),
);
Style.[
backgroundColor(Colors.blue),
position(`Relative),
width(childWidth),
height(40),
];

let defaultTextStyles =
Style.make(
~fontSize=20,
~fontFamily="Roboto-Regular.ttf",
~color=Colors.white,
~backgroundColor=Colors.blue,
(),
);
Style.[
fontSize(20),
fontFamily("Roboto-Regular.ttf"),
color(Colors.white),
backgroundColor(Colors.blue),
];

let parentColumnStyle = parentStyles(~direction=LayoutTypes.Column);
let parentColumnStyle = parentStyles(~direction=`Column);
let headerStyle =
Style.make(
~marginTop=25,
~marginBottom=25,
~fontSize=30,
~fontFamily="Roboto-Regular.ttf",
~color=Colors.white,
(),
);
Style.[
marginTop(25),
marginBottom(25),
fontSize(30),
fontFamily("Roboto-Regular.ttf"),
color(Colors.white),
];

let horizontalStyles =
<View>
<Text style=headerStyle text="Flex Direction Row" />
<View style={parentColumnStyle(~alignment=LayoutTypes.AlignAuto, ())}>
<View style={parentColumnStyle(~alignment=`Auto, ())}>
<View style=childStyles>
<Text style=defaultTextStyles text="Default Flex" />
</View>
</View>
<View style={parentColumnStyle(~alignment=LayoutTypes.AlignCenter, ())}>
<View style={parentColumnStyle(~alignment=`Center, ())}>
<View style=childStyles>
<Text style=defaultTextStyles text="Center" />
</View>
</View>
<View
style={parentColumnStyle(~alignment=LayoutTypes.AlignFlexStart, ())}>
<View style={parentColumnStyle(~alignment=`FlexStart, ())}>
<View style=childStyles>
<Text style=defaultTextStyles text="Flex Start" />
</View>
</View>
<View style={parentColumnStyle(~alignment=LayoutTypes.AlignFlexEnd, ())}>
<View style={parentColumnStyle(~alignment=`FlexEnd, ())}>
<View style=childStyles>
<Text style=defaultTextStyles text="Flex End" />
</View>
</View>
<View style={parentColumnStyle(~alignment=LayoutTypes.AlignStretch, ())}>
<View style={parentColumnStyle(~alignment=`Stretch, ())}>
<View style=childStyles>
<Text style=defaultTextStyles text="Flex Stretch" />
</View>
Expand All @@ -85,32 +75,17 @@ let horizontalStyles =
let verticalStyles =
<View>
<Text style=headerStyle text="Flex Direction Column" />
<View
style={parentStyles(
~direction=LayoutTypes.Column,
~justify=LayoutTypes.JustifyFlexStart,
(),
)}>
<View style={parentStyles(~direction=`Column, ~justify=`FlexStart, ())}>
<View style=childStyles>
<Text style=defaultTextStyles text="Align Flex Start" />
</View>
</View>
<View
style={parentStyles(
~direction=LayoutTypes.Column,
~justify=LayoutTypes.JustifyCenter,
(),
)}>
<View style={parentStyles(~direction=`Column, ~justify=`Center, ())}>
<View style=childStyles>
<Text style=defaultTextStyles text="Align Flex Center" />
</View>
</View>
<View
style={parentStyles(
~direction=LayoutTypes.Column,
~justify=LayoutTypes.JustifyFlexEnd,
(),
)}>
<View style={parentStyles(~direction=`Column, ~justify=`FlexEnd, ())}>
<View style=childStyles>
<Text style=defaultTextStyles text="Align Flex End" />
</View>
Expand Down
52 changes: 24 additions & 28 deletions examples/Focus.re
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,31 +13,28 @@ module SimpleButton = {

let increment = () => setCount(count + 1);

let wrapperStyle =
Style.make(
~backgroundColor=Color.rgba(1., 1., 1., 0.1),
~border=Style.Border.make(~width=2, ~color=Colors.white, ()),
~margin=16,
(),
);

let textHeaderStyle =
Style.make(
~color=Colors.white,
~fontFamily="Roboto-Regular.ttf",
~fontSize=20,
~margin=4,
(),
);
let txt = focused ? "Focused" : "Unfocused";
let textContent = txt ++ " me: " ++ string_of_int(count);
<Clickable
onClick=increment
tabindex=0
onFocus={() => setFocus(true)}
onBlur={() => setFocus(false)}>
<View style=wrapperStyle>
<Text style=textHeaderStyle text=textContent />
<View
style=Style.[
backgroundColor(Color.rgba(1., 1., 1., 0.1)),
border({width: 2, color: Colors.white}),
margin(16),
]>
<Text
style=Style.[
color(Colors.white),
fontFamily("Roboto-Regular.ttf"),
fontSize(20),
margin(4),
]
text=textContent
/>
</View>
</Clickable>;
});
Expand All @@ -47,15 +44,14 @@ module SimpleButton = {

let render = () =>
<View
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),
]>
<SimpleButton />
</View>;
64 changes: 31 additions & 33 deletions examples/Overflow.re
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,35 +3,32 @@ open Revery.Core;
open Revery.UI.Components;

let containerStyle =
Style.make(
~position=LayoutTypes.Absolute,
~top=0,
~bottom=0,
~left=0,
~right=0,
~alignItems=LayoutTypes.AlignCenter,
~justifyContent=LayoutTypes.JustifyCenter,
~flexDirection=LayoutTypes.Column,
~backgroundColor=Colors.black,
(),
);
Style.[
position(`Absolute),
top(0),
bottom(0),
left(0),
right(0),
alignItems(`Center),
justifyContent(`Center),
flexDirection(`Column),
backgroundColor(Colors.black),
];

let outerBox =
Style.make(
~width=75,
~height=75,
~overflow=LayoutTypes.Hidden,
~backgroundColor=Colors.red,
(),
);
Style.[
width(75),
height(75),
overflow(LayoutTypes.Hidden),
backgroundColor(Colors.red),
];

let innerBox =
Style.make(
~width=150,
~height=150,
~backgroundColor=Color.rgba(0., 1.0, 0., 0.5),
(),
);
Style.[
width(150),
height(150),
backgroundColor(Color.rgba(0., 1.0, 0., 0.5)),
];

module Sample = {
let component = React.component("Sample");
Expand All @@ -41,18 +38,19 @@ module Sample = {
let (hidden, setHidden, _slots: React.Hooks.empty) =
React.Hooks.state(false, slots);

let outerStyle = {
...outerBox,
overflow: hidden ? LayoutTypes.Hidden : LayoutTypes.Visible,
};
let outerStyle =
List.append(
outerBox,
[
Style.overflow(hidden ? LayoutTypes.Hidden : LayoutTypes.Visible),
],
);

let onClick = _ => {
setHidden(!hidden);
};
let onClick = _ => setHidden(!hidden);

<View style=containerStyle>
<View style=outerStyle> <View style=innerBox /> </View>
<View style={Style.make(~marginTop=80, ())}>
<View style=Style.[marginTop(80)]>
<Button fontSize=20 height=45 title="Toggle overflow" onClick />
</View>
</View>;
Expand Down

0 comments on commit 88cad48

Please sign in to comment.