@@ -1,242 +0,0 @@
1−module React.Basic.Popper.Story where
2−
3−import Yoga.Prelude.View
4−import Data.Interpolate (i)
5−import Effect.Uncurried (mkEffectFn1)
6−import Effect.Unsafe (unsafePerformEffect)
7−import Framer.Motion as Motion
8−import React.Basic.DOM (h2_, text)
9−import React.Basic.DOM as R
10−import React.Basic.Emotion as E
11−import React.Basic.Hooks as React
12−import React.Basic.Popper.Hook (usePopper)
13−import React.Basic.Popper (modifierArrow, modifierOffset)
14−import Unsafe.Coerce (unsafeCoerce)
15−import Yoga.Block as Block
16−import Yoga.Block.Container.Style as Styles
17−import Yoga.Block.Internal.CSS (nest)
18−
19−default ∷
20− { decorators ∷ Array (Effect JSX -> JSX)
21− , title ∷ String
22− }
23−default =
24− { title: "Popper"
25− , decorators:
26− [ \storyFn ->
27− div
28− </ {}
29− /> [ element E.global { styles: Styles.global }
30− , unsafePerformEffect storyFn
31− ]
32− ]
33− }
34−
35−popper ∷ Effect JSX
36−popper = do
37− example <- mkBasicExample
38− pure
39− $ fragment
40− [ div </ {}
41− /> [ h2_ [ text "Some Popper" ]
42− , element example {}
43− ]
44− ]
45− where
46− nullRef ∷ NodeRef
47− nullRef = unsafeCoerce null
48−
49− mkBasicExample =
50− React.reactComponent "Popper example" \_p -> React.do
51− referenceElement /\ setReferenceElement <- React.useState' nullRef
52− popperElement /\ setPopperElement <- React.useState' nullRef
53− arrowElement /\ setArrowElement <- React.useState' nullRef
54− { styles, attributes } <-
55− usePopper referenceElement popperElement
56− { modifiers:
57− [ modifierArrow { element: arrowElement, padding: 4 }
58− , modifierOffset { x: 0.0, y: 8.0 }
59− ]
60− }
61− pure
62− $ fragment
63− $ [ button
64− </ { type: "button"
65− , ref: unsafeCoerce (mkEffectFn1 setReferenceElement)
66− }
67− /> [ text "Reference element" ]
68− , div
69− </* { className: "popper-element"
70− , css:
71− E.css
72− { background: E.str "darkslateblue"
73− , borderRadius: E.str "8px"
74− , display: E.str "block"
75− , padding: E.str "4px 8px"
76− , "&[data-popper-placement^='top'] > .popper-arrow":
77− nest { bottom: E.str "-4px" }
78− , "&[data-popper-placement^='bottom'] > .popper-arrow":
79− nest { top: E.str "-4px" }
80− , "&[data-popper-placement^='left'] > .popper-arrow":
81− nest { right: E.str "-4px" }
82− , "&[data-popper-placement^='right'] > .popper-arrow":
83− nest { left: E.str "-4px" }
84− }
85− , ref: unsafeCoerce (mkEffectFn1 setPopperElement)
86− , style: styles.popper
87− , _data: attributes.popper
88− }
89− /> [ text "Popper Element"
90− , div
91− </*> { className: "popper-arrow"
92− , id: "arrow"
93− , css:
94− E.css
95− { position: E.str "absolute"
96− , width: E.str "8px"
97− , height: E.str "8px"
98− , zIndex: E.str "-1"
99− , "&::before":
100− nest
101− { position: E.str "absolute"
102− , width: E.str "8px"
103− , height: E.str "8px"
104− , zIndex: E.str "-1"
105− , content: E.str "''"
106− , transform: E.str "rotate(45deg)"
107− , background: E.str "darkslateblue"
108− }
109− }
110− , ref: unsafeCoerce (mkEffectFn1 setArrowElement)
111− , style: styles.arrow
112− , _data: attributes.arrow
113− }
114− ]
115− ]
116−
117−animatedPopper ∷ Effect JSX
118−animatedPopper = do
119− example <- mkBasicExample
120− pure
121− $ fragment
122− [ R.div_
123− [ R.h2_ [ R.text "Some Popper" ]
124− , element example {}
125− ]
126− ]
127− where
128− nullRef ∷ NodeRef
129− nullRef = unsafeCoerce null
130−
131− mkBasicExample =
132− React.reactComponent "Popper example" \_p -> React.do
133− -- Hooks
134− referenceElement /\ setReferenceElement <- React.useState' nullRef
135− popperElement /\ setPopperElement <- React.useState' nullRef
136− arrowElement /\ setArrowElement <- React.useState' nullRef
137− { styles, attributes } <-
138− usePopper referenceElement popperElement
139− { modifiers:
140− [ modifierArrow { element: arrowElement, padding: 4 }
141− , modifierOffset { x: 0.0, y: 12.0 }
142− ]
143− }
144− on /\ setOn <- React.useState' true
145− -- Handlers
146− let buttonClicked = setOn (not on)
147− -- Elements
148− let
149− result =
150− fragment
151− $ [ refElem
152− , popperEl
153− [ animatePresence
154− $ guard on
155− [ content
156− [ Block.box {} [ text "Ich bin Stinky Bill" ]
157− , arrow
158− ]
159− ]
160− ]
161− ]
162− animatePresence =
163− Motion.animatePresence
164− </ { initial: false
165− }
166− content =
167− Motion.div
168− </* { className: "popper-element-content"
169− , css: contentCss
170− , initial: Motion.initial $ R.css { opacity: [ 1.0, 0.8, 0.0 ], scale: [ 1.0, 0.85 ] }
171− , 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 ] }
172− , exit: Motion.exit $ R.css { opacity: [ 1.0, 0.8, 0.0 ], scale: [ 1.0, 0.85 ] }
173− , transition: Motion.transition { duration: 0.2 }
174− , key: "container"
175− }
176− popperEl =
177− div
178− </* { className: "popper-element"
179− , css: popperCss
180− , ref: unsafeCoerce (mkEffectFn1 setPopperElement)
181− , style: styles.popper
182− , _data: attributes.popper
183− }
184− arrow =
185− div
186− </*> { className: "popper-arrow"
187− , id: "arrow"
188− , css: arrowCss
189− , ref: unsafeCoerce (mkEffectFn1 setArrowElement)
190− , style: styles.arrow
191− , _data: attributes.arrow
192− }
193− refElem =
194− button
195− </ { ref: unsafeCoerce (mkEffectFn1 setReferenceElement)
196− , onClick: handler preventDefault (const buttonClicked)
197− }
198− /> [ R.text "Reference element" ]
199− pure result
200−
201− backgroundColour = "var(--highlight)"
202−
203− backgroundColour2 = "rgb(100, 160, 240)"
204−
205− arrowCss =
206− E.css
207− { position: E.str "absolute"
208− , width: E.str "8px"
209− , height: E.str "8px"
210− , zIndex: E.str "0"
211− , "&::before":
212− nest
213− { position: E.str "absolute"
214− , width: E.str "8px"
215− , height: E.str "8px"
216− , content: E.str "''"
217− , transform: E.str "rotate(45deg)"
218− , background: E.str backgroundColour
219− }
220− }
221−
222− contentCss =
223− E.css
224− { background: E.str $ i "linear-gradient(0deg," backgroundColour "," backgroundColour2 "," backgroundColour ")"
225− , fontSize: E.str "14px"
226− , zIndex: E.str "-1"
227− , color: E.str $ "white"
228− , boxShadow: E.str "0 1px 8px rgba(0,0,0,0.5)"
229− , borderRadius: E.str "12px"
230− }
231−
232− popperCss =
233− E.css
234− { "&[data-popper-placement^='top'] > * > .popper-arrow":
235− nest { bottom: E.str "-4px" }
236− , "&[data-popper-placement^='bottom'] > * > .popper-arrow":
237− nest { top: E.str "-4px" }
238− , "&[data-popper-placement^='left'] > * > .popper-arrow":
239− nest { right: E.str "-4px" }
240− , "&[data-popper-placement^='right'] > * > .popper-arrow":
241− nest { left: E.str "-4px" }
242− }