Skip to content

Instantly share code, notes, and snippets.

Avatar

Raphael Rafatpanah persianturtle

View GitHub Profile
@persianturtle
persianturtle / app.re
Last active Feb 15, 2018
Partial from reducer field
View app.re
[@bs.val] [@bs.scope "performance"] external now : unit => float = "";
...
| TouchStart(clientX) =>
if (state.nav.isOpen) {
state.nav.isSwiping := true;
};
ReasonReact.Update({
...state,
@persianturtle
persianturtle / app.re
Created Feb 15, 2018
Bind to JS' performance.now()
View app.re
[@bs.val] [@bs.scope "performance"] external now : unit => float = "";
@persianturtle
persianturtle / app.re
Created Feb 15, 2018
partial from render field
View app.re
let x = List.hd(List.rev(self.state.nav.position));
let x' = List.hd(self.state.nav.position);
...
<nav
className=(self.state.nav.isOpen ? "active" : "")
onClick=(event => ReactEventRe.Mouse.stopPropagation(event))
style=(
self.state.nav.isSwiping^ ?
@persianturtle
persianturtle / app.re
Created Feb 15, 2018
partial from reducer field
View app.re
| TouchStart(clientX) =>
if (state.nav.isOpen) {
state.nav.isSwiping := true;
};
ReasonReact.Update({
...state,
nav: {
...state.nav,
position: [clientX]
}
View page1.re
let component = ReasonReact.statelessComponent("Page1");
let make = _children => {
...component,
render: _self =>
<div className="Page1">
<h1> (ReasonReact.stringToElement("Page1")) </h1>
</div>
};
@persianturtle
persianturtle / app.re
Created Feb 13, 2018
Just the reducer field (solution 2)
View app.re
[@bs.val] [@bs.scope "document"] external documentElement : Dom.element = "";
...
reducer: (action, state) =>
switch action {
| Navigate(_routeWithTitle) => ReasonReact.NoUpdate
| ToggleMenu(isOpen) =>
ReasonReact.UpdateWithSideEffects(
{
@persianturtle
persianturtle / app.re
Created Feb 13, 2018
Just the reducer field (solution 1)
View app.re
reducer: (action, state) =>
switch action {
| Navigate(_routeWithTitle) => ReasonReact.NoUpdate
| ToggleMenu(isOpen) =>
ReasonReact.UpdateWithSideEffects(
{
...state,
nav: {
isOpen: isOpen
}
View app.css
.App:after {
content: '';
transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1),
transform 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms;
position: fixed; top: 0; right: 0; bottom: 0; left: 0;
background-color: rgba(0, 0, 0, 0.33);
transform: translateX(-100%);
opacity: 0;
z-index: 1;
}
@persianturtle
persianturtle / app.re
Created Feb 13, 2018
Just the render field
View app.re
render: self => {
let (route, title) = self.state.routeWithTitle;
<div
className=("App" ++ (self.state.nav.isOpen ? " overlay" : ""))
onClick=(_event => self.send(ToggleMenu(false)))>
<header>
<a
onClick=(
event => {
ReactEventRe.Mouse.stopPropagation(event);
View index.css
body {
margin: 0;
font-family: Helvetica, Arial, sans-serif;
}
h1, h2, h3 {
font-weight: normal;
}
img {
You can’t perform that action at this time.