mirror of
https://github.com/rowtype-yoga/ry-blocks.git
synced 2024-09-11 21:38:06 +03:00
Sheeeeeeet
This commit is contained in:
parent
8d2d8dc0be
commit
5b149c0fe9
@ -47,7 +47,8 @@ sheet = do
|
||||
pure
|
||||
$ fragment
|
||||
[ R.h2_ [ R.text "No Options" ]
|
||||
, R.div { id: "modal-container" }
|
||||
, R.div { id: "clickaway-container", style: R.css { userSelect: "none" } }
|
||||
, R.div { id: "modal-container", style: R.css { userSelect: "none" } }
|
||||
, 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)" }
|
||||
@ -88,6 +89,7 @@ sheet = do
|
||||
setText "Please answer the question"
|
||||
setIsOpen true
|
||||
setIsOpen false
|
||||
, target: "modal-container"
|
||||
, containerId: "modal-container"
|
||||
, clickAwayId: "clickaway-container"
|
||||
}
|
||||
]
|
||||
|
@ -2,8 +2,8 @@ module Yoga.Block.Molecule.Sheet.Style where
|
||||
|
||||
import Yoga.Prelude.Style
|
||||
|
||||
import Fahrtwind (boxSizingBorderBox, boxSizingContentBox, mL', mR', mT, mX, mX', maxHeight', minHeight, overflowYScroll, pB, pB', pL', pR, pT, pT', pX', pY')
|
||||
import Fahrtwind.Style.ScollBar (scrollBar, scrollBar')
|
||||
import Fahrtwind (maxHeight', overflowYScroll, pX', pY')
|
||||
import Fahrtwind.Style.ScollBar (scrollBar')
|
||||
import Yoga.Block.Container.Style (col, colour)
|
||||
|
||||
type Props :: forall k. (Type -> k) -> Row k -> Row k
|
||||
@ -20,6 +20,7 @@ sheet = styles
|
||||
{ zIndex: str "3"
|
||||
, position: fixed
|
||||
, left: str "0"
|
||||
, pointerEvents: auto
|
||||
, width: str "100vw"
|
||||
, background: str colour.backgroundLayer4
|
||||
, borderRadius: str $ "var(--s1) var(--s1) 0 0"
|
||||
|
@ -30,34 +30,35 @@ type Props =
|
||||
, footer :: JSX
|
||||
, isOpen ∷ Boolean
|
||||
, onDismiss ∷ Effect Unit
|
||||
, target ∷ String
|
||||
, containerId ∷ String
|
||||
, clickAwayId :: String
|
||||
| ()
|
||||
}
|
||||
|
||||
component ∷ ReactComponent Props
|
||||
component =
|
||||
unsafePerformEffect
|
||||
$ reactComponent "Sheet Wrapper" \{ header, content, footer, isOpen, onDismiss, target } -> React.do
|
||||
renderInPortal <- useRenderInPortal target
|
||||
$ reactComponent "Sheet Wrapper" \{ header, content, footer, isOpen, onDismiss, containerId, clickAwayId } -> React.do
|
||||
renderInPortal <- useRenderInPortal containerId
|
||||
useKeyDown case _ of
|
||||
KeyCode.Escape -> onDismiss
|
||||
_ -> mempty
|
||||
clickAwayRef <- React.useRef Nullable.null
|
||||
let
|
||||
toRender ∷ JSX
|
||||
toRender =
|
||||
R.div' </ {}
|
||||
/>
|
||||
[ Motion.animatePresence </ {} /> [ guard isOpen $ element clickaway { theRef: clickAwayRef, onDismiss } ]
|
||||
[ Motion.animatePresence </ {} /> [ guard isOpen $ element clickaway { containerId: clickAwayId, onDismiss } ]
|
||||
, element window { onDismiss, header, content, footer, isOpen }
|
||||
]
|
||||
pure (renderInPortal toRender)
|
||||
|
||||
clickaway ∷ ReactComponent { theRef ∷ Ref (Nullable Node), onDismiss ∷ Effect Unit }
|
||||
clickaway ∷ ReactComponent { containerId ∷ String, onDismiss ∷ Effect Unit }
|
||||
clickaway =
|
||||
unsafePerformEffect
|
||||
$ reactComponent "Sheet Clickaway" \{ theRef, onDismiss } -> React.do
|
||||
pure $ Emotion.elementKeyed Motion.div
|
||||
$ reactComponent "Sheet Clickaway" \{ containerId, onDismiss } -> React.do
|
||||
renderInPortal <- useRenderInPortal containerId
|
||||
pure $ renderInPortal $ Emotion.elementKeyed Motion.div
|
||||
$
|
||||
{ key: "ry-modal-clickaway"
|
||||
, onClick: handler_ onDismiss
|
||||
@ -66,7 +67,6 @@ clickaway =
|
||||
, initial: Motion.prop $ css { opacity: 0.0 }
|
||||
, animate: Motion.prop $ css { opacity: 1.0 }
|
||||
, exit: Motion.prop $ css { opacity: 0.0 }
|
||||
, ref: theRef
|
||||
}
|
||||
|
||||
type WindowProps =
|
||||
|
Loading…
Reference in New Issue
Block a user