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

Sheeeeeeet

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

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

@ -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"
}
]

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

@ -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"

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

@ -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 =