git.iko.soy/rowtype-yoga/ry-blocks
on main help sign in
Drop Popper more
ff8b3b5Mark Eibes
src/React/Basic/Popper/Hook.jsdeleted−3
compare with main
unifiedsplit
@@ -1,3 +0,0 @@
1−import { usePopper } from "react-popper"
2−
3−export const usePopperImpl = usePopper
src/React/Basic/Popper/Hook.pursdeleted−32
@@ -1,32 +0,0 @@
1−module React.Basic.Popper.Hook where
2−
3−import Prelude
4−import Data.String as String
5−import Data.Tuple (Tuple(..))
6−import Effect.Uncurried (EffectFn3, runEffectFn3)
7−import Foreign.Object (Object)
8−import Foreign.Object as Object
9−import Prim.Row (class Union)
10−import Yoga.Prelude.View (Hook, unsafeHook)
11−import React.Basic.Popper.Types (Options, PopperData, PopperElement, ReferenceElement)
12−
13−foreign import data UsePopper ∷ Type -> Type -> Type
14−
15−foreign import usePopperImpl ∷ ∀ opts. EffectFn3 ReferenceElement PopperElement { | opts } PopperData
16−
17−toDataAttributes ∷ Object String -> Object String
18−toDataAttributes o = Object.toArrayWithKey (Tuple <<< dropPrefix) o # Object.fromFoldable
19− where
20− dropPrefix = String.drop (String.length "data-")
21−
22−usePopper ∷ ∀ opts opts_. Union opts opts_ Options => ReferenceElement -> PopperElement -> { | opts } -> Hook (UsePopper { | opts }) PopperData
23−usePopper elemRef popperRef opts =
24− unsafeHook do
25− result <- runEffectFn3 usePopperImpl elemRef popperRef opts
26− pure
27− $ result
28− { attributes
29− { popper = toDataAttributes result.attributes.popper
30− , arrow = toDataAttributes result.attributes.arrow
31− }
32− }
src/React/Basic/Popper/Placement/Types.pursdeleted−36
@@ -1,36 +0,0 @@
1−module React.Basic.Popper.Placement.Types (render, Placement(..), Primary(..), Secondary(..)) where
2−
3−import Prelude
4−import Data.Foldable (foldMap)
5−import Data.Maybe (Maybe)
6−
7−data Placement
8− = Placement Primary (Maybe Secondary)
9−
10−render ∷ Placement -> String
11−render (Placement primary maybeSecondary) = do
12− renderPrimary primary <> foldMap ("-" <> _) (renderSecondary <$> maybeSecondary)
13−
14−data Primary
15− = Auto
16− | Left
17− | Right
18− | Top
19− | Bottom
20−
21−data Secondary
22− = Start
23− | End
24−
25−renderPrimary ∷ Primary -> String
26−renderPrimary = case _ of
27− Auto -> "auto"
28− Left -> "left"
29− Right -> "right"
30− Top -> "top"
31− Bottom -> "bottom"
32−
33−renderSecondary ∷ Secondary -> String
34−renderSecondary = case _ of
35− Start -> "start"
36− End -> "end"
src/React/Basic/Popper/Story.pursdeleted−242
@@ -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− }
src/React/Basic/Popper/Types.pursdeleted−31
@@ -1,31 +0,0 @@
1−module React.Basic.Popper.Types where
2−
3−import Foreign.Object (Object)
4−import React.Basic.DOM (CSS)
5−import Yoga.Prelude.View (NodeRef)
6−
7−type ReferenceElement =
8− NodeRef
9−
10−type PopperElement =
11− NodeRef
12−
13−type ArrowElement =
14− NodeRef
15−
16−type DataAttributes =
17− { popper ∷ Object String, arrow ∷ Object String }
18−
19−type Styles =
20− { popper ∷ CSS, arrow ∷ CSS }
21−
22−type PopperData =
23− { styles ∷ Styles, attributes ∷ DataAttributes }
24−
25−foreign import data Modifier ∷ Type
26−
27−type Options =
28− ( modifiers ∷ Array Modifier
29− , strategy ∷ String
30− , placement ∷ String
31− )
src/Yoga/Block/Organism/Form.purs−1
@@ -45,7 +45,6 @@ import React.Basic.DOM as R
45import React.Basic.Emotion as E
45import React.Basic.Emotion as E
46import React.Basic.Hooks (reactComponent)
46import React.Basic.Hooks (reactComponent)
47import React.Basic.Hooks as Hooks
47import React.Basic.Hooks as Hooks
48−import React.Basic.Popper (nullRef)
49import React.DndKit as Dnd
48import React.DndKit as Dnd
50import Record (disjointUnion)
49import Record (disjointUnion)
51import Record.Builder as RB
50import Record.Builder as RB