mirror of
https://github.com/rowtype-yoga/ry-blocks.git
synced 2024-09-11 21:38:06 +03:00
Simplify sheet
This commit is contained in:
parent
c0d4f50880
commit
8d2d8dc0be
@ -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"
|
||||
}
|
||||
]
|
||||
|
@ -58,6 +58,7 @@ clickaway =
|
||||
, position: fixed
|
||||
, left: _0
|
||||
, top: _0
|
||||
, pointerEvents: auto
|
||||
, backdropFilter: str "blur(4px) brightness(80%)"
|
||||
, zIndex: str "3"
|
||||
}
|
||||
|
@ -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 =
|
||||
|
Loading…
Reference in New Issue
Block a user