@@ -1,126 +0,0 @@
1−module Yoga.Block.Atom.Tooltip.View (component, MandatoryProps, Props, PropsF) where
2−
3−import Yoga.Prelude.View
4−import Effect.Aff (Milliseconds(..), delay)
5−import Effect.Uncurried (mkEffectFn1)
6−import Framer.Motion as Motion
7−import React.Basic.DOM (css)
8−import React.Basic.DOM as R
9−import React.Basic.Hooks as React
10−import React.Basic.Hooks.Aff (useAff)
11−import React.Basic.Popper (modifierArrow, modifierOffset, nullRef)
12−import React.Basic.Popper.Hook (usePopper)
13−import Unsafe.Coerce (unsafeCoerce)
14−import Yoga.Block.Atom.Tooltip.Style as Style
15−
16−type PropsF f =
17− ( className ∷ f String
18− , hideDelay ∷ f Milliseconds
19− | Style.Props f (MandatoryProps ())
20− )
21−
22−type MandatoryProps r =
23− ( theTip ∷ JSX
24− , target ∷ JSX
25− | r
26− )
27−
28−type Props =
29− PropsF Id
30−
31−type PropsOptional =
32− PropsF OptionalProp
33−
34−component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | MandatoryProps p }
35−component = rawComponent
36−
37−rawComponent ∷ ∀ p. ReactComponent (Record p)
38−rawComponent =
39− mkForwardRefComponent "Tooltip" do
40− \(props ∷ { | PropsOptional }) _ref -> React.do
41− -- Hooks
42− referenceElement /\ setReferenceElement <- React.useState' nullRef
43− popperElement /\ setPopperElement <- React.useState' nullRef
44− arrowElement /\ setArrowElement <- React.useState' nullRef
45− { styles, attributes } <-
46− usePopper referenceElement popperElement
47− { modifiers:
48− [ modifierArrow { element: arrowElement, padding: 8 }
49− , modifierOffset { x: 0.0, y: 12.0 }
50− ]
51− }
52− visible /\ setVisible <- React.useState' false
53− touching /\ setTouching <- React.useState' false
54− hovering /\ setHovering <- React.useState' false
55− useAff hovering do
56− if hovering then
57− setVisible true # liftEffect
58− else do
59− delay (props.hideDelay ?|| (0.0 # Milliseconds))
60− setVisible false # liftEffect
61− useAff touching do
62− if touching then do
63− delay (1000.0 # Milliseconds)
64− setVisible true # liftEffect
65− else do
66− delay (props.hideDelay ?|| (450.0 # Milliseconds))
67− setVisible false # liftEffect
68− -- Handlers
69− let
70− hoveredIn = setHovering true
71− hoveredOut = setHovering false
72− touchStarted = setTouching true
73− touchEnded = setTouching false
74− -- Elements
75− let
76− result =
77− fragment
78− $ [ refElem [ props.target ]
79− , popperEl
80− [ animatePresence
81− $ guard visible
82− [ content
83− [ props.theTip
84− , arrow
85− ]
86− ]
87− ]
88− ]
89− animatePresence = Motion.animatePresence </ { initial: false }
90− content =
91− Motion.div
92− </* { className: "popper-element-content"
93− , css: Style.content props
94− , initial: Motion.initial $ R.css { opacity: [ 1.0, 0.8, 0.0 ], scale: [ 1.0, 0.85 ] }
95− , animate: Motion.animate $ R.css { opacity: [ 0.0, 0.3, 1.0 ], scale: [ 0.0, 1.05, 1.0, 0.98, 1.01, 1.0 ] }
96− , exit: Motion.exit $ R.css { opacity: [ 1.0, 0.8, 0.0 ], scale: [ 1.0, 0.85 ] }
97− , transition: Motion.transition { duration: 0.2 }
98− , key: "container"
99− }
100− popperEl =
101− div
102− </* { className: "popper-element"
103− , css: Style.popper
104− , ref: unsafeCoerce (mkEffectFn1 setPopperElement)
105− , style: styles.popper
106− , _data: attributes.popper
107− }
108− arrow =
109− div
110− </*> { className: "popper-arrow"
111− , id: "arrow"
112− , css: Style.arrow props
113− , ref: unsafeCoerce (mkEffectFn1 setArrowElement)
114− , style: styles.arrow
115− , _data: attributes.arrow
116− }
117− refElem =
118− Motion.div
119− </ { ref: unsafeCoerce (mkEffectFn1 setReferenceElement)
120− , style: css { display: "inline-block" }
121− , onHoverStart: Motion.onHoverStart \_ _ -> hoveredIn
122− , onHoverEnd: Motion.onHoverEnd \_ _ -> hoveredOut
123− , onTouchStart: handler_ touchStarted
124− , onTouchEnd: handler_ touchEnded
125− }
126− pure result