commit ec91bd22cf333e31beb7457bbbfe86964318e3df parent 274d36ead9e239f1fd03b6c36ecf3a7007e68c6a Author: Yohanes Bandung <bandungpenting@gmail.com> Date: Wed, 14 Aug 2019 18:08:11 +0700 feature(Components) => added <ContentList /> Diffstat:
| M | bsconfig.json | | | 2 | +- |
| M | src/CurViScene.re | | | 8 | ++++++++ |
| D | src/List.re | | | 26 | -------------------------- |
| D | src/Spoiler.re | | | 31 | ------------------------------- |
| R | src/Component1.re -> src/components/Component1.re | | | 0 | |
| R | src/Component2.re -> src/components/Component2.re | | | 0 | |
| A | src/components/ContentList.re | | | 65 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | src/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>;