ybbond-reason

My old site written in ReasonReact
Log | Files | Refs | README

commit ec91bd22cf333e31beb7457bbbfe86964318e3df
parent 274d36ead9e239f1fd03b6c36ecf3a7007e68c6a
Author: Yohanes Bandung <bandungpenting@gmail.com>
Date:   Wed, 14 Aug 2019 18:08:11 +0700

feature(Components) => added <ContentList />

Diffstat:
Mbsconfig.json | 2+-
Msrc/CurViScene.re | 8++++++++
Dsrc/List.re | 26--------------------------
Dsrc/Spoiler.re | 31-------------------------------
Rsrc/Component1.re -> src/components/Component1.re | 0
Rsrc/Component2.re -> src/components/Component2.re | 0
Asrc/components/ContentList.re | 65+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Asrc/components/Spoiler.re | 31+++++++++++++++++++++++++++++++

8 files changed, 105 insertions(+), 58 deletions(-)

diff --git a/bsconfig.json b/bsconfig.json
@@ -1,5 +1,5 @@
 {
-  "name": "react-hooks-template",
+  "name": "reason-ybbond",
   "reason": {
     "react-jsx": 3
   },
diff --git a/src/CurViScene.re b/src/CurViScene.re
@@ -32,5 +32,13 @@ let make = () => {
 
   <React.Fragment>
     <Spoiler content={ReasonReact.string("Hello")} title="Yeay" />
+    <ContentList
+      content=[|
+        {
+          variant: Default,
+          text: <span> {ReasonReact.string("hello")} </span>,
+        },
+      |]
+    />
   </React.Fragment>;
 };
diff --git a/src/List.re b/src/List.re
@@ -1,26 +0,0 @@
-module Styles = {
-  open Css;
-  let ul = style([
-    marginLeft(em(2.5)),
-    marginTop(em(0.8)),
-    paddingLeft(px(0)),
-    /* listStyle((`outside, `none)), */
-  ]);
-}
-
-type listContent = {
-  text: ReasonReact.reactElement,
-  customClass: string,
-};
-
-[@react.component]
-let make = (~content: list(listContent)) => {
-  let contentMapped = List.map((item, key) => {
-    <li key={key}>
-      <p></p>
-    </li>
-  }, content);
-  <ul className=Styles.ul>
-    <li><span>{ReasonReact.string("Hell")}</span></li>
-  </ul>
-};
diff --git a/src/Spoiler.re b/src/Spoiler.re
@@ -1,31 +0,0 @@
-module Styles = {
-  open Css;
-
-  let summary =
-    style([
-      fontSize(em(1.0)),
-      marginTop(em(1.0)),
-      marginBottom(em(1.0)),
-      marginLeft(px(0)),
-      marginRight(px(0)),
-      flex(`num(1.0)),
-      textAlign(`left),
-      /* outline(`none), */
-      cursor(`pointer),
-      userSelect(`none),
-    ]);
-};
-
-type state = {isopen: bool};
-
-let initialState = {isopen: false};
-
-type action =
-  | Toggle;
-
-[@react.component]
-let make = (~content: ReasonReact.reactElement, ~title: string) =>
-  <details>
-    <summary className=Styles.summary> {ReasonReact.string(title)} </summary>
-    content
-  </details>;
diff --git a/src/Component1.re b/src/components/Component1.re
diff --git a/src/Component2.re b/src/components/Component2.re
diff --git a/src/components/ContentList.re b/src/components/ContentList.re
@@ -0,0 +1,65 @@
+module Styles = {
+  open Css;
+  let ul =
+    style([
+      marginLeft(em(2.5)),
+      marginTop(em(0.8)),
+      paddingLeft(px(0)),
+      listStyle(`none, `inside, `none),
+    ]);
+
+  let pDefault =
+    style([
+      before([
+        position(`absolute),
+        marginLeft(em(-1.5)),
+        contentRule({j|•|j}),
+      ]),
+    ]);
+
+  let pDone =
+    style([
+      before([
+        position(`absolute),
+        marginLeft(em(-1.5)),
+        contentRule({j|⊗|j}),
+      ]),
+    ]);
+
+  let pProgress =
+    style([
+      before([
+        position(`absolute),
+        marginLeft(em(-1.5)),
+        contentRule({j|⊙|j}),
+      ]),
+    ]);
+};
+
+type listType =
+  | Default
+  | Progress
+  | Done;
+type listContent = {
+  text: ReasonReact.reactElement,
+  variant: listType,
+};
+
+[@react.component]
+let make = (~content: array(listContent)) => {
+  let contentMapped =
+    Array.map(
+      (item: listContent) => {
+        let listPointType =
+          switch (item.variant) {
+          | Progress => Styles.pProgress
+          | Done => Styles.pDone
+          | Default => Styles.pDefault
+          };
+        <li> <p className=listPointType> {item.text} </p> </li>;
+      },
+      content,
+    );
+
+  <ul className=Styles.ul> {React.array(contentMapped)} </ul>;
+};
diff --git a/src/components/Spoiler.re b/src/components/Spoiler.re
@@ -0,0 +1,31 @@
+module Styles = {
+  open Css;
+
+  let summary =
+    style([
+      fontSize(em(1.0)),
+      marginTop(em(1.0)),
+      marginBottom(em(1.0)),
+      marginLeft(px(0)),
+      marginRight(px(0)),
+      flex(`num(1.0)),
+      textAlign(`left),
+      outlineStyle(`none),
+      cursor(`pointer),
+      userSelect(`none),
+    ]);
+};
+
+type state = {isopen: bool};
+
+let initialState = {isopen: false};
+
+type action =
+  | Toggle;
+
+[@react.component]
+let make = (~content: ReasonReact.reactElement, ~title: string) =>
+  <details>
+    <summary className=Styles.summary> {ReasonReact.string(title)} </summary>
+    content
+  </details>;