rowtype-yoga/ry-blocks
1
0
Fork 0
mirror of https://github.com/rowtype-yoga/ry-blocks.git synced 2024-09-11 21:38:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

Simplify sheet

Browse Source
This commit is contained in:
Mark Eibes 2022-07-09 00:44:13 +02:00
parent c0d4f50880
commit 8d2d8dc0be
3 changed files with 48 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
src/Yoga/Block/Molecule/Sheet/Story.purs
View File

@ -1,8 +1,6 @@
module Yoga.Block.Molecule.Sheet.Story where
import Prelude
import Data.Foldable (foldMap)
import Data.Maybe (Maybe(..), isNothing)
import Data.Monoid (power)
import Data.Time.Duration (Seconds(..), fromDuration)
import Data.Tuple.Nested ((/\))
@ -14,13 +12,8 @@ import React.Basic (JSX, element, fragment)
import React.Basic.DOM as R
import React.Basic.Emotion as E
import React.Basic.Events (handler_)
import React.Basic.Hooks (reactComponent, useEffectAlways)
import React.Basic.Hooks (reactComponent)
import React.Basic.Hooks as React
import Web.DOM (Element)
import Web.DOM.NonElementParentNode (getElementById)
import Web.HTML (window)
import Web.HTML.HTMLDocument (toNonElementParentNode)
import Web.HTML.Window (document)
import Yoga ((/>))
import Yoga.Block as Block
import Yoga.Block.Atom.Button.Types as ButtonType
@ -51,58 +44,50 @@ sheet = do
$ reactComponent "Sheet Story" \{} -> React.do
text /\ setText <- React.useState' "In order to spy on you we need your consent. Will you give it?"
isOpen /\ setIsOpen <- React.useState' true
maybeModalElement /\ setModalElement <- React.useState' Nothing
useEffectAlways do
when (isNothing maybeModalElement) do
container <- getElementById "modal-container" =<< (map toNonElementParentNode $ document =<< window)
setModalElement container
mempty
pure
$ fragment
[ R.h2_ [ R.text "No Options" ]
, R.div { id: "modal-container" }
, maybeModalElement
# foldMap \(modalElement ∷ Element) ->
element Sheet.component
{ header: R.h2_ [ R.text "Would you like us to track you?" ]
, footer: Block.cluster { justify: "flex-end", space: "var(--s-1)" }
/>
[ Block.button
{ buttonType: ButtonType.Primary
, onClick:
handler_ do
launchAff_ do
delay (fromDuration $ (2.0 # Seconds))
liftEffect do
setText "Thanks, that's very nice of you"
setIsOpen true
setIsOpen false
}
[ R.text "Yes" ]
, Block.button
{ buttonType: ButtonType.Dangerous
, onClick:
handler_ do
launchAff_ do
delay (fromDuration $ (2.0 # Seconds))
liftEffect do
setText (power "Oh, but please! " 200)
setIsOpen true
setIsOpen false
}
[ R.text "No" ]
]
, element Sheet.component
{ header: R.h2_ [ R.text "Would you like us to track you?" ]
, footer: Block.cluster { justify: "flex-end", space: "var(--s-1)" }
/>
[ Block.button
{ buttonType: ButtonType.Primary
, onClick:
handler_ do
launchAff_ do
delay (fromDuration $ (2.0 # Seconds))
liftEffect do
setText "Thanks, that's very nice of you"
setIsOpen true
setIsOpen false
}
[ R.text "Yes" ]
, Block.button
{ buttonType: ButtonType.Dangerous
, onClick:
handler_ do
launchAff_ do
delay (fromDuration $ (2.0 # Seconds))
liftEffect do
setText (power "Oh, but please! " 200)
setIsOpen true
setIsOpen false
}
[ R.text "No" ]
]
, content: R.p_ [ R.text text ]
, isOpen
, onDismiss:
do
launchAff_ do
delay (fromDuration $ (0.8 # Seconds))
liftEffect do
setText "Please answer the question"
setIsOpen true
setIsOpen false
, target: modalElement
}
, content: R.p_ [ R.text text ]
, isOpen
, onDismiss:
do
launchAff_ do
delay (fromDuration $ (0.8 # Seconds))
liftEffect do
setText "Please answer the question"
setIsOpen true
setIsOpen false
, target: "modal-container"
}
]

1
src/Yoga/Block/Molecule/Sheet/Style.purs
View File

@ -58,6 +58,7 @@ clickaway =
, position: fixed
, left: _0
, top: _0
, pointerEvents: auto
, backdropFilter: str "blur(4px) brightness(80%)"
, zIndex: str "3"
}

9
src/Yoga/Block/Molecule/Sheet/View.purs
View File

@ -10,17 +10,17 @@ import Effect.Unsafe (unsafePerformEffect)
import Framer.Motion as Motion
import MotionValue (useMotionValue)
import MotionValue as MotionValue
import React.Basic.DOM (createPortal, css)
import React.Basic.DOM (css)
import React.Basic.DOM as R
import React.Basic.Emotion as E
import React.Basic.Emotion as Emotion
import React.Basic.Hooks (reactComponent)
import React.Basic.Hooks as React
import Web.DOM (Element)
import Web.HTML as HTML
import Web.HTML.Window (innerHeight)
import Yoga.Block.Hook.Key as KeyCode
import Yoga.Block.Hook.UseKeyDown (useKeyDown)
import Yoga.Block.Hook.UseRenderInPortal (useRenderInPortal)
import Yoga.Block.Layout.Stack as Stack
import Yoga.Block.Molecule.Sheet.Style as Style
@ -30,7 +30,7 @@ type Props =
, footer :: JSX
, isOpen ∷ Boolean
, onDismiss ∷ Effect Unit
, target ∷ Element
, target ∷ String
| ()
}
@ -38,6 +38,7 @@ component ∷ ReactComponent Props
component =
unsafePerformEffect
$ reactComponent "Sheet Wrapper" \{ header, content, footer, isOpen, onDismiss, target } -> React.do
renderInPortal <- useRenderInPortal target
useKeyDown case _ of
KeyCode.Escape -> onDismiss
_ -> mempty
@ -50,7 +51,7 @@ component =
[ Motion.animatePresence </ {} /> [ guard isOpen $ element clickaway { theRef: clickAwayRef, onDismiss } ]
, element window { onDismiss, header, content, footer, isOpen }
]
pure (createPortal toRender target)
pure (renderInPortal toRender)
clickaway ∷ ReactComponent { theRef ∷ Ref (Nullable Node), onDismiss ∷ Effect Unit }
clickaway =