@@ -1,8 +1,6 @@
11module Yoga.Block.Molecule.Sheet.Story where
22
33import Prelude
4−import Data.Foldable (foldMap)
5−import Data.Maybe (Maybe(..), isNothing)
64import Data.Monoid (power)
75import Data.Time.Duration (Seconds(..), fromDuration)
86import Data.Tuple.Nested ((/\))
@@ -14,13 +12,8 @@ import React.Basic (JSX, element, fragment)
1412import React.Basic.DOM as R
1513import React.Basic.Emotion as E
1614import React.Basic.Events (handler_)
17−import React.Basic.Hooks (reactComponent, useEffectAlways)
15+import React.Basic.Hooks (reactComponent)
1816import React.Basic.Hooks as React
19−import Web.DOM (Element)
20−import Web.DOM.NonElementParentNode (getElementById)
21−import Web.HTML (window)
22−import Web.HTML.HTMLDocument (toNonElementParentNode)
23−import Web.HTML.Window (document)
2417import Yoga ((/>))
2518import Yoga.Block as Block
2619import Yoga.Block.Atom.Button.Types as ButtonType
@@ -51,58 +44,50 @@ sheet = do
5144 $ reactComponent "Sheet Story" \{} -> React.do
5245 text /\ setText <- React.useState' "In order to spy on you we need your consent. Will you give it?"
5346 isOpen /\ setIsOpen <- React.useState' true
54− maybeModalElement /\ setModalElement <- React.useState' Nothing
55− useEffectAlways do
56− when (isNothing maybeModalElement) do
57− container <- getElementById "modal-container" =<< (map toNonElementParentNode $ document =<< window)
58− setModalElement container
59− mempty
6047 pure
6148 $ fragment
6249 [ R.h2_ [ R.text "No Options" ]
6350 , R.div { id: "modal-container" }
64− , maybeModalElement
65− # foldMap \(modalElement ∷ Element) ->
66− element Sheet.component
67− { header: R.h2_ [ R.text "Would you like us to track you?" ]
68− , footer: Block.cluster { justify: "flex-end", space: "var(--s-1)" }
69− />
70− [ Block.button
71− { buttonType: ButtonType.Primary
72− , onClick:
73− handler_ do
74− launchAff_ do
75− delay (fromDuration $ (2.0 # Seconds))
76− liftEffect do
77− setText "Thanks, that's very nice of you"
78− setIsOpen true
79− setIsOpen false
80− }
81− [ R.text "Yes" ]
82− , Block.button
83− { buttonType: ButtonType.Dangerous
84− , onClick:
85− handler_ do
86− launchAff_ do
87− delay (fromDuration $ (2.0 # Seconds))
88− liftEffect do
89− setText (power "Oh, but please! " 200)
90− setIsOpen true
91− setIsOpen false
92− }
93− [ R.text "No" ]
94− ]
51+ , element Sheet.component
52+ { header: R.h2_ [ R.text "Would you like us to track you?" ]
53+ , footer: Block.cluster { justify: "flex-end", space: "var(--s-1)" }
54+ />
55+ [ Block.button
56+ { buttonType: ButtonType.Primary
57+ , onClick:
58+ handler_ do
59+ launchAff_ do
60+ delay (fromDuration $ (2.0 # Seconds))
61+ liftEffect do
62+ setText "Thanks, that's very nice of you"
63+ setIsOpen true
64+ setIsOpen false
65+ }
66+ [ R.text "Yes" ]
67+ , Block.button
68+ { buttonType: ButtonType.Dangerous
69+ , onClick:
70+ handler_ do
71+ launchAff_ do
72+ delay (fromDuration $ (2.0 # Seconds))
73+ liftEffect do
74+ setText (power "Oh, but please! " 200)
75+ setIsOpen true
76+ setIsOpen false
77+ }
78+ [ R.text "No" ]
79+ ]
9580
96− , content: R.p_ [ R.text text ]
97− , isOpen
98− , onDismiss:
99− do
100− launchAff_ do
101− delay (fromDuration $ (0.8 # Seconds))
102− liftEffect do
103− setText "Please answer the question"
104− setIsOpen true
105− setIsOpen false
106− , target: modalElement
107− }
81+ , content: R.p_ [ R.text text ]
82+ , isOpen
83+ , onDismiss:
84+ do
85+ launchAff_ do
86+ delay (fromDuration $ (0.8 # Seconds))
87+ liftEffect do
88+ setText "Please answer the question"
89+ setIsOpen true
90+ setIsOpen false
91+ , target: "modal-container"
92+ }
10893 ]