8d2d8dc · rowtype-yoga/ry-blocks

git.iko.soy/rowtype-yoga/ry-blocks

on main help sign in

Simplify sheet

8d2d8dcMark Eibes4 years ago

src/Yoga/Block/Molecule/Sheet/Story.purs+42−57

compare with main

unifiedsplit

@@ -1,8 +1,6 @@

1module Yoga.Block.Molecule.Sheet.Story where

3import Prelude

4−import Data.Foldable (foldMap)

5−import Data.Maybe (Maybe(..), isNothing)

6import Data.Monoid (power)

4import Data.Monoid (power)

7import Data.Time.Duration (Seconds(..), fromDuration)

5import Data.Time.Duration (Seconds(..), fromDuration)

8import Data.Tuple.Nested ((/\))

6import Data.Tuple.Nested ((/\))

@@ -14,13 +12,8 @@ import React.Basic (JSX, element, fragment)

14import React.Basic.DOM as R

12import React.Basic.DOM as R

15import React.Basic.Emotion as E

13import React.Basic.Emotion as E

16import React.Basic.Events (handler_)

14import React.Basic.Events (handler_)

17−import React.Basic.Hooks (reactComponent, useEffectAlways)

15+import React.Basic.Hooks (reactComponent)

18import React.Basic.Hooks as React

16import 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)

24import Yoga ((/>))

17import Yoga ((/>))

25import Yoga.Block as Block

18import Yoga.Block as Block

26import Yoga.Block.Atom.Button.Types as ButtonType

19import Yoga.Block.Atom.Button.Types as ButtonType

@@ -51,58 +44,50 @@ sheet = do

51 $ reactComponent "Sheet Story" \{} -> React.do

44 $ reactComponent "Sheet Story" \{} -> React.do

52 text /\ setText <- React.useState' "In order to spy on you we need your consent. Will you give it?"

45 text /\ setText <- React.useState' "In order to spy on you we need your consent. Will you give it?"

53 isOpen /\ setIsOpen <- React.useState' true

46 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

60 pure

47 pure

61 $ fragment

48 $ fragment

