Skip to content

Commit

Permalink
Begin refactor to list API
Browse files Browse the repository at this point in the history
  • Loading branch information
akinsho committed Jan 20, 2019
1 parent 7ff559d commit 649c9e0
Show file tree
Hide file tree
Showing 5 changed files with 118 additions and 94 deletions.
30 changes: 14 additions & 16 deletions examples/Stopwatch.re
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand All @@ -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(
Expand Down Expand Up @@ -113,16 +112,15 @@ module Clock = {
);

<View
style={Style.make(
~position=LayoutTypes.Absolute,
~justifyContent=LayoutTypes.JustifyCenter,
~alignItems=LayoutTypes.AlignCenter,
~bottom=0,
~top=0,
~left=0,
~right=0,
(),
)}>
style=Style.[
position(LayoutTypes.Absolute),
justifyContent(`Center),
alignItems(`Center),
bottom(0),
top(0),
left(0),
right(0),
]>
<View style=clockWrapperStyle>
<Text
style
Expand Down
38 changes: 18 additions & 20 deletions src/UI/Primitives.re
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,13 @@ module View = {
~onFocus=?,
~tabindex=?,
~ref=?,
~style=Style.defaultStyle,
~style=[],
children,
) => {
) =>
component((_: UiReact.Hooks.empty) =>
{
make: () => {
let styles = Style.create(~style, ());
let events =
NodeEvents.make(
~ref?,
Expand All @@ -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?,
Expand All @@ -57,14 +59,13 @@ module View = {
(),
);
node#setEvents(events);
node#setStyle(style);
node#setStyle(styles);
node#setTabIndex(tabindex);
node;
},
children,
}
);
};

let createElement =
(
Expand All @@ -75,11 +76,11 @@ module View = {
~onBlur=?,
~onFocus=?,
~ref=?,
~style=Style.defaultStyle,
~style=[],
~tabindex=None,
~children,
(),
) => {
) =>
UiReact.element(
make(
~onMouseDown?,
Expand All @@ -94,7 +95,6 @@ module View = {
UiReact.listToElement(children),
),
);
};
};

module Text = {
Expand All @@ -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?,
Expand All @@ -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?,
Expand All @@ -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 =
(
Expand All @@ -158,11 +159,11 @@ module Text = {
~onMouseUp=?,
~onMouseWheel=?,
~ref=?,
~style=Style.defaultStyle,
~style=[],
~text="",
~children,
(),
) => {
) =>
UiReact.element(
make(
~onMouseDown?,
Expand All @@ -175,7 +176,6 @@ module Text = {
UiReact.listToElement(children),
),
);
};
};

module Image = {
Expand All @@ -191,7 +191,7 @@ module Image = {
~style=Style.defaultStyle,
~src="",
children,
) => {
) =>
component((_: UiReact.Hooks.empty) =>
{
make: () => {
Expand Down Expand Up @@ -226,7 +226,6 @@ module Image = {
children,
}
);
};

let createElement =
(
Expand All @@ -239,7 +238,7 @@ module Image = {
~src="",
~children,
(),
) => {
) =>
UiReact.element(
make(
~onMouseDown?,
Expand All @@ -252,5 +251,4 @@ module Image = {
UiReact.listToElement(children),
),
);
};
};
75 changes: 47 additions & 28 deletions src/UI/Style.re
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -360,39 +391,22 @@ 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);
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}
Expand All @@ -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}
Expand All @@ -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()*/
/* }*/
/* /* -------------------------------------------------------------------------------*/*/
Loading

0 comments on commit 649c9e0

Please sign in to comment.