git.iko.soy/rowtype-yoga/ry-blocks
on main help sign in
Refactoring input
cbfdcbfMark Eibes
src/Yoga/Block/Atom/Input/View.purs+2−73
compare with main
unifiedsplit
@@ -1,14 +1,11 @@
1module Yoga.Block.Atom.Input.View where
1module Yoga.Block.Atom.Input.View where
2
2
3import Yoga.Prelude.View
3import Yoga.Prelude.View
4−import Data.Array as Array
5−import Data.Interpolate (i)
6import Data.String.NonEmpty (NonEmptyString)
4import Data.String.NonEmpty (NonEmptyString)
7import Foreign.Object (Object)
5import Foreign.Object (Object)
8import Foreign.Object as Object
6import Foreign.Object as Object
9import Framer.Motion as M
7import Framer.Motion as M
10−import Partial.Unsafe (unsafeCrashWith)
11−import React.Basic.DOM (CSS, css)
8+import React.Basic.DOM (css)
12import React.Basic.DOM as R
9import React.Basic.DOM as R
13import React.Basic.Hooks as React
10import React.Basic.Hooks as React
14import Web.HTML.HTMLInputElement as InputElement
11import Web.HTML.HTMLInputElement as InputElement
@@ -49,73 +46,6 @@ mkLeftIcon icon =
49 }
46 }
50 ]
47 ]
51
48
52−containerVariants ∷
53− { blurred ∷ CSS
54− , focussed ∷ CSS
55− }
56−containerVariants =
57− { focussed:
58− css
59− { clipPath
60− , transition: { duration: 0.6 }
61− }
62− , blurred:
63− css
64− { clipPath:
65− drawPathUntil (Array.length path + 1) path
66− }
67− }
68− where
69− clipPath = 6 Array... (Array.length path) <#> \ln -> drawPathUntil ln path
70−
71−type Point =
72− { x ∷ Int, y ∷ Int }
73−
74−drawPathUntil ∷ Int -> Array Point -> String
75−drawPathUntil idx thePath = do
76− let fn { x, y } = i x "%" " " y "%"
77− let firstFew = Array.take idx thePath
78− let lastFew = Array.drop idx thePath $> (Array.last firstFew # fromMaybe' \_ -> unsafeCrashWith "ogod")
79− let rendered = intercalate "," $ fn <$> (firstFew <> lastFew)
80− i "polygon(" rendered ")"
81−
82−path ∷ Array Point
83−path = mkPath 4 8
84−
85−mkPath ∷ Int -> Int -> Array Point
86−mkPath borderX borderY = do
87− let
88− inside =
89− [ {- ⌜ -} p borderX borderY
90− , {- ⌞ -} p borderX (100 - borderY)
91− , {- ⌟ -} p (100 - borderX) (100 - borderY)
92− , {- ⌝ -} p (100 - borderX) borderY
93− , {- ⌜ -} p borderX borderY
94− ]
95− outside =
96− [ {-⌜ -} p 0 0
97− , {-⌞ -} p 0 100
98− , {- . -} p 25 100
99− , {- . -} p 50 100
100− , {- . -} p 75 100
101− , {- ⌟-} p 100 100
102− , {- ⌝-} p 100 0
103− , {- ^ -} p 75 0
104− , {- ^ -} p 50 0
105− , {- ^ -} p 25 0
106− , {-⌜ -} p 0 0
107− ]
108− inside <> outside <> (Array.reverse inside)
109− where
110− p ∷ Int -> Int -> Point
111− p x y = { x, y }
112−
113−containerVariantLabels ∷
114− { blurred ∷ M.VariantLabel
115− , focussed ∷ M.VariantLabel
116− }
117−containerVariantLabels = M.makeVariantLabels containerVariants
118−
119rawInput ∷ ∀ p. ReactComponent { | p }
49rawInput ∷ ∀ p. ReactComponent { | p }
120rawInput =
50rawInput =
121 mkForwardRefComponent "Input" do
51 mkForwardRefComponent "Input" do
@@ -206,8 +136,7 @@ rawComponent =
206 )
136 )
207 inputContainer =
137 inputContainer =
208 rawContainer
138 rawContainer
209− </ { label: (mkLabel <$> props.label) ?|| mempty
210− , hasFocus: hasFocus
139+ </ { hasFocus: hasFocus
211 , isInvalid: aria # Object.lookup "invalid" <#> (_ == "true") # maybeToOp
140 , isInvalid: aria # Object.lookup "invalid" <#> (_ == "true") # maybeToOp
212 , css: props.css
141 , css: props.css
213 }
142 }
src/Yoga/Block/Atom/Popover/View.purs+14−14
@@ -10,23 +10,23 @@ import React.Basic.Popper.Types (modifierOffset, nullRef)
10import Unsafe.Coerce (unsafeCoerce)
10import Unsafe.Coerce (unsafeCoerce)
11import Yoga.Block.Atom.Popover.Style as Style
11import Yoga.Block.Atom.Popover.Style as Style
12
12
13−type PropsF f
13+type PropsF f =
14− = ( className ∷ f String
14+ ( className ∷ f String
15− , placement ∷ f Placement
15+ , placement ∷ f Placement
16− | Style.Props f (MandatoryProps DivProps)
16+ | Style.Props f (MandatoryProps DivProps)
17− )
17+ )
18
18
19−type MandatoryProps r
19+type MandatoryProps r =
20− = ( children ∷ Array JSX
20+ ( children ∷ Array JSX
21− , referenceElement ∷ NodeRef
21+ , referenceElement ∷ NodeRef
22− | r
22+ | r
23− )
23+ )
24
24
25−type Props
25+type Props =
26− = PropsF Id
26+ PropsF Id
27
27
28−type PropsOptional
28+type PropsOptional =
29− = PropsF OptionalProp
29+ PropsF OptionalProp
30
30
31component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | MandatoryProps p }
31component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | MandatoryProps p }
32component = rawComponent
32component = rawComponent