From 5f68cbaba4a559dd78a32138d8422a1aaeae3629 Mon Sep 17 00:00:00 2001
From: Tom Ekander <ekander.tom@gmail.com>
Date: Thu, 2 May 2019 22:18:48 +0200
Subject: [PATCH] docs: update examples

---
 examples/App.re      | 80 ++++++++++++++++++++++++++++++++++++++++++++
 examples/Basic.re    | 36 ++++++++++++++++++--
 examples/Index.re    |  2 +-
 examples/LazyLoad.re | 55 ++++++++++++++++++++++++++++++
 4 files changed, 169 insertions(+), 4 deletions(-)
 create mode 100644 examples/App.re
 create mode 100644 examples/LazyLoad.re

diff --git a/examples/App.re b/examples/App.re
new file mode 100644
index 0000000..83b1cd4
--- /dev/null
+++ b/examples/App.re
@@ -0,0 +1,80 @@
+module Style = {
+  let global = ReactDOMRe.Style.make(~fontFamily="sans-serif", ());
+
+  let title =
+    ReactDOMRe.Style.make(
+      ~alignItems="flex-start",
+      ~borderBottom="2px solid hotpink",
+      ~display="flex",
+      ~fontSize="18px",
+      ~fontWeight="700",
+      ~margin="6px 12px",
+      ~marginBottom="24px",
+      ~paddingBottom="6px",
+      (),
+    );
+
+  let navigation =
+    ReactDOMRe.Style.make(
+      ~backgroundColor="#f9f9f9",
+      ~borderRight="1px solid #eaeaea",
+      ~bottom="0px",
+      ~display="flex",
+      ~flexDirection="column",
+      ~left="0px",
+      ~listStyleType="none",
+      ~padding="32px 12px",
+      ~position="fixed",
+      ~top="0px",
+      ~width="256px",
+      (),
+    );
+
+  let link = active =>
+    ReactDOMRe.Style.make(
+      ~color="black",
+      ~fontWeight={
+        active ? "700" : "500";
+      },
+      ~margin="6px 12px",
+      ~textDecoration="none",
+      (),
+    );
+};
+
+[@react.component]
+let make = () => {
+  let url = ReasonReactRouter.useUrl();
+
+  let (example, currentUrl) =
+    switch (url.path) {
+    | ["basic"]
+    | [] => (<Basic />, "basic")
+    | ["lazyload"] => (<LazyLoad />, "lazyload")
+    | _ => (
+        <h1 style={ReactDOMRe.Style.make(~paddingLeft="320px", ())}>
+          {"Nothing to see here..." |> React.string}
+        </h1>,
+        "",
+      )
+    };
+
+  <div style=Style.global>
+    <nav style=Style.navigation>
+      <h1 style=Style.title> {"bs-react-is-visible" |> React.string} </h1>
+      <a
+        href="/basic"
+        title="Basic"
+        style={Style.link(currentUrl === "basic")}>
+        {"Basic" |> React.string}
+      </a>
+      <a
+        href="/lazyload"
+        title="LazyLoad"
+        style={Style.link(currentUrl === "lazyload")}>
+        {"Lazy Load" |> React.string}
+      </a>
+    </nav>
+    example
+  </div>;
+};
diff --git a/examples/Basic.re b/examples/Basic.re
index 3bdbfcf..6d2d8e9 100644
--- a/examples/Basic.re
+++ b/examples/Basic.re
@@ -1,10 +1,40 @@
+module Style = {
+  let wrapper =
+    ReactDOMRe.Style.make(
+      ~height="150vh",
+      ~display="flex",
+      ~flexDirection="column",
+      ~alignItems="center",
+      ~transition="background-color 1s ease",
+      (),
+    );
+
+  let box = visible =>
+    ReactDOMRe.Style.make(
+      ~alignItems="center",
+      ~backgroundColor={
+        visible ? "hotpink" : "transparent";
+      },
+      ~color="white",
+      ~display="flex",
+      ~fontSize="32px",
+      ~height="256px",
+      ~justifyContent="center",
+      ~marginTop="auto",
+      ~transition="background-color 1s ease",
+      ~width="256px",
+      (),
+    );
+};
+
 [@react.component]
 let make = () => {
   let (isVisible, ref) = ReactIsVisible.useIsVisible();
 
-  <div style={ReactDOMRe.Style.make(~height="200vh", ())}>
-    <h1 ref>
+  <div style=Style.wrapper>
+    <h1> {"Scroll down" |> React.string} </h1>
+    <div ref style={Style.box(isVisible)}>
       {(isVisible ? "I'm visible!" : "I'm not visible!") |> React.string}
-    </h1>
+    </div>
   </div>;
 };
diff --git a/examples/Index.re b/examples/Index.re
index cb2f435..9429167 100644
--- a/examples/Index.re
+++ b/examples/Index.re
@@ -1 +1 @@
-ReactDOMRe.renderToElementWithId(<Basic />, "root");
+ReactDOMRe.renderToElementWithId(<App />, "root");
diff --git a/examples/LazyLoad.re b/examples/LazyLoad.re
new file mode 100644
index 0000000..af34650
--- /dev/null
+++ b/examples/LazyLoad.re
@@ -0,0 +1,55 @@
+module Style = {
+  let wrapper =
+    ReactDOMRe.Style.make(
+      ~alignItems="center",
+      ~display="grid",
+      ~fontFamily="sans-serif",
+      ~gridGap="32px",
+      ~justifyContent="center",
+      (),
+    );
+
+  let box =
+    ReactDOMRe.Style.make(
+      ~alignItems="center",
+      ~backgroundColor="hotpink",
+      ~color="white",
+      ~display="flex",
+      ~fontSize="32px",
+      ~height="256px",
+      ~justifyContent="center",
+      (),
+    );
+};
+
+[@react.component]
+let make = () => {
+  let (isVisible, ref) = ReactIsVisible.useIsVisible();
+  let (items, setItems) = React.useState(() => [|0, 0, 0, 0|]);
+
+  React.useEffect1(
+    () => {
+      isVisible
+        ? setItems(currentItems =>
+            currentItems |> Array.append([|0, 0, 0, 0|])
+          )
+        : ();
+
+      None;
+    },
+    [|isVisible|],
+  );
+
+  <div style=Style.wrapper>
+    {items
+     |> Array.mapi((i, _item) =>
+          <div key={string_of_int(i)} style=Style.box>
+            {string_of_int(i) |> React.string}
+          </div>
+        )
+     |> React.array}
+    <span ref>
+      {"When you see this, more items will load" |> React.string}
+    </span>
+  </div>;
+};