62 [ R.h2_ [ R.text "No Options" ]

49 [ R.h2_ [ R.text "No Options" ]

63 , R.div { id: "modal-container" }

50 , R.div { id: "modal-container" }

64− , maybeModalElement

65− # foldMap \(modalElement ∷ Element) ->

66− element Sheet.component

51+ , element Sheet.component

67− { header: R.h2_ [ R.text "Would you like us to track you?" ]

52+ { header: R.h2_ [ R.text "Would you like us to track you?" ]

68− , footer: Block.cluster { justify: "flex-end", space: "var(--s-1)" }

53+ , footer: Block.cluster { justify: "flex-end", space: "var(--s-1)" }

69− />

54+ />

70− [ Block.button

55+ [ Block.button

71− { buttonType: ButtonType.Primary

56+ { buttonType: ButtonType.Primary

72− , onClick:

57+ , onClick:

73− handler_ do

58+ handler_ do

74− launchAff_ do

59+ launchAff_ do

75− delay (fromDuration $ (2.0 # Seconds))

60+ delay (fromDuration $ (2.0 # Seconds))

76− liftEffect do

61+ liftEffect do

77− setText "Thanks, that's very nice of you"

62+ setText "Thanks, that's very nice of you"

78− setIsOpen true

63+ setIsOpen true

79− setIsOpen false

64+ setIsOpen false

80− }

65+ }

81− [ R.text "Yes" ]

66+ [ R.text "Yes" ]

82− , Block.button

67+ , Block.button

83− { buttonType: ButtonType.Dangerous

68+ { buttonType: ButtonType.Dangerous

84− , onClick:

69+ , onClick:

85− handler_ do

70+ handler_ do

86− launchAff_ do

71+ launchAff_ do

87− delay (fromDuration $ (2.0 # Seconds))

72+ delay (fromDuration $ (2.0 # Seconds))

88− liftEffect do

73+ liftEffect do

89− setText (power "Oh, but please! " 200)

74+ setText (power "Oh, but please! " 200)

90− setIsOpen true

75+ setIsOpen true

91− setIsOpen false

76+ setIsOpen false

92− }

77+ }

93− [ R.text "No" ]

78+ [ R.text "No" ]

94− ]

79+ ]

96− , content: R.p_ [ R.text text ]

81+ , content: R.p_ [ R.text text ]

97− , isOpen

82+ , isOpen

98− , onDismiss:

83+ , onDismiss:

99− do

84+ do

100− launchAff_ do

85+ launchAff_ do

101− delay (fromDuration $ (0.8 # Seconds))

86+ delay (fromDuration $ (0.8 # Seconds))

102− liftEffect do

87+ liftEffect do

103− setText "Please answer the question"

88+ setText "Please answer the question"

104− setIsOpen true

89+ setIsOpen true

105− setIsOpen false

90+ setIsOpen false

106− , target: modalElement

91+ , target: "modal-container"

107− }

92+ }

108 ]

93 ]

src/Yoga/Block/Molecule/Sheet/Style.purs+1

@@ -58,6 +58,7 @@ clickaway =

58 , position: fixed

59 , left: _0

60 , top: _0

61+ , pointerEvents: auto

61 , backdropFilter: str "blur(4px) brightness(80%)"

62 , backdropFilter: str "blur(4px) brightness(80%)"

62 , zIndex: str "3"

63 , zIndex: str "3"

63 }

64 }

src/Yoga/Block/Molecule/Sheet/View.purs+5−4

@@ -10,17 +10,17 @@ import Effect.Unsafe (unsafePerformEffect)

10import Framer.Motion as Motion

11import MotionValue (useMotionValue)

12import MotionValue as MotionValue

13−import React.Basic.DOM (createPortal, css)

13+import React.Basic.DOM (css)

14import React.Basic.DOM as R

15import React.Basic.Emotion as E

16import React.Basic.Emotion as Emotion

17import React.Basic.Hooks (reactComponent)

18import React.Basic.Hooks as React

19−import Web.DOM (Element)

20import Web.HTML as HTML

19import Web.HTML as HTML

21import Web.HTML.Window (innerHeight)

20import Web.HTML.Window (innerHeight)

22import Yoga.Block.Hook.Key as KeyCode

21import Yoga.Block.Hook.Key as KeyCode

23import Yoga.Block.Hook.UseKeyDown (useKeyDown)

22import Yoga.Block.Hook.UseKeyDown (useKeyDown)

23+import Yoga.Block.Hook.UseRenderInPortal (useRenderInPortal)

24import Yoga.Block.Layout.Stack as Stack

25import Yoga.Block.Molecule.Sheet.Style as Style

@@ -30,7 +30,7 @@ type Props =

30 , footer :: JSX

31 , isOpen ∷ Boolean

32 , onDismiss ∷ Effect Unit

33− , target ∷ Element

33+ , target ∷ String

34 | ()

35 }

@@ -38,6 +38,7 @@ component ∷ ReactComponent Props

38component =

39 unsafePerformEffect

40 $ reactComponent "Sheet Wrapper" \{ header, content, footer, isOpen, onDismiss, target } -> React.do

41+ renderInPortal <- useRenderInPortal target

41 useKeyDown case _ of

42 useKeyDown case _ of

42 KeyCode.Escape -> onDismiss

43 KeyCode.Escape -> onDismiss

43 _ -> mempty

44 _ -> mempty

@@ -50,7 +51,7 @@ component =

50 [ Motion.animatePresence </ {} /> [ guard isOpen $ element clickaway { theRef: clickAwayRef, onDismiss } ]

51 [ Motion.animatePresence </ {} /> [ guard isOpen $ element clickaway { theRef: clickAwayRef, onDismiss } ]

51 , element window { onDismiss, header, content, footer, isOpen }

52 , element window { onDismiss, header, content, footer, isOpen }

52 ]

53 ]

53− pure (createPortal toRender target)

54+ pure (renderInPortal toRender)

55clickaway ∷ ReactComponent { theRef ∷ Ref (Nullable Node), onDismiss ∷ Effect Unit }

56clickaway ∷ ReactComponent { theRef ∷ Ref (Nullable Node), onDismiss ∷ Effect Unit }

56clickaway =

57clickaway =